A modern, full-stack React application showcasing the power and benefits of TanStack Start. This project serves as both a comprehensive demo and a template for building type-safe, server-rendered React applications.
This project integrates with tools developers know and love:
- TanStack Start - Full-stack React framework with SSR and type-safe APIs
- TanStack Query - Powerful data synchronization for React
- Supabase - PostgreSQL database
- Better Auth - Secure, type-safe authentication
- Base UI - Accessible component primitives
- Tailwind CSS - Utility-first CSS framework
- Drizzle ORM - Type-safe SQL toolkit
- TypeScript - Type safety throughout the stack
- 🔐 Authentication - Secure user authentication with Better Auth
- 📝 Post Management - Create, view, and manage feedback posts
- 💬 Comments - Comment on feedback posts
- 👍 Upvoting - Community-driven content curation
- 🏆 Leaderboard - Gamified user engagement tracking
- 🎨 Modern UI - Beautiful, accessible interface with Base UI and Tailwind
- 🔒 Type-Safe - End-to-end type safety from database to UI
- Node.js 18+
- PostgreSQL database (Supabase recommended)
- Package manager (npm, yarn, pnpm, or bun)
- Clone the repository:
git clone https://github.com/ValenCassa/tanstack-template
cd tanstack-template- Install dependencies:
npm install- Create a
.envfile in the root directory:
# Database
DATABASE_URL=your_database_url
DATABASE_SESSION_POOLER=your_supabase_connection_string
# Better Auth
BETTER_AUTH_SECRET=your_auth_secret_key
BETTER_AUTH_URL=http://localhost:5173
# OAuth Providers
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret- Run database migrations:
npm run db:push- (Optional) Seed the database with sample data:
npm run db:seedStart the development server:
npm run devThe application will be available at http://localhost:5173.
npm run dev- Start development servernpm run build- Build for productionnpm run db:push- Push schema changes to databasenpm run db:studio- Open Drizzle Studio for database managementnpm run db:seed- Seed database with sample data
- Connect your repository to Vercel
- Configure environment variables in Vercel dashboard
- Deploy with automatic builds on push
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is open source and available under the MIT License.