README.md

CodeGuide Vite + Firebase Starter

A modern web application starter template built with Vite and React, featuring a beautiful UI and Firebase integration.

Tech Stack

• Framework: Vite + React
• Database: Firebase
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Data Management: TanStack Query
• Form Handling: React Hook Form
• Animations: Framer Motion
• Validation: Zod

Prerequisites

Before you begin, ensure you have the following:

• Node.js 18+ installed
• A Firebase account for backend services
• Generated project documents from CodeGuide for best development experience

Getting Started

1. Clone the repository

   git clone <repository-url>
   cd codeguide-vite-firebase

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:5173 with your browser to see the result.

Configuration

Firebase Setup

1. Go to Firebase Console
2. Create a new project
3. Enable desired services (Authentication, Firestore, Storage, etc.)
4. Go to Project Settings > General
5. Add a web app to your project
6. Copy the Firebase configuration object
7. Set up the environment variables as shown below

Environment Variables

Create a .env file in the root directory with the following variables:

# Firebase
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id

Features

• 📦 Firebase Integration (Firestore, Authentication, Storage)
• 🎨 Modern UI with Tailwind CSS and Radix UI
• 🚀 Fast Development with Vite
• 🔄 Data Fetching with TanStack Query
• 📱 Responsive Design
• 🎭 Beautiful Animations with Framer Motion
• 📝 Type-Safe Forms with React Hook Form and Zod

Project Structure

codeguide-vite-firebase/
├── src/                # Source files
│   ├── components/    # React components
│   ├── lib/          # Utility functions
│   ├── hooks/        # Custom hooks
│   └── types/        # TypeScript types
├── public/            # Static assets
└── documentation/     # Generated documentation from CodeGuide

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

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.