Set up OCM locally

Prerequisites

Before you begin, make sure you have the following installed and accounts created.

Clone the Repository

git clone https://github.com/kibetnathan/O-Concord.git
cd O-Concord

The repo is a monorepo. frontend/ is the React SPA and backend/ is the Django API. They are independent apps — run them in separate terminals.

Frontend Setup

1. Install dependencies

cd frontend
npm install

2. Create your environment file

Create frontend/.env.local with the following variables. All of them come from the third-party accounts you'll set up in the Tutorial.

# Django API base URL — change to http://localhost:8000/api/ for local dev
VITE_API_URL=http://localhost:8000/api/

# Firebase Web SDK config (from Firebase Console > Project Settings > Your apps)
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=

# YouTube Data API v3 key (for the streaming/live page)
VITE_YOUTUBE_API_KEY=

# Paystack public key (use test key pk_test_... for local development)
VITE_PAYSTACK_PUBLIC_KEY=

Backend Setup

1. Install Python dependencies

cd backend
pip install -r requirements.txt

2. Add your Firebase service account key

Download your Firebase service account JSON from Firebase Console → Project Settings → Service Accounts → Generate new private key, and save it as backend/firebase-key.json. This file is used by Django to verify Firebase ID tokens on every API request.

3. Create your environment file

Create backend/.env:

# Django secret key — generate one with:
# python -c "from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())"
SECRET_KEY=your-secret-key-here

# Comma-separated — add your local dev values
ALLOWED_HOSTS=localhost,127.0.0.1

# PostgreSQL connection (local)
POSTGRES_DB=ocm
POSTGRES_USER=postgres
POSTGRES_PASSWORD=yourpassword
POSTGRES_HOST=localhost
POSTGRES_PORT=5432

# Cloudinary (from cloudinary.com > Dashboard)
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

# Paystack (use test secret key sk_test_... for local dev)
PAYSTACK_SECRET_KEY=

# Admin superuser created on first deploy
BACKEND_ADMIN_EMAIL=admin@example.com
BACKEND_ADMIN_PASSWORD=

4. Create the local database and run migrations

# Create the database in psql first
psql -U postgres -c "CREATE DATABASE ocm;"

# Then apply Django migrations
python manage.py migrate

# Create a superuser for the Django admin panel (optional)
python manage.py createsuperuser

Run Locally

Open two terminals — one for each app.

cd frontend
npm run dev

cd backend
python manage.py runserver

Verify It's Working

• Frontend loads

  Open http://localhost:5174 — you should see the OCM home page.

• API is reachable

  Visit http://localhost:8000/api/ — Django REST Framework's browsable API should respond.

• Firebase is connected

  Try registering a new account. If Firebase keys are correct, the sign-up flow will complete and create a user in your database.

• Django admin

  Visit http://localhost:8000/admin/ and log in with the superuser you created. You should see all the OCM models.