Klimatkollen Frontend
Welcome to the frontend of klimatkollen.se, developed using TypeScript, React, Vite, and Tailwind CSS.
Klimatkollen is an open-source, citizen-driven platform designed to visualize climate data. Currently, we are showcasing data from major Swedish companies and Swedish municipalities.
🚀 Project Structure
src/pages/: Contains .tsx files for each page, which are routed based on their filenamessrc/components/: Houses reusable React components utilized throughout the applicationpublic/: Stores static assets such as images
🗄️ Deciding on backend to run development client against
To run the local development client, you must run our API locally or connect to our production API. For information on setting up the API locally, see the README in our data pipeline repository.
If you instead want to run the local development client against production,
setup the local .env file for development by running the following command in
the root directory of the frontend code.
cp .env.example .env.development
🧞 Building and Running Locally
To run the project locally, execute the following commands from the root of the project in your terminal:
| Command | Action |
|---|
npm install | Installs dependencies |
npm run dev | Starts local dev server at localhost:5173 or |
| VITE_API_PROXY | |
npm run dev-gen | Starts local dev server and regenerates API types from OpenAPI |
npm run generate-api | Regenerates src/lib/api-types.ts from production OpenAPI (/reference/openapi.json) |
npm run generate-api:local | Same, from local Garbo (http://localhost:3000/reference/openapi.json) |
npm run generate-api:staging | Same, from staging API |
npm run build | Builds your production site to ./dist/ |
npm run preview | Previews your build locally, before deploying |
| npm run build:dataguide |
Note: When making changes to the data guide content (markdown files in src/locales/dataguide/), you need to run npm run build:dataguide to generate the updated JSON files. This step is automatically included when running npm run build for production builds.
Note: npm audit vulnerabilities will fail the build.
Company IDs and API types
Companies are keyed by internal UUID (Company.id) in the database. The frontend uses two identifier shapes:
| Use case | Identifier |
|---|
Public URLs (/companies/...) | wikidataId if set, else first 8 hex chars of id |
Partner read (getCompanyDetails) | URL param as-is — API resolves Q-id, full UUID, or 8-char prefix |
Staff create (createCompany) | Always full internal company.id in response |
Helpers live in src/utils/companyRouting.ts (getCompanyUrlSegment, getCompanyDetailPath).
After the API with staff /:id routes is deployed, regenerate OpenAPI types before building against production:
npm run generate-api:staging # or generate-api:local against a running API
Do not hand-edit src/lib/api-types.ts except when temporarily ahead of a staged OpenAPI publish.
👩💻 Contributing
Do you have an idea for a feature? Jump into the code or head to our Discord server to discuss your thoughts. You can also submit an issue explaining your suggestion.
How to Contribute
- Discuss your ideas on our Discord.
- Submit an issue if you can't find an existing one.
- Pick up an issue from our open issues (and leave a comment to avoid duplication of work).
📠 Contact
Join our Discord server or reach out via email at [email protected].
🫶 Supporters and Partners
This work wouldn't have been possible without the support from Google.org.
We also extend our gratitude to our current and former partners:
Postkodstiftelsen, ClimateView, Klimatklubben.se, Researcher's Desk, Exponential Roadmap, WWF, We Don't Have Time, Våra Barns Klimat, Argand, StormGeo.
LICENSE
This project is licensed under the terms of the Apache 2.0 © Klimatbyrån Ideell Förening.
