CodeGuide Starter Lite

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

Tech Stack

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

Prerequisites

Before you begin, ensure you have the following:

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

Getting Started

1. Clone the repository

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

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.

Configuration

Clerk Setup

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

Supabase Setup

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

Environment Variables

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

Features

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

Project Structure

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

Documentation Setup

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.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.