JavaScript stack and tooling

The languages, build tools, package scripts, linting, tests and Node.js scripts behind Nigraan, and the commands to work on it.

Everything on the web side of Nigraan is JavaScript or TypeScript: the website, its build, the tests, and the scheduled data jobs. The mobile app is written separately, in Dart with Flutter.

Languages and runtime

Piece	Version	Notes
TypeScript	5	The website. `strict` mode, no emitted files: Vite does the compiling.
JavaScript (ES modules)	ES2022	The Node scripts in `frontend/scripts/`, as `.mjs` files that run without a build step.
Node.js	22 in the scheduled jobs; 18 or newer locally	Uses Node's built-in `fetch`; no HTTP library needed.
npm	—	One `package.json` and lockfile in `frontend/`.

Build and development

Tool	Role
Vite 5 + `@vitejs/plugin-react`	Development server with hot reload, and the production bundle.
`tsc --noEmit`	The type check, run before every build.
Tailwind CSS 3, PostCSS, Autoprefixer	CSS.
ESLint 8 + `@typescript-eslint` + `react-hooks`	Linting, with zero warnings allowed.
Prettier 3	Formatting.
Vitest + Testing Library	Unit and component tests. See Testing and quality.

Package scripts

Run these from frontend/:

Command	Does
`npm run dev`	Start the site at `http://localhost:5173`.
`npm run build`	Type-check, bundle into `dist/`, then prerender the static SEO pages and the sitemap.
`npm run preview`	Serve the built `dist/` locally.
`npm test`	Run the test suite (`npx vitest run` for a single pass).
`npm run type-check`	TypeScript only.
`npm run lint`	ESLint.
`npm run format`	Prettier over `src/`.
`npm run i18n:audit`	Report missing or inconsistent Urdu translations (`:strict` fails on warnings too).
`npm run prerender`	Re-run the prerender step on an existing `dist/`.
`npm run deploy`	Deploy to Vercel. See Hosting, deployment and SEO.

Node scripts

Script	Purpose
`scripts/prerender.mjs`	After the build, writes a static HTML page per public route (title, description, structured data and the page's text), plus `sitemap.xml`, and notifies search engines through IndexNow.
`scripts/deploy-vercel.mjs`	Deploys through Vercel's REST API.
`scripts/pipeline/*.mjs`	The NDMA/PDMA ingest: fetchers and one parser per document type. See Data pipeline.
`scripts/buildOsmFacilities.mjs`	Builds the OpenStreetMap facility layer.
`scripts/check-rls.mjs`	Checks what a signed-out visitor can actually do against a live project. The database is the real access boundary, so this tests it directly.
`scripts/i18n-audit.mjs`	The translation audit.

The pipeline's parsers have their own tests beside them (*.test.mjs), run by the same Vitest suite as the website.

Conventions

Data access lives in src/data/. Components call a function such as fetchUploadedRecords(), never the Supabase client directly.
Logic that can be pure is pure, in src/utils/, and tested there without a browser or a map.
Comments say why. Many files open with the reason a rule exists and the bug it prevents. Read them before you change the rule.
Every user-visible string is translated, or the page is explicitly English-only.

Getting started

git clone <repository URL>
cd FT-AAFAT/frontend
npm install
npm run dev
npx vitest run

See Frontend for the environment variables that connect the site to a Supabase project.

← All technical documentation