Trpc Express React

Boilerplate for a Fullstack App with authentication

Project

Main Stack

• 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

Preview

Other Libraries

• Bcrypt - A JavaScript library for hashing passwords
• Drizzle - A TypeScript-first ORM for Node.js
• JWT - JSON Web Tokens for authentication
• NPM Workspace Workspaces for managing multiple packages in a single repository
• Phosphor Icons - A flexible icon family for interfaces, diagrams, presentations — whatever, really
• Playwright - Test your web apps headlessly with a single API
• Postgres - The world's most advanced open source database
• 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

Features

• HttpOnly cookies for Authentication (Signup, login, and logout)
• Beers from random-data-api.com Example of pulling data from externals REST API
• React context is used to store the user's details when logged in
• Health Check for the server (http://localhost:2022/health)
• Search with Debounce Using a Custom Hook

Installation

• Update the server .env file and the client .env file with your credentials
• Update the .gitignore file by uncommenting # .env to ensure your credentials remain private and are not exposed.
• Make sure Postgres is running and create a new database called ter

psql -U user // replace user by your postgres user
CREATE DATABASE ter;

• Run in the terminal In the root directory:

// Install the dependencies
npm i

// Setup the database
npm run push

// Seed the database
npm run seed

// Run the app (it will run the client and the server automatically)
npm run dev

Building for production

npm run build
npm run start

Printscreens

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

Other recommendations

• Need a component library? Check out Chakra UI
• If your stack is getting more and more shared workspaces, consider using pnpm instead of npm

Who is using TER?

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

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

Miscellaneous

Discover the details of this project in this Medium post

_{A "TER" in France stands for "Train Express Régional." It's a regional rail network that provides a vital service connecting smaller towns and cities across various regions to larger urban centers. Managed by SNCF, the French national railway company, TERs are often used for commuting to work, school, or for regional travel, offering an efficient and environmentally friendly alternative to driving. The trains vary in frequency and speed, depending on the region and the distances they cover.}