58 lines
4.2 KiB
Markdown
58 lines
4.2 KiB
Markdown
# 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:
|
||
```ts
|
||
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.
|