vcheeney / TriTrainingLog

🚴‍♂️ SvelteKit/NestJS CRUD Web App

TriTrainingLog

A simple SvelteKit CRUD web app that interacts with a NestJS backend.

Table of contents

• ☀ Introduction
• 📹 Preview
• 💭 What I learned
• 💿 Setup
  • Prerequisites
  • Get started
    • Run in production
    • Run in development
• 🛠 Technologies Used
• 🧪 Tests

☀ Introduction

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

preview.mp4

💭 What I learned

• 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.

💿 Setup

Prerequisites

• Docker (recommended)
• Node v16 or above
• NPM

Get started

First, clone the repository with the following command:

git clone [e-mail]:vcheeney/TriTrainingLog.git

Run in production

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

Run in development

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

🛠 Technologies Used

• 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

🧪 Tests

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

🔗 Check out my other projects on my GitHub profile