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.

The Ocipe frontend is a React 19 + TypeScript application built with Vite. It communicates with the Django backend via Axios and manages all server state — recipe lists, fridge contents, grocery lists — with TanStack Query’s caching and background-refetch model.

​
Requirements

  • Node.js 18 or later
  • npm (bundled with Node.js)

​
Local development

1

Enter the frontend directory

cd ocipe/frontend
2

Install dependencies

npm install
3

Configure the API base URL

The Axios instance in src/api/axios.ts hardcodes the production backend URL:
export const axiosInstance = axios.create({
  baseURL: "https://ocipe.onrender.com/api",
  headers: {
    "Content-Type": "application/json",
  },
});
To point at a locally running Django server, edit src/api/axios.ts and change the baseURL value directly:
export const axiosInstance = axios.create({
  baseURL: "http://localhost:8000/api",
  headers: {
    "Content-Type": "application/json",
  },
});
Remember to revert this change before committing, or restore the production URL before deploying.
4

Start the development server

npm run dev
Vite starts a hot-reloading dev server at http://localhost:5173.

​
Key technologies

PackagePurpose
React 19 + TypeScriptUI framework and type safety
Vite 6Fast dev server and optimised production bundler
TanStack Query v5Async data fetching, caching, and background synchronisation
TanStack Table v8Headless recipe table with sorting and filtering
dnd-kitDrag-and-drop for ingredient and step reordering
Tailwind CSS v4Utility-first styling
shadcn/ui (Radix UI)Accessible component primitives (dialogs, dropdowns, etc.)
React Router v7Client-side routing
React Hook Form + ZodForm state management and schema validation
Axios 1.9HTTP client for all API requests
SonnerToast notifications
Google Gemini AIAI-powered recipe autofill (via the Django backend)

​
Production build

Compile and type-check the project for production: 
npm run build
The output lands in frontend/dist/. To preview the production build locally before deploying: 
npm run preview

​
Deploying to Vercel

Vercel is the recommended host for the Ocipe frontend because it natively handles Vite projects and single-page application routing.
  1. Push your repository to GitHub and sign in to Vercel.
  2. Click Add New → Project and import your repository. Set the Root Directory to frontend.
  3. Vercel automatically detects the Vite framework — no build-command changes are needed.
  4. If you are self-hosting the backend at a different URL, update the baseURL in src/api/axios.ts before building.
  5. Click Deploy. Vercel builds the project and publishes it to a .vercel.app domain.
The vercel.json file in the frontend directory configures URL rewrites so that React Router handles all client-side navigation correctly on Vercel — deep links and page refreshes are routed to index.html rather than returning 404 errors.
vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

Build docs developers (and LLMs) love

Get started for freeTalk to us