# React Setup Skill (Vite + Django Backend)

Spin up a fresh React app (Vite) that talks to a Django backend over HTTPS with correct CORS/CSRF handling, Axios defaults, and a basic router/layout scaffold.

## What This Skill Does
- Initializes a new Vite React project in `frontend/`.
- Configures `vite.config.js` for HTTPS dev using mkcert certs from `certs/`, port 5173, and proxying `/api` to `https://localhost:8000`.
- Adds CSRF service and Axios interceptors that inject `X-CSRFToken` for mutating requests.
- Sets up React Router layout (`Root`), navbar/footer, home page, and backend health check component that verifies CSRF + `/api/health/`.
- Provides a minimal API config file to centralize endpoints.
- Validates the build with `npm --prefix ./frontend run build`.

## Prerequisites
- Django backend running over HTTPS (see `django-setup` skill) with endpoints `/api/csrf/` and `/api/health/`.
- mkcert certificates stored in project `certs/` (key/cert filenames discovered in skill steps).
- Node.js 18+ and npm available.

## Setup Summary (see SKILL.md for exact commands)
1) **Create project**: `npm create vite@latest frontend -- --template react --yes`; then `npm --prefix ./frontend install react-router-dom axios`.
2) **Configure `vite.config.js`**: import `fs`/`path`; load mkcert key/cert from `certs/`; set `server.https`, `server.port=5173`, and proxy `/api` → `https://localhost:8000` with `secure:false`.
3) **API config** `src/config/api.js`: export `API_BASE_URL` (empty to use proxy) and `ENDPOINTS` with `CSRF: '/api/csrf/'`.
4) **CSRF service** `src/services/csrf.js`: fetch `/api/csrf/` once, read `csrftoken` cookie, cache/token helpers.
5) **Axios instance** `src/services/api.js`: `withCredentials:true`, JSON headers; request interceptor adds `X-CSRFToken` via `getCsrfToken()` for POST/PUT/PATCH/DELETE.
6) **UI scaffold**: navbar/footer components; `Root` layout with `Outlet`; `Home` page using `BackendStatus` component that pings CSRF then `/api/health/`.
7) **Routing**: `src/router/AppRoutes.jsx` exports `createAppRouter()` config; `src/router/index.jsx` wraps `RouterProvider`; `App.jsx` renders `<Router />`.
8) **Verify**: `npm --prefix ./frontend run build` to ensure config/imports succeed.

## Outputs/Artifacts
- Vite React app under `frontend/` with HTTPS dev server ready to hit Django.
- `vite.config.js` with mkcert HTTPS + API proxy.
- Axios + CSRF utilities wired for Django session auth.
- Minimal router/layout/pages demonstrating backend connectivity.

## Notes & Gotchas
- Make sure `certs/` exists and filenames match what mkcert generated; update `vite.config.js` accordingly.
- Backend must expose `/api/csrf/` to set the `csrftoken` cookie; otherwise Axios interceptor will fail.
- If you change backend host/port, update the proxy target in `vite.config.js` and any hardcoded `FRONTEND_URL` on the Django side.