# Sync — Frontend (`syncfrontend`)

Single-page application for **creators**, **businesses**, and **public** pages (landing, auth). Built with **Vite 7**, **React 19**, **TypeScript**, **Tailwind CSS v4**, and **React Router 7**.

---

## Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Dev server (default port **3000**) |
| `npm run build` | Typecheck + production bundle |
| `npm run preview` | Preview production build locally |
| `npm run lint` | ESLint |

---

## Environment variables

Vite exposes only variables prefixed with **`VITE_`**.

Create **`.env`** or **`.env.local`** in this directory:

```env
# Django API (no trailing slash required; axios baseURL)
VITE_API_URL=http://localhost:8000
```

If unset, the app defaults to `http://localhost:8000` (see `src/services/api.ts`).

---

## Project structure (overview)

```
src/
├── assets/           # Static assets (e.g. logo)
├── components/       # Reusable UI (layout, forms, charts, etc.)
├── contexts/         # React context (e.g. AuthContext)
├── pages/            # Route-level screens (Landing, dashboards, auth)
├── services/         # API clients (axios instances, domain helpers)
├── types/            # Shared TypeScript types
├── App.tsx           # Routes & layout wiring
├── main.tsx          # Entry
└── index.css         # Tailwind entry + theme tokens
```

### Routing (conceptual)

- **Public:** landing, login, register (and related auth pages if present).
- **Influencer:** dashboard and profile flows under a protected layout.
- **Business:** dashboard (profile, find creators, history, collaborations).

Exact paths live in `App.tsx`. Protected routes typically read JWTs from `localStorage` and attach them via the shared Axios instance.

---

## API client & auth

- **`src/services/api.ts`** — Axios instance with:
  - `baseURL` from `VITE_API_URL`
  - Request interceptor: attaches `Bearer` access token
  - Response interceptor: can refresh tokens on `401` (see file for behavior)
- Domain modules (e.g. `services/business.ts`, `services/auth.ts`) call this instance.

Backend must allow the frontend origin in **Django CORS** (`sync_backend/settings.py` already lists `localhost:3000` and Vite ports).

---

## Styling

- **Tailwind v4** with `@import "tailwindcss"` in `src/index.css`.
- **Brand colors** are defined as CSS variables under `@theme` (e.g. `brand-600` ≈ `#88184d`). Use `bg-brand-600`, `text-brand-600`, etc., in components.

---

## Requirements

- **Node.js 18+** recommended (aligned with Vite 7).

---

## Production build

```bash
npm run build
```

Output is in **`dist/`**. Serve as static files behind any CDN or reverse proxy; configure `VITE_API_URL` at **build time** for the correct API host.

---

## Related docs

- [Root README](../../README.md)  
- [Backend README](../../backend/README.md)  
- [ML service README](../../ml_service/README.md)
