A modern, production-ready SaaS starter template for building full-stack React applications using React Router v7, Convex, Clerk, and Polar.sh. Ready for Vercel deployment with built-in AI chat capabilities.
- 🚀 React Router v7 - Modern full-stack React framework with SSR
- ⚡️ Hot Module Replacement (HMR) - Fast development experience
- 📦 Asset bundling and optimization - Production-ready builds
- 🔄 Data loading and mutations - Built-in loader/action patterns
- 🔒 TypeScript by default - Type safety throughout
- 🎨 TailwindCSS v4 - Modern utility-first CSS
- 🔐 Authentication with Clerk - Complete user management
- 💳 Subscription management with Polar.sh - Billing and payments
- 🗄️ Real-time database with Convex - Serverless backend
- 🤖 AI Chat Integration - OpenAI-powered chat functionality
- 📊 Interactive Dashboard - User management and analytics
- 🎯 Webhook handling - Payment and subscription events
- 📱 Responsive Design - Mobile-first approach
- 🚢 Vercel Deployment Ready - One-click deployment
- React Router v7 - Full-stack React framework
- TailwindCSS v4 - Utility-first CSS framework
- shadcn/ui - Modern component library with Radix UI
- Lucide React & Tabler Icons - Beautiful icon libraries
- Recharts - Data visualization
- Motion - Smooth animations
- Convex - Real-time database and serverless functions
- Clerk - Authentication and user management
- Polar.sh - Subscription billing and payments
- OpenAI - AI chat capabilities
- Vite - Fast build tool
- TypeScript - Type safety
- Vercel - Deployment platform
- Node.js 18+
- Clerk account for authentication
- Convex account for database
- Polar.sh account for subscriptions
- OpenAI API key (for AI chat features)
- Clone the repository and install dependencies:
npm install- Copy the environment file and configure your credentials:
cp .env.example .env.local- Set up your environment variables in
.env.local:
# Convex Configuration
CONVEX_DEPLOYMENT=your_convex_deployment_here
VITE_CONVEX_URL=your_convex_url_here
# Clerk Authentication
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key_here
CLERK_SECRET_KEY=your_clerk_secret_key_here
# Polar.sh Configuration
POLAR_ACCESS_TOKEN=your_polar_access_token_here
POLAR_ORGANIZATION_ID=your_polar_organization_id_here
POLAR_WEBHOOK_SECRET=your_polar_webhook_secret_here
# OpenAI Configuration (for AI chat)
OPENAI_API_KEY=your_openai_api_key_here
# Frontend URL for redirects
FRONTEND_URL=http://localhost:5173- Initialize Convex:
npx convex dev- Set up your Polar.sh webhook endpoint:
- URL:
{your_domain}/webhook/polar - Events: All subscription events
- URL:
Start the development server with HMR:
npm run devYour application will be available at http://localhost:5173.
Create a production build:
npm run buildThis starter kit is optimized for Vercel deployment with the @vercel/react-router preset:
- Connect your repository to Vercel
- Set environment variables in Vercel dashboard
- Deploy automatically on push to main branch
The react-router.config.ts includes the Vercel preset for seamless deployment.
To build and run using Docker:
docker build -t my-app .
# Run the container
docker run -p 3000:3000 my-appThe containerized application can be deployed to any platform that supports Docker:
- AWS ECS
- Google Cloud Run
- Azure Container Apps
- Digital Ocean App Platform
- Fly.io
- Railway
If you're familiar with deploying Node applications, the built-in app server is production-ready.
Make sure to deploy the output of npm run build
├── package.json
├── package-lock.json
├── build/
│ ├── client/ # Static assets
│ └── server/ # Server-side code
/- Homepage with pricing/pricing- Dynamic pricing page/dashboard- Protected user dashboard/dashboard/chat- AI-powered chat interface/dashboard/settings- User settings/success- Subscription success page/webhook/polar- Polar.sh webhook handler
- Protected routes with Clerk authentication
- Server-side user data loading with loaders
- Automatic user synchronization
- Dynamic pricing cards fetched from Polar.sh
- Secure checkout flow with redirect handling
- Real-time subscription status updates
- Customer portal for subscription management
- Webhook handling for payment events
- Interactive sidebar navigation
- Real-time data updates
- User profile management
- AI chat functionality
- Subscription status display
- OpenAI-powered conversations
- Real-time message streaming
- Chat history persistence
- Responsive chat interface
CONVEX_DEPLOYMENT- Your Convex deployment URLVITE_CONVEX_URL- Your Convex client URLVITE_CLERK_PUBLISHABLE_KEY- Clerk publishable keyCLERK_SECRET_KEY- Clerk secret keyPOLAR_ACCESS_TOKEN- Polar.sh API access tokenPOLAR_ORGANIZATION_ID- Your Polar.sh organization IDPOLAR_WEBHOOK_SECRET- Polar.sh webhook secretOPENAI_API_KEY- OpenAI API key for chat featuresFRONTEND_URL- Your production frontend URL
├── app/
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── homepage/ # Homepage sections
│ │ └── dashboard/ # Dashboard components
│ ├── routes/ # React Router routes
│ └── utils/ # Utility functions
├── convex/ # Convex backend functions
├── public/ # Static assets
└── docs/ # Documentation
react&react-domv19 - Latest Reactreact-routerv7 - Full-stack React framework@clerk/react-router- Authenticationconvex- Real-time database@polar-sh/sdk- Subscription management@ai-sdk/openai&ai- AI chat capabilities@vercel/react-router- Vercel deploymenttailwindcssv4 - Styling@radix-ui/*- UI primitives
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run typecheck- Run TypeScript checks
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
This project is licensed under the MIT License.
Stop rebuilding the same foundation over and over. RSK eliminates months of integration work by providing a complete, production-ready SaaS template with authentication, payments, AI chat, and real-time data working seamlessly out of the box.
Built with ❤️ using React Router v7, Convex, Clerk, Polar.sh, and OpenAI.
