VH - Full Stack Application

A complete full-stack application with React frontend, FastAPI backend, and Supabase database integration.

Project Structure

vh/
├── frontend/           # React + Vite + Supabase
├── backend/            # FastAPI + Python
│   ├── app/           # Application modules
│   ├── requirements.txt
│   └── .env.example
├── main.py            # Old entry point (to be replaced)
└── README.md

Tech Stack

• Frontend: React 18 + Vite + Supabase JS Client
• Backend: FastAPI + Python
• Database: Supabase (PostgreSQL)
• API Communication: HTTP REST APIs

Setup Instructions

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Create a Python virtual environment:

python3 -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies:

pip install -r requirements.txt

4. Create a .env file from .env.example:

cp .env.example .env

5. Add your Supabase credentials to .env

6. Run the FastAPI server:

uvicorn app.main:app --reload

The backend will be available at http://localhost:8000

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Create a .env file from .env.example:

cp .env.example .env

4. Add your Supabase credentials and API URL to .env

5. Start the development server:

npm run dev

The frontend will be available at http://localhost:3000 (or http://localhost:5173 depending on Vite config)

API Documentation

Once the backend is running, view the interactive API docs at:

• Swagger UI: http://localhost:8000/docs
• ReDoc: http://localhost:8000/redoc

Supabase Setup

1. Create a Supabase project at supabase.com
2. Get your project URL and API key from the settings
3. Add them to both .env files (backend and frontend)

Running Both Services

Terminal 1 - Backend

cd backend
source venv/bin/activate
uvicorn app.main:app --reload

Terminal 2 - Frontend

cd frontend
npm run dev

Environment Variables

Backend (.env)

• SUPABASE_URL: Your Supabase project URL
• SUPABASE_KEY: Your Supabase API key
• DATABASE_URL: PostgreSQL connection string

Frontend (.env)

• VITE_SUPABASE_URL: Your Supabase project URL
• VITE_SUPABASE_KEY: Your Supabase API key
• VITE_API_URL: Backend API URL (default: http://localhost:8000)

Development

• Frontend hot reloads with Vite
• Backend auto-reloads with --reload flag
• CORS is configured to allow localhost origins
• API responses are JSON

Next Steps

1. Set up Supabase tables and authentication
2. Create database models in the backend
3. Implement API endpoints for your features
4. Connect frontend components to backend APIs
5. Add user authentication with Supabase Auth