notes-app-full-stack-testing

The intention is to build and deploy a very simple app (FE/BE + DB) which can be used to demonstrate tests for each layer using vitest, supertest, react-testing-library and playwright.

Starting point for building the app was the great FreeCodeCamp tutorial Full Stack Project Tutorial – Create A Notes App Using React and Node.js

Refactored the app for testability and added a few additional tweaks.

Deployed app

• FE and BE services are deployed using the free tier on render.com
• Database is deployed using serverless postgres on neon

https://notes-app-full-stack-bjml.onrender.com/

Frontend

FE Implementation

• React
• Typescript
• Axios

End to End Tests (e2e)

• Playwright.io with typescript
• Allure Production Test Report with history

Component Tests

• React Testing Library with vitest
• Mock Service Worker(msw) to mock the api
• msw/data for data store

FE Service Tests

• Service tests with docker and Playwright.io

Backend

BE Implementation

• Node.js
• Typescript
• Express
• Postgres
• Primsa (DB ORM)

BE Tests

• Service tests with docker, supertest and vitest
• Unit tests with supertest, vitest and vitest-mock-extended

Database

• Postgres with Serverless hosting on Neon