Update README #1

Merged
bloodwiing merged 6 commits from readme-update into main 2025-05-11 19:20:52 +00:00
Showing only changes of commit 730b7f9992 - Show all commits

View File

@ -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)