Add: README.md
This commit is contained in:
parent
a03f533bd6
commit
730b7f9992
80
README.md
80
README.md
@ -1,22 +1,56 @@
|
|||||||
# create-svelte
|
<img alt="Echo Logo" src="https://i.imgur.com/h5rCXi4.png" width="300">
|
||||||
|
|
||||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
A 2nd year Vilnius University Computer Science Course project.
|
||||||
|
|
||||||
## Creating a project
|
A forum written in Svelte, powered by a PostgreSQL database.
|
||||||
|
|
||||||
If you're seeing this, you've probably already done this step. Congrats!
|
<img alt="Echo Demo" src="https://i.imgur.com/G9Cm1co.png" width="800">
|
||||||
|
|
||||||
```bash
|
## Video
|
||||||
# create a new project in the current directory
|
|
||||||
npm create svelte@latest
|
|
||||||
|
|
||||||
# create a new project in my-app
|
<video src="https://i.imgur.com/8kCe4MX.mp4" width="800" controls></video>
|
||||||
npm create svelte@latest my-app
|
|
||||||
```
|
|
||||||
|
|
||||||
## Developing
|
## Technical
|
||||||
|
|
||||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
### Backend
|
||||||
|
|
||||||
|
To abstract some data and logic behind Posts and Comments, they have a shared class called "Message", which can be seen in the below diagrams. Message is a user-posted text content that can be edited, has an author, and can be liked or disliked. Hence the abstraction. The difference of Posts and Comments is that Posts can belong to categories, and Comments need a Post to reply to (plus can optionally also reply to a Comment too).
|
||||||
|
|
||||||
|
Categories allow users to filter out posts by topic.
|
||||||
|
|
||||||
|
Additionally posts are ordered by Relevancy, which is calculated based on Engagement and Time. When Engagement is measured by Like, Dislike, Comment frequency.
|
||||||
|
|
||||||
|
Passwords are hashed via `argon2id`.
|
||||||
|
|
||||||
|
ERD and Chem Database diagrams:
|
||||||
|
|
||||||
|
<img alt="Echo ERD Diagram" src="https://i.imgur.com/TNYWcj6.png" width="800">
|
||||||
|
|
||||||
|
<img alt="Echo Chen Diagram" src="https://i.imgur.com/P5s5B6D.png" width="800">
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
|
||||||
|
The front is managed by Svelte, with individual components created to be reused under the `src/comp` folder.
|
||||||
|
|
||||||
|
CSS is preprocessed using the svelte scss/sass preprocessor. So style code is actually of the `.scss` syntax.
|
||||||
|
|
||||||
|
## .env file
|
||||||
|
|
||||||
|
This project runs off of an `.env` file ([`.example.env`](https://git.wiing.dev/bloodwiing/EchoForum/src/branch/readme-update/.example.env)), please set it up before running the project.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
First run a PostreSQL database server and update the `.env` file to reflect the means to connect to it.
|
||||||
|
|
||||||
|
Connect to the PostgreSQL database via `pgAdmin` or `psql` and run `schema.sql`, `create.sql`, `insert.sql` to create the initial data.
|
||||||
|
|
||||||
|
Run `insertp2.sql` for optional additional modifications, such as deletions.
|
||||||
|
|
||||||
|
To clear the database off of current data run `clear.sql` and to delete all created tables, functions, etc. run `drop.sql`.
|
||||||
|
|
||||||
|
## Running
|
||||||
|
|
||||||
|
Install dependencies with `npm install` (or `pnpm install` or `yarn`), then start a development server:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
@ -25,14 +59,20 @@ npm run dev
|
|||||||
npm run dev -- --open
|
npm run dev -- --open
|
||||||
```
|
```
|
||||||
|
|
||||||
## Building
|
## Media
|
||||||
|
|
||||||
To create a production version of your app:
|
<img alt="Echo Media" src="https://i.imgur.com/9kTEhbk.png" width="400">
|
||||||
|
|
||||||
```bash
|
## Libraries
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
You can preview the production build with `npm run preview`.
|
* [`@sveltejs/kit`](https://www.npmjs.com/package/@sveltejs/kit)
|
||||||
|
* [`argon2`](https://www.npmjs.com/package/argon2)
|
||||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
* [`dotenv`](https://www.npmjs.com/package/dotenv)
|
||||||
|
* [`postgres`](https://www.npmjs.com/package/postgres)
|
||||||
|
* [`sass`](https://www.npmjs.com/package/sass)
|
||||||
|
* [`ssh2`](https://www.npmjs.com/package/ssh2)
|
||||||
|
* [`svelte`](https://www.npmjs.com/package/svelte)
|
||||||
|
* [`svelte-preprocess`](https://www.npmjs.com/package/svelte-preprocess)
|
||||||
|
* [`expected-round`](https://www.npmjs.com/package/expected-round)
|
||||||
|
* [`moment`](https://www.npmjs.com/package/moment)
|
||||||
|
* [`seedrandom`](https://www.npmjs.com/package/seedrandom)
|
||||||
Loading…
x
Reference in New Issue
Block a user