gh-otoshek-claude-code-toolkit/skills/react-setup/README.md

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.