CodeGuide

A modern web application starter template built with Next.js 14, featuring authentication, database integration, and payment processing capabilities.

• Framework: Next.js 14 (App Router)
• Authentication: Clerk
• Database: Supabase
• Styling: Tailwind CSS
• Payments: Stripe
• UI Components: shadcn/ui

Before you begin, ensure you have the following:

• Node.js 18+ installed
• A Clerk account for authentication
• A Supabase account for database
• A Stripe account for payments (optional)
• Generated project documents from CodeGuide for best development experience

1. Clone the repository

   git clone <repository-url>
   cd codeguide-starter-pro

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Environment Variables Setup

   • Copy the .env.example file to .env:

     cp .env.example .env

   • Fill in the environment variables in .env (see Configuration section below)

4. Start the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open http://localhost:3000 with your browser to see the result.

1. Go to Clerk Dashboard
2. Create a new application
3. Go to API Keys
4. Copy the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY

1. Go to Supabase Dashboard
2. Create a new project
3. Go to Project Settings > API
4. Copy the Project URL as NEXT_PUBLIC_SUPABASE_URL
5. Copy the anon public key as NEXT_PUBLIC_SUPABASE_ANON_KEY

1. Go to Stripe Dashboard
2. Get your API keys from the Developers section
3. Add the required keys to your .env file

Create a .env 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
# Stripe (Optional)
STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key

• 🔐 Authentication with Clerk
• 📦 Supabase Database
• 💳 Stripe Payments Integration
• 🎨 Modern UI with Tailwind CSS
• 🚀 App Router Ready
• 🔄 Real-time Updates
• 📱 Responsive Design

codeguide-starter/
├── app/ # Next.js app router pages
├── components/ # React components
├── utils/ # Utility functions
├── public/ # Static assets
├── styles/ # Global styles
├── documentation/ # Generated documentation from CodeGuide
└── supabase/ # Supabase configurations and migrations

To implement the generated documentation from CodeGuide:

1. Create a documentation folder in the root directory:

   mkdir documentation

2. 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

3. 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.