Full-Stack SaaS Boilerplate

A modern, production-ready SaaS boilerplate with authentication, database integration, and a beautiful UI. Built with React, TypeScript, and Supabase.

Tech Stack

Frontend

• React 18 with TypeScript
• Vite for fast development and building
• TanStack Query for data fetching and caching
• Shadcn UI components with Tailwind CSS
• Wouter for lightweight routing

Backend

• Node.js with Express
• Prisma ORM for database operations
• Passport.js for authentication
• Supabase integration ready for production

Development Tools

• TypeScript for type safety
• ESLint & Prettier for code quality
• React Hook Form for form handling
• Zod for schema validation

Quick Start

1. Clone this template
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Development Mode

By default, the application uses in-memory storage (MemStorage) for development, which means:

• No database setup required
• Data persists only during runtime
• Perfect for rapid development and testing
• Authentication works out of the box

Production Setup

Switching to Supabase

The project comes with Supabase integration ready. To switch from MemStorage to Supabase:

1. Create a Supabase project at supabase.com

2. Set the following environment variables:

   SUPABASE_URL=your_supabase_url
   SUPABASE_ANON_KEY=your_supabase_anon_key
   USE_SUPABASE=true
   

3. In server/storage.ts, update the storage export:

   // Comment out MemStorage
   // export const storage = new MemStorage();
   
   // Use Supabase Storage
   export const storage = new SupabaseStorage();

Features Ready for Production

• User authentication (login/register)
• Session management
• Real-time PostgreSQL database
• Type-safe database operations
• Production-ready UI components

Authentication

The boilerplate includes a complete authentication system:

• User registration and login
• Protected routes
• Session management
• Password hashing
• Remember me functionality

File Structure

├── client/              # Frontend React application
│   ├── src/
│   │   ├── components/  # Reusable UI components
│   │   ├── hooks/       # Custom React hooks
│   │   ├── lib/         # Utility functions
│   │   └── pages/       # Page components
├── server/              # Backend Express application
│   ├── auth.ts         # Authentication setup
│   ├── storage.ts      # Storage implementations
│   └── routes.ts       # API routes
└── shared/             # Shared types and schemas
    └── schema.ts       # Database schema

Development Guidelines

Adding New Features

1. Define types in shared/schema.ts
2. Implement backend routes in server/routes.ts
3. Add frontend components in client/src/components
4. Create new pages in client/src/pages

Database Operations

• Development: Uses MemStorage (in-memory)
• Production: Uses Supabase (PostgreSQL)
• Easy switching between storage implementations

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run check - TypeScript type checking

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT