CodeGuide Next.js Firebase Starter

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

Tech Stack

• Framework: Next.js 14 (App Router)
• Authentication: Clerk
• Database: Firebase
• 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 Firebase project for database and backend services
• Generated project documents from CodeGuide for best development experience

Getting Started

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.

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

Firebase Setup

1. Go to Firebase Console
2. Create a new project
3. Add a web app to your project
4. Copy the Firebase configuration object
5. Set up the necessary Firebase services (Authentication, Firestore, etc.)

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

# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id

Features

• 🔐 Authentication with Clerk
• 📦 Firebase 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

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.