Copilot Instructions for This Repo

This workspace has a small Flask backend and a Vite + React + TypeScript frontend. Use these notes to be productive immediately and follow the codebase’s patterns.

Big picture

Frontend: frontend/ using Vite, React Router v7, Tailwind v4, Framer Motion, i18next.
Backend: backend/ small Flask service for form email with reCAPTCHA.
Integration: The current frontend API client expects a JWT/auth API under /api/... using VITE_BACKEND_URL, but the Flask app only implements /send-incentive. Treat the API client as scaffolding unless those endpoints exist.

Frontend architecture & conventions

Entrypoint: src/main.tsx (imports ./i18n to enable translations). App routes defined in src/App.tsx.
Routing: React Router v7 with layouts in src/layout/ and pages in src/pages/. Protected routes via src/routes/Privateroute.tsx using ApiClient.checkAuth().
Styling: Tailwind CSS v4 (via @tailwindcss/vite). Utility classes throughout; minimal custom CSS in src/styles/.
Animations: Framer Motion used for subtle motion in Nav, Footer, and sections.
i18n: i18next + react-i18next + language detector. Resources in src/locales/<lng>/translation.json. Initialize in src/i18n.ts. Global language switcher at src/components/main/LanguageSwitcher.tsx and embedded in Nav.
- Pattern: Category strings in categoriesData.ts use the Czech text as translation keys; CategoryCard calls t(title) and t(description). If you change data text, update both cs and en JSON files.
Assets: Put static assets in frontend/public. Reference them as absolute paths (/images/..., /assets/..., /videos/...). Do not import from /public/... at runtime.

API client & data flow

Client: src/api/Client.ts wraps Axios with two instances: apiClient (auth) and publicClient (CSRF for anonymous calls).
- Base URL: ${import.meta.env.VITE_BACKEND_URL}/api — set VITE_BACKEND_URL in an environment file (e.g., .env) for Vite.
- Auth flow: Intercepts 401s to refresh tokens via ApiClient.refreshToken(); on failure redirects to /login.
- Helpers: ApiClient.request(method, endpoint, data, config) returns response.data and normalizes params vs body.
Current backend mismatch: Only /send-incentive exists in Flask. If you consume ApiClient endpoints (/account/...), ensure the backend implements them or mock responses.

Developer workflows

Frontend
- Dev: npm run dev in frontend/ (Vite server)
- Build: npm run build (outputs to frontend/dist)
- Env: Use VITE_* variables (e.g., VITE_BACKEND_URL=http://localhost:5000). CRA-style vars like REACT_APP_* are ignored by Vite.
Backend
- Setup: pip install -r backend/requirements.txt
- Run: python backend/app.py (defaults to http://0.0.0.0:5000)
- Env: backend/.env contains RECAPTCHA_SECRET, email credentials, SMTP settings.

Patterns to follow

Routing: Place route shells in src/layout/ and pages in src/pages/; nest via <Outlet />.
Protected routes: Wrap sections with <Route element={<PrivateRoute />} /> and place guarded routes inside.
i18n usage: const { t } = useTranslation(); then t('nav.home'), etc. Add new keys to both cs and en JSON files.
Category copy: Keep categoriesData.ts as the single source of keys (Czech text), and ensure translations exist for other languages.
Axios calls: Prefer ApiClient.request('get', '/resource', {q: 'x'}) for consistency and interceptor benefits.

Examples

Add a new translatable label:
1. Put "nav.profile": "Profile" in en/translation.json and "nav.profile": "Profil" in cs/translation.json.
2. Use in code: {t('nav.profile')}.

Call backend API:

const data = await ApiClient.request('get', '/items', { page: 1 });

Gotchas

Vite env vars must start with VITE_. .env-frontend with REACT_APP_* keys won’t be read by Vite.
Public asset paths are absolute from web root (e.g., /assets/logo.png), not /public/....
If i18n keys are missing, you’ll see the raw key in UI; add it to both locale files.

If anything here looks off or incomplete (e.g., backend endpoints you actually have but aren’t in this repo), tell me and I’ll refine these rules.

4.2 KiB Raw Blame History Unescape Escape