Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/EstefanoARG/FridgeRadar/llms.txt

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

FridgeRadar’s frontend is a single-page application built with React 18.3 and bundled by Vite 5.4. Client-side routing is handled by React Router 6.26, and all API communication goes through Axios 1.7 pointed at the /api/v1 base URL. In development, Vite’s built-in dev server proxies those requests directly to the FastAPI backend — no CORS headers or separate configuration required.

​
Requirements

Node.js 18+

Vite 5 requires Node 18 or later. Run node -v to confirm your version before installing.

npm

Comes bundled with Node.js. The project uses npm scripts (dev, build, preview) defined in package.json.

​
Development

1

Install dependencies

From the repository root:
cd frontend
npm install
2

Start the Vite development server

npm run dev
Vite starts on port 5173 by default (http://localhost:5173). The terminal will print the exact local URL once the server is ready.
3

Understand the API proxy

During development, all requests that begin with /api are automatically forwarded to the FastAPI backend. This is configured in vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
})
A call from the React app to /api/v1/auth/login is transparently proxied to http://localhost:8000/api/v1/auth/login. The backend must be running on port 8000 for API calls to succeed.
The changeOrigin: true option rewrites the Host header so it matches the target, which is required when the backend enforces origin checking.

​
Building for Production

1

Create the production bundle

npm run build
Vite compiles, tree-shakes, and minifies the application into the frontend/dist/ directory. The output is a set of static HTML, CSS, and JavaScript files ready to be served by any web server.
2

Preview the production build locally

Before deploying, you can verify the production build using Vite’s built-in preview server:
npm run preview
This serves the dist/ folder locally (default port 4173) so you can catch any build-only issues before shipping.

​
Production Deployment

In production there is no Vite dev server, so you need a web server to both serve the static dist/ files and proxy /api requests to the FastAPI backend. nginx is the recommended choice.

​
nginx Configuration

Place the dist/ directory in /var/www/fridgeradar (or any path you prefer) and point the root directive at it. The try_files directive ensures that React Router’s client-side navigation works correctly — all unmatched paths fall back to index.html.
server {
    listen 80;
    server_name your-domain.com;

    # Serve the React SPA
    root /var/www/fridgeradar/dist;
    index index.html;

    # Client-side routing fallback
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Proxy all API calls to the FastAPI backend
    location /api/ {
        proxy_pass         http://127.0.0.1:8000;
        proxy_set_header   Host              $host;
        proxy_set_header   X-Real-IP         $remote_addr;
        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }
}
With this configuration the Axios base URL /api/v1 resolves correctly in both development (Vite proxy) and production (nginx proxy), so no environment-specific Axios configuration is needed.

​
Axios Base URL

The Axios client inside the React app is pre-configured with: 
baseURL: '/api/v1'
All API calls are relative to this prefix — for example, a login request is sent to /api/v1/auth/login. Both the Vite proxy (/api → http://localhost:8000) and the nginx location /api/ block ensure those paths resolve to the FastAPI backend without any changes to the frontend code between environments.

​
Key Dependencies

PackageVersionRole
react18.3.1UI component library
react-dom18.3.1React DOM renderer
react-router-dom6.26.0Client-side routing
axios1.7.3HTTP client for API calls
vite5.4.0Build tool and dev server
@vitejs/plugin-react4.3.1Vite React plugin (Fast Refresh)

​
Available npm Scripts

ScriptCommandDescription
devnpm run devStart Vite dev server on port 5173 with HMR
buildnpm run buildBundle for production into dist/
previewnpm run previewServe the dist/ build locally for verification

Build docs developers (and LLMs) love

Get started for freeTalk to us