engineer_thesis_svelte

       

Pre-requisites

• Node.js (v16.16.0 or higher)
• pnpm (v6.14.0 or higher)

Tools, libraries, frameworks

• svelte
• svelte-router-spa - client side routing
• axios - http client
• @tanstack/svelte-query - data fetching, caching, and state management
• bootstrap, sveltestrap - UI components, mostly css styles
• svelte-paginate - ready to use pagination component
• svelte-select - advanced select component
• svelte-toasts - toast notifications
• bytemd + plugins, highlight.js - Markdown editor/viewer
• vitest, @testing-library/svelte - unit testing
• playwright, @playwright/experimental-ct-svelte - e2e and components testing
• msw - mocking http requests
• ...

Setup

Make sure you have the pre-requisites installed.

Environment variables

Create a .env file in the root directory of the project and add the following variables:

VITE_BACKEND_URL=http://localhost:8000/api

Running the application

Install dependencies

pnpm install

Run development server

pnpm dev

Testing

Vitest unit tests

pnpm test

Code coverage

pnpm coverage

Playwright e2e testing

pnpm exec playwright test

Playwright components testing

pnpm run test-ct

Building

Building static files

pnpm build

Deployment

This application has been deploy to Vercel.

Launching the application

Go to Vercel and create a new project. Connect it to your GitHub repository and deploy it.

Environment variables

Go to settings and add the following variables:

VITE_BACKEND_URL=https://engineer-thesis-api.fly.dev/api

TODO:

• Profile page (followers, followees, favorite posts, created posts)
• Better errors in toasts
• Loading states (skeletons)
• Better UI