VIBE CODING TEMPLATE by llm_san

✅ Follow me on Twitter

✅ If you like this project, consider sponsoring me

A modern, full-stack Next.js application template built for rapid development and scalability. This template provides a complete foundation for building SaaS applications with authentication, payments, and analytics.

✨ Features

• 🎨 Modern UI: Built with Next.js 15, React 19, TypeScript, and Tailwind CSS
• 🔐 Authentication: Complete auth system with Clerk
• 💳 Payments: Stripe integration with subscription management
• 📊 Analytics: PostHog integration for user tracking
• 🤖 AI Ready: OpenAI integration setup
• 🗄️ Database: PostgreSQL with Supabase and Drizzle ORM
• 📱 Responsive: Mobile-first design with clean UI components
• 🔧 Developer Experience: ESLint, Prettier, TypeScript, and comprehensive tooling

🚀 Tech Stack

Frontend

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS + Shadcn/UI components
• UI Library: Radix UI primitives
• Animations: Framer Motion

Backend

• Database: PostgreSQL with Supabase
• ORM: Drizzle with type-safe queries
• API: Next.js Server Actions
• File Upload: Built-in support

Services

• Authentication: Clerk (social logins, user management)
• Payments: Stripe (subscriptions, one-time payments)
• Analytics: PostHog (user tracking, feature flags)
• AI: OpenAI API integration

Development

• Package Manager: Yarn (required)
• Node.js: v20.12.2 (see .nvmrc)
• Linting: ESLint + Prettier
• Git Hooks: Husky for pre-commit checks

📋 Prerequisites

Before getting started, you'll need accounts for these services (all have free tiers):

• GitHub - Code repository
• Supabase - Database hosting
• Clerk - Authentication
• Stripe - Payments
• PostHog - Analytics
• Vercel - Deployment (recommended)

🛠️ Environment Variables

Create a .env.local file in your project root:

# Database (Supabase)
DATABASE_URL=your_supabase_connection_string

# Authentication (Clerk)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/login
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/signup
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

# Payments (Stripe)
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
NEXT_PUBLIC_STRIPE_PORTAL_LINK=your_stripe_portal_link
NEXT_PUBLIC_STRIPE_PAYMENT_LINK_YEARLY=your_yearly_payment_link
NEXT_PUBLIC_STRIPE_PAYMENT_LINK_MONTHLY=your_monthly_payment_link

# Analytics (PostHog)
NEXT_PUBLIC_POSTHOG_KEY=your_posthog_project_key
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com

# AI (OpenAI) - Optional
OPENAI_API_KEY=your_openai_api_key
OPENAI_MODEL=gpt-4o-mini

🚀 Quick Start

1. Clone the repository

   git clone <your-repo-url>
   cd vibe-template

2. Set up Node.js version

   # Install and use the correct Node.js version
   nvm install 20.12.2
   nvm use 20.12.2

3. Install dependencies

   yarn install

4. Environment setup

   # Copy environment template
   cp .env.example .env.local
   # Fill in your environment variables (see section above)

5. Database setup

   # Push database schema
   yarn db:push

6. Start development server

   yarn dev

Your app will be available at http://localhost:3000

📜 Available Scripts

Development

• yarn dev - Start development server
• yarn build - Build for production
• yarn start - Start production server

Code Quality

• yarn clean - Fix linting and format code (recommended after changes)
• yarn lint - Run ESLint
• yarn lint:fix - Auto-fix linting issues
• yarn type-check - TypeScript type checking
• yarn format:write - Format code with Prettier

Database

• yarn db:push - Push schema changes to database
• yarn db:generate - Generate new migrations
• yarn db:migrate - Run pending migrations

🏗️ Project Architecture

Folder Structure

├── app/                    # Next.js App Router
│   ├── (auth)/            # Authentication pages
│   ├── (marketing)/       # Public marketing pages
│   └── dashboard/         # Protected dashboard
├── components/            # Reusable UI components
│   ├── ui/               # Shadcn/UI components
│   ├── header/           # Header components
│   └── sidebar/          # Sidebar components
├── lib/                  # Utilities and configurations
│   ├── services/         # External service integrations
│   └── config/           # Environment configurations
├── db/                   # Database schema and migrations
├── actions/              # Server Actions
├── types/                # TypeScript type definitions
└── hooks/                # Custom React hooks

Key Patterns

• Component Organization: Folder-based with focused sub-components
• Data Flow: React Components → Server Actions → Services
• Type Safety: End-to-end TypeScript with schema-generated types
• Code Quality: Strict ESLint rules with auto-formatting

🔒 Authentication Flow

The template includes a complete authentication system:

• Sign Up/Sign In: Custom styled Clerk components
• Protected Routes: Automatic redirects for authenticated users
• User Management: Profile creation and management
• Social Logins: Google, GitHub, and other providers

💳 Payment Integration

Stripe integration includes:

• Subscription Management: Monthly/yearly plans
• Customer Portal: Self-service billing
• Webhook Handling: Automatic subscription status updates
• Type-Safe: Full TypeScript support

📊 Analytics & Monitoring

PostHog integration provides:

• User Tracking: Page views and custom events
• Feature Flags: A/B testing capabilities
• User Identification: Automatic user association

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Add environment variables in Vercel dashboard
3. Deploy automatically on every push

Environment Variables for Production

Make sure to set all the environment variables from the .env.local example in your deployment platform.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run yarn clean to ensure code quality
5. Submit a pull request

📝 License

MIT License - see LICENSE file for details.

🙋‍♂️ Support

For questions and support:

• Create an issue in the repository
• Check the documentation in CLAUDE.md for development guidelines

💖 Sponsor

If you find this template useful, consider supporting its development:

• Sponsor on GitHub
• Follow me on Twitter for updates

---

Built by Santiago Pablo Ortiz (llm_san) • 2025