Project
Main Stack
- Trpc https://trpc.io (End-to-end typesafe APIs made easy)
- Express https://expressjs.com (Fast, unopinionated, minimalist web framework for Node.js)
- React https://reactjs.org (A JavaScript library for building user interfaces)
Other Libraries
- Bcrypt https://www.npmjs.com/package/bcrypt (A JavaScript library for hashing passwords)
- JWT https://jwt.io (JSON Web Tokens for authentication)
- NPM https://www.npmjs.com (Node Package Manager for managing dependencies)
- Playwright https://playwright.dev (Test your web apps headlessly with a single API)
- Tailwind CSS https://tailwindcss.com (A utility-first CSS framework for rapid UI development)
- TypeScript https://www.typescriptlang.org (TypeScript is a typed superset of JavaScript)
- Vite https://vitejs.dev (Next generation frontend tooling. It's fast!)
- ZOD https://zod.dev (TypeScript-first schema validation with static type inference)
Features
- Authentication with JWT and HttpOnly cookies (https://owasp.org/www-community/HttpOnly)
- Example of pulling data from an external REST API
- Beers and Users (https://random-data-api.com)
- Facts (https://catfact.ninja)
- Movies (https://dummyapi.online)
- Employees (https://dummy.restapiexample.com)
- Albums and Photos (https://jsonplaceholder.typicode.com)
- Store the user's details in the React context when logged in (https://react.dev/reference/react/useContext)
- Health Check for the server (http://localhost:2022/health)
- Select the number of rows to display in the table
Installation
In the root directory (it will run the client and the server automatically). Run:
npm i
npm run dev
Try editing the ts files to see the type checking in action, thanks to Trpc :)
Building for production
- Make sure to rename the file (https://github.com/alan345/TER/blob/main/server/env.ts)
env.tsto.env - Update the key
- Use dotenv (https://www.dotenv.org)
- Run:
npm run build
npm run start
Printscreens
Main Screen
Health Check for the server (http://localhost:2022/health)
Motivation
Focusing on developer experience: simple, efficient, and fast. This modern stack uses top-tier libraries to build a full-stack web application. Unlike the T3 app (https://create.t3.gg), we opted not to use Next.js, allowing the frontend to remain as static files, easily stored in cloud object storage like AWS S3. Consequently, this stack is designed for building web apps rather than traditional websites, as it is not SEO-friendly.
End-to-end typesafe with Trpc
Video from https://trpc.io
E2E Testing
The tests must be run while the app is running.
Running the tests in the Terminal
npm run test:e2e