aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFurkan Sahin <furkan-dev@proton.me>2022-07-19 20:26:55 -0400
committerFurkan Sahin <furkan-dev@proton.me>2022-07-19 20:26:55 -0400
commit632b6a47676f6808ac5f12e11a1ebaf46dfe1e61 (patch)
tree03513f9c5b986812fca021bfa1d1cb76144755aa
parentb1f1f064bbede5d02bdd7e83c384351c8de669f4 (diff)
readme update
-rw-r--r--README.md94
1 files changed, 12 insertions, 82 deletions
diff --git a/README.md b/README.md
index bc876e3..2f0f240 100644
--- a/README.md
+++ b/README.md
@@ -1,54 +1,33 @@
-## Get started
+# Development
-Install the dependencies...
+This app requires the Node Package Manager (`npm`).
-```bash
-cd svelte-app
-npm install
-```
-
-...then start [Rollup](https://rollupjs.org):
```bash
-npm run dev
+git clone https://git.sr.ht/~mavipok/peer-teacher-scheduler &&
+cd PTDatabaseApp &&
+npm i
```
-Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
-
-By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
-
-If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
-
-## Building and running in production mode
-
-To create an optimised version of the app:
+Then start [Rollup](https://rollupjs.org)
```bash
-npm run build
+npm run dev
```
-You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
-
+**note** that `npm run <arg>` is defined in [`package.json`](./package.json)
-## Single-page app mode
+Navigate to [localhost:1776](http://localhost:1776) to interact with the app through the browser. The port is *always* subject to change, so read the output in your terminal to see the port chosen by `sirv`.
-By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
-If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
-
-```js
-"start": "sirv public --single"
-```
-
-
-# Develop
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
This application uses Svelte and Typescript.
## Svelte
Svelte is a tool for building fast web applications, similar to React, Angular, or Vue.
-We highly recommend going through the [quick tutorial that Svelte maintainers have prepared](https://svelte.dev/tutorial/basics).
+I highly recommend going through the [quick tutorial that Svelte maintainers have prepared](https://svelte.dev/tutorial/basics).
## Typescript
Typescript is a superset of Javascript. It is statically typed (strong typing enforcement like in C or C++) as opposed to the dynamically typed Javascript (what are types?). Typescript is also more object-oriented (supports interfaces for example), while Javascript is a more prototype based language.
@@ -69,55 +48,6 @@ and then run the compiled js file using `node` as such
node app.js
```
-Although, this should ideally be handled by an npm `package.json` script as in this project.
-
-**package.json**
-```js
-{
- "name": "typescript-project",
- "version": "1.0.0",
- "main": "app.js",
- "devDependencies": {
- "typescript": "^4.7.2"
- },
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "start": "node out/app.js",
- "prestart": "npm run build",
- "build": "tsc"
- }
-}
-```
-**tsconfig.json**
-```js
-{
- "compilerOptions": {
- "outDir": "./out",
- "rootDir": "./src",
- "sourceMap": true,
- "moduleResolution": "node",
- "target": "es6"
- }
-}
-```
-
-The above would be a standalone typescript project.
-```
-typescript-project
-|-node_modules/
-|-out/
- |-app.js
- |-app.js.map
-|-src/
- |-app.ts
-|-package.json
-|-package-lock.json
-|-tsconfig.json
-```
-If we were to use Svelte (as in this project), then
-the `package.json` script would use `rollup` instead
-of `node`.
-
## Tailwind
This project began by mainly utilizing the Svelte UI library named [Svelte Material UI](https://sveltematerialui.com/). As this is the first time I am working with professional-level web development tools (other than a not-so-elegant React project), I began looking into web development philosophy and methodologies. I came across a popular tool named Tailwind that is used by global companies like Github, Netflix, Heroku, Kickstarter, Twitch, and Segment.
@@ -130,4 +60,4 @@ Tailwind's utility-first fundamentals favor inline CSS in HTML files over mainta
Although it may feel like basically inline css but with shorter text, Tailwind's utility classes provide advantages over inline styles such as
- Designing with constraints: The predefined design system makes it easier to build visually consistent UI
- Responsive design: `@media` breakpoints can easily be factored in through the `sm`, `md`, `lg`, `xl`, and `2xl` prefixes
-- Hover, focus, and other states: Inline styles cannot target states like hover or focus, while Tailwind's state variants make it easy through prefixes. \ No newline at end of file
+- Hover, focus, and other states: Inline styles cannot target states like hover or focus, while Tailwind's state variants make it easy through prefixes.