This interactive map displays webcams from all over Switzerland, giving you a real-time glimpse of the current weather conditions and helping you plan your next outdoor adventure. So why wait? Let's find out where the sun is shining today!
Available here: sunpeak.app
- Next.js (App Router) with React and TypeScript
- Leaflet / react-leaflet for the interactive map, with tiles from Mapbox
- Tailwind CSS for styling
- Vitest for unit tests
| Data | Source |
|---|---|
| Webcams | A Google Sheet (read via the Sheets API), manually curated with name, location, coordinates, and image URLs |
| Temperature & wind | MeteoSwiss 10-minute measurements via data.geo.admin.ch |
| Map tiles | Mapbox custom style |
The MeteoSwiss data is delivered in the Swiss LV95 coordinate system and converted to WGS84 with proj4.
-
Use Node.js 24 (
nvm use). -
Install dependencies:
npm ci
-
Copy
.env.templateto.env.localand fill in the values (see the comments in the template for where to get them). -
Start the dev server:
npm run dev
| Script | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Create a production build |
npm run start |
Serve the production build |
npm run lint |
Route typegen, ESLint, type check, and unused-code check |
npm run format |
Format all files with Prettier |
npm run format:check |
Verify formatting without writing |
npm run test:unit |
Run unit tests once |
npm run test:unit:watch |
Run unit tests in watch mode |
npm run test:unit:coverage |
Run unit tests with a coverage report |
Pull requests against main run lint (including formatting), unit tests, and a production build via GitHub Actions. Dependency updates are managed by Renovate.
The app is deployed on Vercel; every push to main goes to production. The environment variables from .env.template must be configured in the Vercel project.