AlertAigua Frontend

Web app for AlertAigua, the flood-warning service for Arens de Lledó. Residents use it to pick an alert threshold for the river's water level or flow rate, then register their phone with Pushsafer. From then on, the backend sends them a critical push notification whenever the threshold is crossed.

Features

• Setup flow (/setup): a guided wizard. Users install Pushsafer, enter a name, language, metric and threshold, and add their device with a single tap. On mobile this is a deep link, and on desktop a QR code. The settings are encoded in the Pushsafer device name, which the backend parses when Pushsafer calls its webhook.
• Threshold preview: while choosing a threshold, the wizard shows how many days per year it would have been exceeded in the past. The figures come from the SAIH Ebro CSV exports in public/data/.
• Status page (/status): live health of the Pushsafer API and apps and of the SAIH Ebro API and station, fetched from the backend's GET /status.
• How it works (/how), Help/FAQ (/help) and Imprint (/imprint) pages.
• Languages: English, Spanish and Catalan (locales/), detected from the browser and switchable at any time.

Tech stack

• React 19, TypeScript, Vite (SWC)
• HeroUI with Tailwind CSS 3, plus Framer Motion
• React Router 7
• i18next / react-i18next
• axios, papaparse, react-qr-code

Getting started

Prerequisites: Node.js 20 or newer and npm.

git clone https://github.com/computerd36/aa-fe.git
cd aa-fe
npm install
cp .env.template .env.local   # then fill in the values
npm run dev

The app runs at http://localhost:5173. With VITE_ENV=development, API calls go to a backend at http://localhost:3000, so start aa-be as well. That backend must list http://localhost:5173 in its CORS_ORIGINS.

Environment variables

Variable	Description
VITE_ENV	Set to development to use the local backend at localhost:3000
VITE_ALERTAIGUA_API_BASE_URL	Backend URL used when VITE_ENV is not development
VITE_PUSHSAFER_GUEST_ID	Pushsafer guest ID, which links new devices to the AlertAigua Pushsafer account

Vite inlines these values at build time, so they end up in the public bundle. Do not put secrets here.

Scripts

Command	Description
npm run dev	Start the dev server with hot reload
npm run build	Type-check and build to dist/
npm run preview	Serve the production build locally
npm run lint	Run ESLint

Project structure

src/
  routes/       page components, one per route
  components/   shared UI; setup/ contains the setup wizard steps
  backend/      axios instance and API calls
  context/      language context
  utils/        Pushsafer link generation, validation, helpers
locales/        translation files (en, es, ca)
public/data/    historical SAIH Ebro measurements (CSV)

Deployment

The app is deployed on Railway as a static Vite build. Set VITE_ALERTAIGUA_API_BASE_URL and VITE_PUSHSAFER_GUEST_ID before building, and leave VITE_ENV unset or set it to anything other than development.