Educational repo implementing tests for different FE libs

• This is 2. part of the educational materials for testing FE libraries
• 1. part with simpler unit tests is here

In this project you will find implemented TODO application in 3 different FE libraries:

•    React - implemented in ./packages/react
•    Vue - implemented in ./packages/vue
•    Svelte - implemented in ./packages/svelte

and also backend in   NestJS that resides in ./packages/be.

There is also some shared code located inside ./packages/shared-code that all packages above are using.

Features

All code is written using TypeScript and manages using npm workspaces.

• All apps have configured ESLint, Prettier and tests (main focus is on FE apps)
• Git Hooks features using Husky
• There are also configured some GitHub workflows

Features of all 3 frontend apps

• User can add/complete/delete TODO
• Apps use TanStack Query for data fetching/mutation
• Apps have light/dark mode using Tailwind
• Apps are managed using Vite
  • App were created based on Vite templates: npm create vite@latest <app-name> --template {react|vue|svelte}-ts

Testing

• Unit and integration tests are written using Testing Library (Jest style assertions)
  • APIs are mocked using mswjs node server
• E2E tests are written using Cypress
  • APIs are mocked using Cypress intercept

Features of the backend app

• There is an API for CRUD operations for TODOs
• TODOs are store inside PostgreSQL and data are managed using TypeORM
  • There can be easily generated migrations based on changes to entities schema using npm commands
• API endpoints are validated using DTOs classes with class-validators and class-transformers
• ENVs are type safe and validated using Zod

Running apps

1. Run npm install in the root (no need to run install in packages)
   • Note that BE app requires connection to the database, see README for BE for more details
2. Then run npm run dev in the BE application and also in one of the FE app

---

🏆 Challenge

Read assignment description and improve your coding and testing skills!