CodeGuide Vite + Supabase Starter

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

Tech Stack

• Framework: Vite + React
• Database: Supabase
• 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 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-vite-supabase

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

Supabase Setup

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

Environment Variables

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

# Supabase
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Features

• 📦 Supabase Database Integration
• 🎨 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-supabase/
├── 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.