Fastify-React Boilerplate

Simple starter kit which just works

🚀 Features

Fastify: High-performance backend framework with a plugin-based architecture
React 18: Latest version of React for building dynamic user interfaces
TypeScript: Strong typing for both frontend and backend
Vite: Next-generation frontend tooling for rapid development
Turbo: Efficient monorepo management and task running
tRPC: End-to-end typesafe APIs for seamless client-server communication
Ant Design: Comprehensive UI component library for React
Zustand: Lightweight state management for React
Orchid ORM: Lightweight ORM for PostgreSQL
zod: TypeScript-first schema validation
PostHog: Open-source product analytics
Microsoft Clarity: User behavior analytics tool

📦 Project Structure

fastify-react-starter/
├── apps/
│   ├── api/         # Fastify backend
│   └── pwa/         # React frontend
├── packages/        # Shared utilities and configurations
├── turbo.json       # Turbo configuration
└── package.json     # Root package.json

🛠️ Getting Started

Run this command to get started

git clone https://github.com/teziapp/fastify-react-starter.git
cd fastify-react-starter
pnpm i

-> Run this to setup

pnpm run setup

OR manually

Set up environment variables:

Create .env files at the root and in the api directory:

Root .env[.env]:

ENVIRONMENT='dev'
FRONTEND_URL=http://localhost:5173
VITE_BE_URL=http://localhost:3000
VITE_POSTHOG_KEY=your_posthog_key
VITE_CLARITY_ID=your_clarity_id

(api/.env)[/api/.env]:

ENVIRONMENT='dev'
DB_URL=postgres://postgres:postgres@localhost:5432/boilerplate
DB_TEST_URL=postgres://postgres:postgres@localhost:5432/boilerplate
FRONTEND_URL=http://localhost:5173
VITE_BE_URL=http://localhost:3000
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
JWT_SECRET=your_jwt_secret
AXIOM_DATASET=your_axiom_dataset
AXIOM_TOKEN=your_axiom_token

Set up the database:

pnpm run db create
pnpm run db migrate up

Start the development server:
```
pnpm run dev
```
Build for production:
```
pnpm run build
```

📜 Available Scripts

pnpm run dev: Start development servers for both backend and frontend
pnpm run build: Build both applications for production
pnpm run lint: Run ESLint across the project
pnpm run db: Manage database operations (create, migrate, etc.)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Todos:

Backend

[ ] Figure out how to get & use secure-session https://www.npmjs.com/package/@fastify/secure-session [ ] Implement rate limiting. [ ] Logs transport to FileSystem / Database. [ ] Add swagger docs. [ ] Add initiation migration file to apply following to db [ ] RLS for proper multi-tenancy security [ ] Database timezone setup. [ ] Check if present user has all access like dropping tables, etc... dont load the app. [ ] Check & Force backend for proper timezone. (On both server & database) [x] Logs transport to FileSystem / Database. (Added Axiom integration)

Frontend

[ ] Option to make Form persistent on page-reloads. [ ] Make it PWA. [x] Add event tracking (Added PostHog and Microsoft Clarity)

Common

[ ] Push Notifications [ ] Testing [ ] Auto version on commits. [ ] Feature flags. [ ] A/B Testing. [ ] Github Actions for CI/CD. [ ] Obersavability & Monitoring. [x] Obersavability & Monitoring. (Partially implemented with Axiom, PostHog, and Clarity)

Examples for reference:

nr db g migration_name