The website's React and TypeScript code, covering pages and routing, state, maps, charts, PDFs, English and Urdu, and how it is organised.
The website is a single-page application written in TypeScript with React 18, built by Vite 5 and styled with Tailwind CSS 3. It lives in the frontend/ folder of the repository. It has no server of its own: it talks to Supabase directly from the browser.
| Library | Used for |
|---|---|
| React 18 + React Router 6 | The UI and the page routes. |
| Tailwind CSS 3 | Styling, with Nigraan's own colour palette (aafat, alert) and shared classes in src/index.css. |
| zustand 4 | Small global stores: the signed-in user and UI state such as the upload dialog. |
| @supabase/supabase-js 2 | Reading and writing data, and signing in. |
| Leaflet 1.9 + react-leaflet 4 | The interactive maps. |
| Recharts 2 | The season trend chart and the donor dashboard. |
| jsPDF 4 | Downloadable PDFs of records and map views. |
| lucide-react | Icons. |
| marked | Rendering the Help Center's markdown guides. |
| Route | Page |
|---|---|
/resources |
Homepage: hazard guides, plan, kit, contacts and the live maps. / redirects here. |
/resources/:slug |
One hazard guide, e.g. /resources/floods. |
/maps |
The Data page (staff only). |
/badges |
Relief camp badges. |
/about |
About Nigraan. |
/help, /help/:platform/:slug |
This Help Center. |
/auth/login, /auth/register, /auth/forgot, /auth/reset |
Accounts. |
/admin/review |
The staff console; its tabs depend on the role. |
Public pages share one layout (src/layouts/PublicLayout.tsx) with the header, menu, emergency ribbon and footer.
frontend/src/
├── features/ larger features (preparedness homepage, Help Center)
├── pages/ route pages, including Admin/ (the console tabs)
├── components/ shared UI; components/maps/ holds every map layer
├── data/ all data access: one module per table or source
├── lib/ auth, roles, badges, review stages, the Supabase client
├── utils/ pure logic: filters, colours, forecast scoring, PDF building
├── i18n/ the English/Urdu dictionary and language provider
├── seo/ page titles, meta tags and structured data
└── stores/ zustand stores
Path aliases (@/, @components/, @data/, @utils/ and others) are set in tsconfig.json and vite.config.ts.
Data access goes through src/data/, never straight from a component. uploads.ts, for example, owns every query on map_records and selects the list columns without the photo and voice note, which are fetched one record at a time only when someone opens them.
The maps use Leaflet with Esri and OpenStreetMap base tiles. Points of interest are drawn as custom SVG pins: each hazard has a colour and a glyph, so markers stay distinguishable for colour-blind readers. Layers are stacked in fixed panes by type (regions, facilities, forecast, advisories, zones, markers), so a layer that loads late never covers one above it.
The hazard map's Zones mode groups nearby incidents of one hazard into a shaded area; this rule lives in utils/mapDisplayMode.ts, where it can be tested without a browser. One place filter (utils/placeFilter.ts) governs every layer, so choosing a province narrows community reports, official points, advisories and forecast areas alike.
The weather layer calls the free Open-Meteo forecast API from the browser for about 55 places, and scores each one for rain, heat and wind risk in utils/hazardForecast.ts.
The site is bilingual. Interface text lives in one dictionary (src/i18n/index.tsx), each key with an en and a ur value. Hazard guides, quick answers and FAQs have Urdu companions in src/data/*.ur.ts.
In Urdu the page sets dir="rtl" and mirrors: layouts use logical properties (ms-, ps-, text-start) rather than left and right, and numbers are shown in Urdu digits. Pages that are not translated yet, such as the staff console and this Help Center, call useEnglishOnlyPage() and render in English, left to right. npm run i18n:audit reports any missing or mismatched translation.
cd frontend
npm install
# frontend/.env.local — the project URL and its publishable key
# VITE_SUPABASE_URL=https://<project-ref>.supabase.co
# VITE_SUPABASE_KEY=<publishable key>
npm run dev # http://localhost:5173
Without those two variables the site still runs, on a built-in sample dataset, with sign-in disabled.