Trpc Express React

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

• Bcrypt - A JavaScript library for hashing passwords
• JWT - JSON Web Tokens for authentication
• NPM - Node Package Manager for managing dependencies
• Playwright - Test your web apps headlessly with a single API
• Tailwind CSS - A utility-first CSS framework for rapid UI development
• TypeScript - TypeScript is a typed superset of JavaScript
• Vite - Next generation frontend tooling. It's fast!
• ZOD - 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
  • Facts
  • Movies
  • Employees
  • Albums and Photos
• Store the user's details in the React context when logged in (https://react.dev/reference/react/useContext)
• Health Check for the server (https://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 :)

• Rename the file (https://github.com/alan345/TER/blob/main/server/env.ts) env.ts to .env
• Update the key using dotenv (https://www.dotenv.org)

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

• Need a database? Check out PostgreSQL
• Need an ORM? Check out Drizzle
• Need a component library? Check out Chakra UI
• Need icons? Check out Tabler Icons

• Nachonacho.com - The world's largest marketplace for Software & Services

Create a PR if you want to add your project here.