Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/viet2811/ocipe/llms.txt

Use this file to discover all available pages before exploring further.

Ocipe is made up of two independent services: a Django 5 + Django REST Framework backend that serves the API, and a React 19 + TypeScript + Vite frontend that consumes it. This guide walks you through getting both running on your machine so you can develop or self-host Ocipe locally.
Prerequisites before you begin:
  • Python 3.11 or higher
  • Node.js 18 or higher
  • A running PostgreSQL database (local or hosted)
  • A Google Gemini API key (free tier is sufficient for AI autofill)
  • A Render account (or any other host) if you plan to deploy rather than just run locally
1

Clone the repository

Grab the source code and move into the project root:
git clone https://github.com/viet2811/ocipe.git && cd ocipe
2

Set up the backend

Move into the backend directory, create an isolated Python environment, and install all dependencies:
cd backend
python -m venv .venv
source .venv/bin/activate        # Windows: .venv\Scripts\activate
pip install -r requirements.txt
Next, create a .env file in the backend directory with the following variables:
# backend/.env
DJANGO_SECRET=your-django-secret-key
POSTGRES_DB=your_database_name
POSTGRES_USER=your_database_user
POSTGRES_PASSWORD=your_database_password
POSTGRES_HOST=localhost
GEMINI_API_KEY=your-gemini-api-key
  • DJANGO_SECRET — a long, random string used by Django for cryptographic signing. Generate one with python -c "import secrets; print(secrets.token_urlsafe(50))".
  • POSTGRES_DB / POSTGRES_USER / POSTGRES_PASSWORD / POSTGRES_HOST — the connection details for your PostgreSQL database. All four are required; POSTGRES_HOST is typically localhost for local development.
  • GEMINI_API_KEY — your Google Gemini API key, used by the AI autofill feature to parse recipe URLs. Get a free key from Google AI Studio.
Apply database migrations, then start the development server:
python manage.py migrate
python manage.py runserver
The backend API will be available at http://localhost:8000/api.
3

Set up the frontend

Open a new terminal, move into the frontend directory, and install Node dependencies:
cd frontend
npm install
The frontend’s API base URL is hardcoded in src/api/axios.ts:
// src/api/axios.ts
export const axiosInstance = axios.create({
  baseURL: "https://ocipe.onrender.com/api",
  ...
});
The app does not read a VITE_API_BASE_URL environment variable — there is no .env file to create for the frontend. For local development you have two options:
  • Use the hosted API (recommended for front-end-only work): Leave axios.ts unchanged. Your local frontend will talk to the production backend at https://ocipe.onrender.com/api, which works out of the box.
  • Point to your local backend: Open src/api/axios.ts and change the baseURL to http://localhost:8000/api. Remember to revert or keep it out of version control before deploying.
Start the Vite development server:
npm run dev
The frontend will be available at http://localhost:5173.
4

Open the app

Navigate to http://localhost:5173 in your browser. Register a new account, and you’re ready to start adding recipes, stocking your fridge, and planning your groceries.

​
Environment variables at a glance

Only the backend requires an .env file. The frontend has no environment variables — its API base URL is set directly in src/api/axios.ts (see Step 3). 
# backend/.env
DJANGO_SECRET=your-django-secret-key
POSTGRES_DB=your_database_name
POSTGRES_USER=your_database_user
POSTGRES_PASSWORD=your_database_password
POSTGRES_HOST=localhost
GEMINI_API_KEY=your-gemini-api-key
Looking to deploy Ocipe to production? See Backend Deployment for the full Render setup guide, and Frontend Deployment for deploying to Vercel.
Don’t want to run anything locally? The hosted version of Ocipe is available at https://ocipe.vercel.app — no setup required.

Build docs developers (and LLMs) love

Get started for freeTalk to us