OmarCypha700/FIP-Frontend

A community powered flood intelligence platform, that creates awareness for citizen by showing affected areas and their severity. Built for Ghana # Flood Intelligence Platform — Frontend Next.js (App Router) + JavaScript client for the Flood Intelligence Platform, a civic-tech flood-reporting and verification platform for Accra, Ghana. See `../FIP Backend/docs/DATA_MODEL.md` for the data model and API surface this app consumes. ## Stack - Next.js 16 (App Router, JavaScript, `src/` layout) - Tailwind CSS v4 (CSS-first theme in `globals.css`) + shadcn/ui (Base UI primitives, not Radix) - Fraunces (headings) + IBM Plex Sans (body/UI) — a warm-serif/functional-sans pairing, no default Inter-on-white look - TanStack Query for data fetching, resource-oriented hooks in `src/hooks/` - react-hook-form + zod for form validation - next-themes for accessible light/dark (follows system preference) - Leaflet + react-leaflet + react-leaflet-cluster for the map (dynamically imported, `ssr: false` — Leaflet touches `window` at import time) - Charts (`components/charts/`) are hand-built HTML/CSS, not a charting library — following the house dataviz method (job-first color, status/severity colors reserved and never reused as generic series, direct value labels instead of a separate legend) - ESLint + Prettier (with `prettier-plugin-tailwindcss`), husky + lint-staged pre-commit hooks ## Setup ```bash npm install cp .env.example .env.local # point NEXT_PUBLIC_API_BASE_URL at the running backend npm run dev ``` Open localhost. The Django backend must be running (see `../FIP Backend/README.md`) for auth and data calls to succeed. ## Environment variables See `.env.example`: | Variable | Purpose | | ----------------------------------- | ---------------------------------------------------------------------- | | `NEXT_PUBLIC_API_BASE_URL` | Base URL of the Django REST API, e.g. `127.0.0.1` | | `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME` | Cloudinary cloud name, if client-side image URL construction …