A modern web application starter template built with Next.js 15, featuring authentication, database integration, AI capabilities, and dark mode support.
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Authentication: Clerk
- Database: Supabase
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui
- AI Integration: Vercel AI SDK
- Theme System: next-themes
Before you begin, ensure you have the following:
- Node.js 18+ installed
- A Clerk account for authentication
- A Supabase account for database
- Optional: OpenAI or Anthropic API key for AI features
- Generated project documents from CodeGuide for best development experience
-
Clone the repository
git clone <repository-url> cd codeguide-starter-kit
-
Install dependencies
npm install # or yarn install # or pnpm install
-
Environment Variables Setup
- Copy the
.env.example
file to.env.local
:cp .env.example .env.local
- Fill in the environment variables in
.env.local
(see Configuration section below)
- Copy the
-
Start the development server
npm run dev # or yarn dev # or pnpm dev
-
Open http://localhost:3000 with your browser to see the result.
The homepage includes a setup dashboard with direct links to configure each service.
- Go to Clerk Dashboard
- Create a new application
- Go to API Keys
- Copy the
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
andCLERK_SECRET_KEY
- Go to Supabase Dashboard
- Create a new project
- Go to Authentication → Integrations → Add Clerk (for third-party auth)
- Go to Project Settings > API
- Copy the
Project URL
asNEXT_PUBLIC_SUPABASE_URL
- Copy the
anon
public key asNEXT_PUBLIC_SUPABASE_ANON_KEY
- Go to OpenAI Platform or Anthropic Console
- Create an API key
- Add to your environment variables
Create a .env.local
file in the root directory with the following variables:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key
# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# AI Integration (Optional)
OPENAI_API_KEY=your_openai_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key
- 🔐 Authentication with Clerk (middleware protection)
- 🗄️ Supabase Database with third-party auth integration
- 🤖 AI Chat Interface with OpenAI/Anthropic support
- 🎨 40+ shadcn/ui components (New York style)
- 🌙 Dark mode with system preference detection
- 🎯 Built-in setup dashboard with service status
- 🚀 App Router with Server Components
- 🔒 Row Level Security examples with Clerk user IDs
- 📱 Responsive design with TailwindCSS v4
- 🎨 Custom fonts (Geist Sans, Geist Mono, Parkinsans)
codeguide-starter-kit/
├── src/
│ ├── app/ # Next.js app router pages
│ │ ├── api/chat/ # AI chat API endpoint
│ │ ├── globals.css # Global styles with dark mode
│ │ ├── layout.tsx # Root layout with providers
│ │ └── page.tsx # Hero + setup dashboard
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components (40+)
│ │ ├── chat.tsx # AI chat interface
│ │ ├── theme-provider.tsx # Theme context
│ │ └── theme-toggle.tsx # Dark mode toggle
│ ├── lib/ # Utility functions
│ │ ├── supabase.ts # Supabase client with Clerk auth
│ │ ├── user.ts # User utilities
│ │ ├── utils.ts # General utilities
│ │ └── env-check.ts # Environment validation
│ └── middleware.ts # Clerk route protection
├── supabase/
│ └── migrations/ # Database migrations with RLS examples
├── CLAUDE.md # AI coding agent documentation
├── SUPABASE_CLERK_SETUP.md # Integration setup guide
└── components.json # shadcn/ui configuration
This starter includes modern Clerk + Supabase integration:
- Third-party auth (not deprecated JWT templates)
- Row Level Security policies using
auth.jwt() ->> 'sub'
for Clerk user IDs - Example migrations with various RLS patterns (user-owned, public/private, collaboration)
- Server-side client with automatic Clerk token handling
This starter is optimized for AI coding agents:
CLAUDE.md
- Comprehensive project context and patterns- Setup guides with detailed integration steps
- Example migrations with RLS policy templates
- Clear file structure and naming conventions
- TypeScript integration with proper type definitions
To implement the generated documentation from CodeGuide:
-
Create a
documentation
folder in the root directory:mkdir documentation
-
Place all generated markdown files from CodeGuide in this directory:
# Example structure documentation/ ├── project_requirements_document.md ├── app_flow_document.md ├── frontend_guideline_document.md └── backend_structure_document.md
-
These documentation files will be automatically tracked by git and can be used as a reference for your project's features and implementation details.
Contributions are welcome! Please feel free to submit a Pull Request.