README.md

Flashcards

Flashcards is a basic full stack TypeScript application which allows users to manage and learn flashcards. It consists of a NestJS server and a React client. This Repository is managed using the Nx build system.

Quickstart

• Install Git, Docker (or Podman) and Node 16 LTS
• Clone this repo: git clone git@github.com:cravay/flashcards.git
• Install dependencies: npm install
• Create .env file: cp .env.example .env (copy on Windows)
• Start Postgres database: docker compose -p flashcards -f docker-compose.dev.yml up -d
• Apply database migrations: npx prisma migrate dev
• Run seed script: npx prisma db seed
• Start everything: npm start

The following apps will be started:

• Client: http://localhost:4200
• Server: http://localhost:3333 (Swagger-UI: http://localhost:3333/api)

Commonly used scripts

• Start: npm start
• Test: npm test
• Lint: npm run lint
• Build: npm run build

Project Structure

flashcards/
├─ apps/
│  ├─ client/ <-- The React client app
│  ├─ server/ <-- The NestJS server app
├─ libs/
│  ├─ shared/ <-- Types and utility functions shared between apps
├─ prisma/
   ├─ schema.prisma <-- Database schema
   ├─ migrations/ <-- Database migrations

Also see npx nx dep-graph.

Database

Data is persisted in a PostgreSQL Database which is accessed and managed using the Primsa ORM. The data in the database can be viewed using Prisma studio: npx prisma studio.

Continuous Integration / Deployment

Every time a commit is pushed to the main branch, this project gets linted, tested and built using the GitHub Action defined in ci.yml. All the outputs get cached using Nx Cloud (in this organization) and builds get pushed to the client-build branch and the server-build branch.

The project gets deployed to the render cloud. Every time a build is pushed to a build branch it gets automatically deployed. The following services have been manually created:

• Static Site: https://flashcards-7vuj.onrender.com/
• Node Web Service: https://flashcards-server.onrender.com/
• PostgreSQL Database

Tree-Shaking issues

Due to the bug nrwl/nx#9717 tree-shaking currently doesn't work for client builds. For some reason unknown to me, the side effects optimization of webpack got disabled for Nx 12. There's a PR to reenable it, but until that gets merged the side effects optimization can get manually re-enabled like this (This reduces the bundle size by over 90%):

sed --in-place s/sideEffects:\ false/sideEffects:\ true/ node_modules/\@nrwl/web/src/utils/config.js

The bundle of a client build can get analyzed using source-map-explorer like this:

nx build client --source-map
npx source-map-explorer dist/apps/client/main.*.js

Relevant documentation

• https://www.typescriptlang.org/docs/
• https://nx.dev/getting-started/intro
• https://docs.nestjs.com/
• https://www.prisma.io/docs/
• https://github.com/colinhacks/zod / https://colinhacks.com/essays/zod
• https://reactjs.org/docs/getting-started.html
• https://redux-toolkit.js.org/usage/usage-guide
• https://mantine.dev/getting-started/
• https://reactrouter.com/docs/en/v6

License

MIT