Impact Tracker
Carbon Footprint Calculator

The project

Impact Tracker was built to demonstrate the difference between a static marketing site and a full web application. Most clients I work with need the former — but some businesses need something more complex: a tool that users log in to, that stores their data, and that does something with it over time.

This project is a carbon footprint calculator where users can create an account, log different types of emissions (home energy, transport, diet, purchases), and see their impact change over time through visualisations. It's the kind of project that would cost significantly more through an agency — but is entirely achievable as a freelance commission.

Technical architecture

The app is split into two parts: a Node.js REST API that handles authentication, data storage, and carbon calculation logic; and a React frontend that consumes that API and renders the UI.

User accounts are handled with JWT authentication — users register, get a token, and that token is stored in localStorage and sent with every API request. The backend validates the token and returns only that user's data. Carbon emission factors come from published UK government greenhouse gas conversion data, applied per category.

Data visualisation uses Chart.js, rendering line charts of emissions over time per category, and a doughnut chart showing the breakdown by type.

Design decisions

The UI is intentionally calm and clean — green and white, with soft colours for the charts. Environmental apps often default to aggressive, guilt-heavy messaging. Impact Tracker's design is neutral and informative: your numbers, your trend, no lecturing. The onboarding is quick — log your first activity in under two minutes.

Responsive design was built mobile-first. Most people doing quick entry of a commute or meal are on their phone; the logging forms needed to be thumb-friendly.

What this project shows

Most freelance web designers stop at static sites. This project demonstrates I can take on full-stack work: database design, API development, authentication, and a production-deployed frontend — all working together. If your business needs a custom tool rather than just a website, that's something I can build.

Result

A working, live web application with real user accounts, persistent storage, and data visualisation — demonstrating full-stack capability beyond typical freelance web design work.

Back to all work