Fullstack SaaS Boilerplate
Built with Fastify, tRPC, and React.
Project
Demo
Hosted by render.com for free
As it is a free tier, this Demo will spin down with inactivity, which can delay requests by 50 seconds or more. Be patient!
Preview
Main Stack
| Technology | Description | Stars |
|---|---|---|
| Drizzle | A TypeScript-first ORM for Node.js |  |
| Fastify | Fast, unopinionated, minimalist web framework for Node.js |  |
| Postgres | The world’s most advanced open source database |  |
| React 19 | A JavaScript library for building user interfaces |  |
| Tailwind v4 | A utility-first CSS framework for rapid UI development |  |
| tRPC | End-to-end typesafe APIs made easy |  |
Other dependencies
| Technology | Description | Stars |
|---|---|---|
| Better Auth | Authentication library for Node.js |  |
| Phosphor Icons | Beautifully simple & consistent icons |  |
| npm Workspace | Workspaces for managing multiple packages in a single repository |  |
| Playwright | Test your web apps headlessly with a single API |  |
| React Router v7 | Declarative routing for React |  |
| 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 |  |
| Zustand | Bear necessities for state management in React |  |
Features
- Beers from random-data-api.com Example of pulling data from externals REST API
- Health Check for the server (http://localhost:2022/health.trpc) and (http://localhost:2022)
- Search with Debounce Using a Custom Hook
- Chat with Server-Sent Events (SSE). SSE is easier to setup and don’t require setting up a WebSocket server.
Installation
- Update the server
server.envfile and the clientclient.envfile with your credentials - Make sure Postgres is running and create a new database called
fsb
psql -U user // replace user by your postgres user
CREATE DATABASE fsb;
- 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
- Update the
.gitignorefile by uncommenting# .envto ensure your credentials remain private and are not exposed.
npm run build
npm run start
Printscreens
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 should be executed while the application is running.
Running the tests in the Terminal
npm run test
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.
How can you help?
This project is free and open source. If you found it useful, consider giving it a star ⭐ or sponsoring me 💖 — it really helps! I’m always open to feedback, so feel free to share suggestions to improve the stack. You’re also welcome to contribute by opening a pull request 🚀.