A simple SvelteKit CRUD web app that interacts with a NestJS backend.
When working on the little BoredApesTransfers project I created last Friday, I got very excited about Svelte. So much that I quite literally spent my whole Sunday afternoon watching talks from Rich Harris (creator of Svelte) explaining to audiences how JavaScript frameworks like React are not so "reactive". My favourite ones were:
- Rich Harris: Futuristic Web Development
- The Return of 'Write Less, Do More' by Rich Harris | JSCAMP 2019
- Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes
I could list much more but that's pretty much what happens when you dive deep into such a rabbit hole! π
Therefore, to get some more practice (and to try the NestJS node framework), I decided to build this simple "Todo" style CRUD web app.
preview.mp4
- I learned about the
__layout.svelte
file which makes it easy to create a consistent layout across pages. - I discovered the
<slot/>
tag which is pretty much the equivalent of{children}
in React. - As I tried to color the GitHub SVG icon in the navbar, I discovered that I could use the text color as long as I set the svg
fill="currentColor"
prop. - Learned the general structure of a NestJS project.
- Learned about the ValidationPipe in NestJS and how to automatically enforce DTO format with the
class-validator
decorators. - Did not get to use them much but learned how to emit and listen to NestJS events.
- Practiced my DevOps skills by dockerizing the application to ease development (i.e. Postgres DB running in Docker) and make it easier to run the production app locally.
- Learned about Cypress E2E testing and how to use the desktop app to run end-to-end tests. More specifically:
- How to use aliases, wait for requests to complete, wait for text to appear in the app, etc.
- How to leverage tasks to trigger actions like resetting the DB between each test.
- How to use a generic data tag (i.e data-cy) to avoid using classes or IDs for targeting elements in a page.
- Docker (recommended)
- Node v16 or above
- NPM
First, clone the repository with the following command:
git clone git@github.com:vcheeney/TriTrainingLog.git
To run everything in one go:
cp .env.example .env
docker-compose -f docker-compose.yml -f dc.backend.yml -f dc.frontend.yml up
If you prefer to run the complete development setup, do the following.
In one terminal, start the database:
cp .env.example .env
docker-compose -f docker-compose.yml up
In another terminal, run the backend:
cd backend
cp .env.example .env
npx prisma migrate dev
npm run start:dev
In another terminal, run the frontend:
cd frontend
cp .env.example .env
npm run dev
- TypeScript 4.6.2 - JavaScript superset
- Svelte - Frontend compiler
- SvelteKit - Web app framework
- TailwindCSS 3.0.23 - Utility-based CSS framework
- NestJS 8.1.1 - Progressive Node.js framework
In order to run the tests, first make sure that the application is started. You can follow the steps in the Setup section to do so.
Then, open Cypress and select the test you want to run! π
cd frontend
npx cypress open