Skip to content
Rafi Akmal Widikta

frontend

My Hidden Impact

Eleven-step questionnaire that turns everyday habits into how many Earths you use, then into a personal action list with goals.

Role
Software Engineer
Date
January 2026

Technologies

  • react
  • typescript
  • vite
  • firebase
  • firestore
  • tanstack query
  • zustand
  • radix ui
  • contentful
  • sentry

Problem

Carbon calculators usually ask for numbers people do not actually know: kilowatt hours, cubic metres of gas, kilometres flown last year. People guess, so the result describes the guessing rather than the lifestyle, and a figure on its own changes nothing. Learning that you emit eight tonnes a year does not tell you what to do on Monday morning.

The result screen is the product, and it is also where things break. In quick mode people answer partially, and one missing figure was enough to turn the housing total into NaN and take the whole result with it. The same edges showed up elsewhere: a consent checkbox that vanished below the medium breakpoint, a document language that never followed the active locale, and a Dutch label where a room had been translated as a shower bath.

Solution

The same model is asked twice: a quick pass that gives a result in about a minute, a precise pass for the answers that actually move the number. Eleven short steps keep it concrete: food and diet, clothes and possessions, housing and bathing, then how you get around. Results are expressed as how many Earths it would take if everyone lived like you, next to an equivalent in trees and hectares, which needs no conversion table to be understood. From there the app proposes actions, lets you set goals, and adds groups so the reducing happens with other people. The questions live in Contentful, so they can be rewritten without shipping code.

The edges were then handled one at a time. A partial housing answer now falls back to the recipe-point calculation whenever the primary total is not a finite number, so an incomplete questionnaire produces a real figure instead of NaN. The checkbox lost its negative margin and breakpoint-only spacing in favour of explicit padding that holds at every width. The document language is bound to the active locale rather than left at the default, which matters for search engines and screen readers. The Dutch term was corrected, a partner logo was updated to the current brand, and the results page was pruned: a forest visual, a Top 10 link, two social icons and a heading that repeated itself had all stopped earning their place.

Gallery

Screenshots

  • My Hidden Impact landing page headed “Discover your hidden impact on the planet”, with a Start button at the centre of an illustrated globe.
    Homepage

Contact

Interested in working together?

Tell me what you are building and what you need. A short note is enough.

Back to top