EPA “My Local Environment” — Vite + Node Clone

A modern clone of https://gis.epa.ie/mylocalenvironment/ built with Vite + React + TypeScript on the frontend and an Express API on the backend. The original Next.js implementation has been fully migrated and removed.

Tech stack

• Frontend: Vite, React, TypeScript, Tailwind CSS, Leaflet/react-leaflet
• Backend: Node.js + Express, CORS, dotenv
• E2E tests: Playwright (Chromium, Firefox, WebKit)

Project structure

.
├── backend/                # Express API: health, environmental data, geocoding proxy
│   ├── server.js
│   └── .env                # OPENCAGE_KEY=...
├── frontend/               # Vite + React app: map UI, dialog, search
│   ├── src/
│   │   ├── App.tsx
│   │   └── components/
│   │       ├── Map.tsx
│   │       └── InfoDialog.tsx
│   └── public/
│       └── environmental.geojson (optional here)
├── tests/                  # Playwright tests
│   └── frontend.spec.ts
├── public/                 # Optional shared static root; backend searches here too
│   └── environmental.geojson (optional here)
├── playwright.config.ts    # Auto-starts Vite dev server for tests
└── package.json            # Root scripts for dev/test convenience

The backend’s /api/environmental endpoint searches multiple locations for the dataset and falls back to an empty collection if not found:

• frontend/public/environmental.geojson
• public/environmental.geojson (repo root)

Features

• Search with suggestions (via backend geocoding proxy to OpenCage)
• Click on map to set location (with reverse geocoding fallback)
• Adjustable radius: 1, 2, 5, 10, 50, 100 km
• Category toggles with counts and lists
  • Water, Air/Noise, Radiation, Land/Soil, Industry/Waste, Traffic
• Markers and an outline radius circle on the map
• Robust error handling for missing data or geocoding failures

Development

Open two terminals and run backend and frontend separately:

# Backend API (port 3001)
cd backend
npm install
npm run dev

# Frontend (port 5173)
cd frontend
npm install
npm run dev

Visit http://localhost:5173 — the frontend proxies /api → http://localhost:3001.

Alternatively, from the repo root you can run both at once:

npm run dev:split

Environment variables (geocoding)

Create backend/.env and add your OpenCage key:

OPENCAGE_KEY=your_api_key_here

The frontend calls /api/geocode and /api/reverse; the backend securely proxies these to OpenCage using the server-side key.

Dataset (environmental.geojson)

Place environmental.geojson in one of the supported locations (first found wins):

• frontend/public/environmental.geojson (recommended)
• public/environmental.geojson (repo root)

If missing, the backend serves an empty dataset so the UI remains stable.

Testing (Playwright)

Headed UI with slow motion is enabled in playwright.config.ts:

• headless: false
• launchOptions.slowMo: 300
• webServer auto-starts the Vite frontend for tests

Run the tests in the terminal:

npm run test:e2e

Or open the Playwright UI:

npm run ui

Included tests cover:

• Search suggestions and opening the info dialog
• Map click to set a location
• Rosslare Harbour scenario with per-category counts (fully mocked for determinism)

Build & Preview (frontend)

cd frontend
npm run build
npm run preview

Production (backend)

cd backend
npm run start

Troubleshooting

• 500 from /api/geocode or /api/reverse
  • Ensure backend/.env has a valid OPENCAGE_KEY and restart the backend.
• Empty lists / counts are zero
  • Ensure environmental.geojson is placed in one of the supported locations listed above.
• Port conflicts
  • Frontend uses 5173 and backend 3001 by default. Stop other processes or change ports accordingly.

---

This repository no longer contains any Next.js code or scripts. Use the Vite + Node workflow as described above.