Trpc Express React

• Trpc https://trpc.io (End-to-end typesafe APIs made easy)
• Express https://expressjs.com (Fast, unopinionated, minimalist web framework for node)
• React https://reactjs.org (A JavaScript library for building user interfaces)

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

• 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

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 :)

• Make sure to rename the file (https://github.com/alan345/TER/blob/main/server/env.ts) env.ts to .env
• Update the key
• Use dotenv (https://www.dotenv.org)
• Run:

npm run build
npm run start

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.

Video from https://trpc.io

The tests must be run while the app is running.

npm run test:e2e