Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alan345/Fullstack-SaaS-Boilerplate
Fullstack SaaS Boilerplate built with tRPC, Fastify and React
https://github.com/alan345/Fullstack-SaaS-Boilerplate
fastify react tailwind trpc typescipt
Last synced: about 4 hours ago
JSON representation
Fullstack SaaS Boilerplate built with tRPC, Fastify and React
- Host: GitHub
- URL: https://github.com/alan345/Fullstack-SaaS-Boilerplate
- Owner: alan345
- License: mit
- Created: 2018-02-27T22:35:39.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2025-01-30T20:45:24.000Z (6 days ago)
- Last Synced: 2025-01-31T16:58:10.841Z (6 days ago)
- Topics: fastify, react, tailwind, trpc, typescipt
- Language: TypeScript
- Homepage: https://alan345.github.io/Fullstack-SaaS-Boilerplate/
- Size: 3.43 MB
- Stars: 780
- Watchers: 27
- Forks: 165
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Fullstack SaaS Boilerplate
Built with Fastify, tRPC, and React.
## Project
[](https://github.com/alan345/Fullstack-SaaS-Boilerplate/issues)
[](https://github.com/alan345/Fullstack-SaaS-Boilerplate/network)
[](https://github.com/alan345/Fullstack-SaaS-Boilerplate/stargazers)
[](https://github.com/alan345/Fullstack-SaaS-Boilerplate/blob/master/LICENSE)
## Demo
###### Hosted by [render.com](http://render.com/) for free
## Preview
## Main Stack
- [Drizzle](https://orm.drizzle.team/) - A TypeScript-first ORM for Node.js
- [Fastify](https://fastify.io) - Fast, unopinionated, minimalist web framework for Node.js
- [Postgres](https://www.postgresql.org) - The world's most advanced open source database
- [React 19](https://reactjs.org) - A JavaScript library for building user interfaces
- [Tailwind v4](https://tailwindcss.com) - A utility-first CSS framework for rapid UI development
- [tRPC](https://trpc.io) - End-to-end typesafe APIs made easy
## Other dependencies
- [Bcrypt](https://www.npmjs.com/package/bcrypt) - A JavaScript library for hashing passwords
- [JWT](https://jwt.io) - JSON Web Tokens for authentication
- [NPM Workspace](https://docs.npmjs.com/cli/v10/using-npm/workspaces) Workspaces for managing multiple packages in a single repository
- [Phosphor Icons](https://phosphoricons.com) - A flexible icon family for interfaces, diagrams, presentations — whatever, really
- [Playwright](https://playwright.dev) - Test your web apps headlessly with a single API
- [React Router v7](https://reactrouter.com) - Declarative routing for React
- [TypeScript](https://www.typescriptlang.org) - TypeScript is a typed superset of JavaScript
- [ZOD](https://zod.dev) - TypeScript-first schema validation with static type inference
- [Vite](https://vitejs.dev) - Next generation frontend tooling. It's fast!
## Features
- [HttpOnly cookies](https://owasp.org/www-community/HttpOnly) for Authentication (Signup, login, and logout)
- [Beers from random-data-api.com](https://random-data-api.com) Example of pulling data from externals REST API
- [React context](https://react.dev/reference/react/useContext) 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 `server.env` [file](https://github.com/alan345/Fullstack-SaaS-Boilerplate/blob/main/server.env) and the client `client.env` [file](https://github.com/alan345/Fullstack-SaaS-Boilerplate/blob/main/client/client.env) with your credentials
- Update the `.gitignore` [file](https://github.com/alan345/Fullstack-SaaS-Boilerplate/blob/main/.gitignore) by uncommenting `# .env` to ensure your credentials remain private and are not exposed.
- Make sure Postgres is running and create a new database called `fsb`
```bash
psql -U user // replace user by your postgres user
CREATE DATABASE fsb;
```
- Run in the terminal In the root directory:
```bash
// 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
```bash
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](https://v2.chakra-ui.com/)
- If your stack is getting more and more shared workspaces, consider using [pnpm](https://pnpm.io/workspaces) instead of npm
## Who is using TER?
- [Nachonacho.com](https://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
- [Medium post](https://alan-szternberg.medium.com/create-a-full-stack-app-with-trpc-react-and-express-35ed95f0851a)
- [Dev.to post](https://dev.to/alan345/how-to-create-a-web-app-in-2024-using-a-modern-stack-react-trpc-and-express-4eac)
