78 lines
3.0 KiB
Markdown
78 lines
3.0 KiB
Markdown
<img alt="Echo Logo" src="https://i.imgur.com/h5rCXi4.png" width="300">
|
|
|
|
A 2nd year Vilnius University Computer Science Course project.
|
|
|
|
A forum written in Svelte, powered by a PostgreSQL database.
|
|
|
|
<img alt="Echo Demo" src="https://i.imgur.com/G9Cm1co.png" width="800">
|
|
|
|
## Video
|
|
|
|
<video src="https://i.imgur.com/8kCe4MX.mp4" width="800" controls></video>
|
|
|
|
## Technical
|
|
|
|
### 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
|
|
npm run dev
|
|
|
|
# or start the server and open the app in a new browser tab
|
|
npm run dev -- --open
|
|
```
|
|
|
|
## Media
|
|
|
|
<img alt="Echo Media" src="https://i.imgur.com/9kTEhbk.png" width="400">
|
|
|
|
## Libraries
|
|
|
|
* [`@sveltejs/kit`](https://www.npmjs.com/package/@sveltejs/kit)
|
|
* [`argon2`](https://www.npmjs.com/package/argon2)
|
|
* [`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) |