Welcome to Next.js Full-Stack Starter Kit

A comprehensive, production-ready Next.js boilerplate with authentication, payments, database, admin dashboard, blog system, and much more.

What's Included

This starter kit provides everything you need to build a modern SaaS application:

🔐 Authentication & Authorization

• Better Auth integration with email/password and OAuth support
• Role-based access control (RBAC) with User and Admin roles
• Email verification and password reset flows
• Secure session management

💳 Payments & Subscriptions

• Stripe integration for subscription billing
• Pre-configured pricing plans
• Customer portal and billing management
• Webhook handling for automated subscription updates

📝 Content Management

• Full-featured blog system with rich text editing (TipTap)
• AI-powered writing assistant with multiple models
• Post translation capabilities
• Categories, tags, and SEO optimization
• Changelog management
• FAQ system

📧 Email System

• Multiple provider support (Nodemailer, Resend, SendGrid, Mailgun)
• Customizable email templates
• Visual template editor with Monaco
• Transactional emails for auth flows

🎨 Modern UI/UX

• shadcn/ui components with Radix UI primitives
• Tailwind CSS v4 for styling
• Dark mode support with next-themes
• Responsive design
• Beautiful animations with Motion/GSAP

🗄️ Database & ORM

• Drizzle ORM with PostgreSQL
• Type-safe database queries
• Migration system
• Support for Neon, Supabase, or self-hosted databases

📤 File Uploads

• UploadThing integration
• Secure, authenticated uploads
• Image optimization
• User tracking and audit logs

🛡️ Security

• XSS protection with DOMPurify
• Rate limiting on sensitive endpoints
• Security headers (HSTS, CSP, X-Frame-Options)
• File upload security
• Security audit logging system

📊 Admin Dashboard

• User management and role assignment
• Blog post management
• Email template editor
• Subscription plan configuration
• Contact form submissions
• Security audit logs
• Marketing controls
• Waitlist management

🧪 Testing

• E2E testing with Playwright
• Pre-configured test users
• Test fixtures and utilities

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui + Radix UI
• Database: PostgreSQL + Drizzle ORM
• Authentication: Better Auth
• Payments: Stripe
• Email: Multiple providers supported
• File Uploads: UploadThing
• Rich Text: TipTap
• AI: OpenRouter (free models)
• State Management: Zustand + TanStack Query
• Forms: React Hook Form + Zod
• Testing: Playwright

Who Is This For?

This starter kit is perfect for:

• 🚀 SaaS Builders - Launch your product quickly with essential features pre-built
• 👨‍💻 Developers - Learn best practices for full-stack Next.js development
• 💼 Agencies - Start client projects with a solid foundation
• 🎓 Learners - Study a production-ready codebase with modern patterns

What Makes It Different?

✅ Production-Ready

Not just a demo - this is a battle-tested, security-hardened starter kit ready for real-world use.

✅ Comprehensive

Includes features that usually take weeks to implement: auth, payments, CMS, email system, admin dashboard, and more.

✅ Well-Documented

Every feature is documented with clear examples and explanations.

✅ Modern Stack

Uses the latest stable versions of Next.js, React, and ecosystem tools.

✅ Type-Safe

Full TypeScript coverage with strict typing for better developer experience.

✅ Extensible

Clean architecture makes it easy to add new features or customize existing ones.

Quick Start

Get up and running in under 5 minutes:

# Install dependencies
pnpm install

# Configure environment
cp .env.example .env
# Edit .env with your credentials

# Setup database and seed data
pnpm project:setup

# Start development server
pnpm dev

Visit http://localhost:3000 and start building!

Core Features

Explore the powerful features built into the starter kit:

Next Steps

Now that you're set up, here's what we recommend doing next:

1. Configure Providers: Set up your Stripe and Email credentials.
2. Customize Branding: Update the site name and logo in src/config/site.ts.
3. Explore the Schema: Check out the Database Schema to understand the data model.
4. Deploy: Follow the Deployment Guide to go live.

Support & Community

• Documentation: You're reading it! 📚
• Issues: Report bugs or request features on GitHub
• Updates: Check the changelog for new features and fixes

Ready to build something amazing? Let's get started! 🚀