Frontend

The IDS-DRR Frontend is the user-facing web application that provides interactive maps, dashboards, and reports for disaster risk reduction decision-making.

Repository: IDS-DRR-Frontend

Features

Interactive Maps: Visualize flood risk scores, hazard, exposure, vulnerability, and coping capacity at district and revenue circle levels
Time-based Filtering: View data across different time periods (monthly)
Boundary Selection: Toggle between district and revenue circle views
Indicator Selection: Switch between different risk factors and indicators
Reports: Generate tailored reports for specific administrative units

Tech Stack

Technology	Purpose
React	UI framework
Next.js	React framework for SSR and routing
GraphQL	API query language
TypeScript	Type-safe JavaScript (89.3%)
CSS/SCSS	Styling

Dependencies

The following dependencies must be available globally on your system:

Node.js LTS v18+
npm (comes with Node.js)

Installation & Setup

Clone the repository:

git clone https://github.com/CivicDataLab/IDS-DRR-Frontend.git

Navigate to the project directory:
```
cd IDS-DRR-Frontend
```
Install the dependencies:
```
npm install --force
```

Usage

After completing the installation steps, run the project locally:

npm run dev

No .env file is required for local development. The included .env.development file contains:

DATA_MANAGEMENT_LAYER_URL="http://localhost:8000"
NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL="http://localhost:8000"
BACKEND_URL=
NEXT_PUBLIC_BACKEND_URL=

The first two point to the Data Management API, which serves analytics maps, risk scores, and indicators.

The last two point to the DataSpace Backend, which serves the datasets catalog and search. DataSpace is optional.

Environment Variables

Create a .env.local file to override any value (e.g. to point at production or staging backends).

Variable	Description	Example
`DATA_MANAGEMENT_LAYER_URL`	Data Management API URL (server-side)	`https://drr.backend.open-contracting.in`
`NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL`	Data Management API URL (client-side)	`https://drr.backend.open-contracting.in`
`BACKEND_URL`	DataSpace API URL (server-side)	`https://api.dataspace.open-contracting.in`
`NEXT_PUBLIC_BACKEND_URL`	DataSpace API URL (client-side)	`https://api.dataspace.open-contracting.in`
`SITE_URL`	Public site URL, used for `<meta>` tags (`og:url`, `og:image`, etc.), `<link>` tags (manifest, icons), and sitemap generation. Defaults to `http://localhost:3000` in development.	`https://drr.open-contracting.in/en`
`NEXT_PUBLIC_TIME_PERIOD`	Fallback time period (e.g. `2024_08`) used when the API doesn’t return one. If unset, the app uses the latest available time period from the API when possible.	`2024_08`

Analytics

Variable	Description
`NEXT_PUBLIC_GOOGLE_ANALYTICS_APP_ID`	Google Analytics measurement ID. If unset, the Google Analytics script is not loaded.
`NEXT_PUBLIC_HOTJAR_ID`	Hotjar site ID. If unset, the Hotjar script is not loaded.
`GOOGLE_SITE_VERIFICATION`	Google Search Console verification token. Rendered as a `<meta>` tag.

Sentry

Sentry is used for error reporting. When no DSN is configured, the Sentry SDK initializes but is disabled; no errors are sent and no network requests are made.

Variable	Description	Required for
`SENTRY_DSN_URL`	Sentry DSN for server-side error reporting	Runtime error reporting
`NEXT_PUBLIC_SENTRY_DSN_URL`	Sentry DSN for client-side error reporting	Runtime error reporting
`SENTRY_AUTH_TOKEN`	Auth token for uploading source maps	CI/production builds only
`SENTRY_ORG_NAME`	Sentry organization slug	CI/production builds only
`SENTRY_PROJECT_NAME`	Sentry project slug	CI/production builds only
`SENTRY_URL`	Sentry instance URL (only if self-hosting Sentry)	CI/production builds only

The SENTRY_AUTH_TOKEN, SENTRY_ORG_NAME, SENTRY_PROJECT_NAME, and SENTRY_URL variables are only used during builds to upload source maps. They have no effect at runtime or in local development.

Running Tests

npm run test

Get Involved

Start by reading the Code of Conduct
Get familiar with the contributor guidelines explaining the different ways you can support this project