Sustainability Tracker
A working sustainability dashboard that tracks carbon, water, packaging, and renewable energy — built to test how well AI-generated code can be reused, themed, and shipped like a real product.
Most AI-built apps are one-and-done — type a prompt, get a screen. This one was different. The goal was to use Lovable like a real dev environment: build several modules, clean up the components, reuse what should be reused, and apply a custom theme. The result is an app that could actually grow.
A sustainability dashboard tracking four numbers — carbon emissions, water use, packaging recycled, and renewable energy — each with year-over-year trends and a 2030 goal progress bar. Custom theme applied with TweakCN. Live on Lovable, GitHub, and Vercel.
Did Lovable reuse or duplicate?
The real test of this build wasn't how it looked — it was how it was put together. The four metric cards all follow the same pattern: a big number, a trend arrow, and a progress bar toward a 2030 goal. The question was whether Lovable would build one card and reuse it four times — or quietly make four separate copies. Catching and fixing that is the difference between a prototype and a product you can actually maintain.
Change one value. Everything updates.
shadcn/ui is a set of ready-made React components — buttons, cards, progress bars — that all pull their colors and spacing from a shared list of values called design tokens. TweakCN is a visual editor for those tokens.
I used TweakCN to dial in a dark, data-focused look without touching any component code. The green on the trend arrows and progress bars all comes from a single value — change it, and every component changes with it. That's the whole point of a design system, made real in working code.
/ Click any screen to expand
Shipped to Three Places
Lovable → GitHub → Vercel.
Built in Lovable, version-controlled in GitHub, and live on Vercel. A real shipping workflow — not just a preview link.
One Card, Reused Four Times
One shared component instead of four copies.
All four metric cards use the same component with different data passed in. Change the style or copy in one place and all four update. That's the difference between a codebase that stays clean and one that quietly piles up debt.
Themed With Tokens, Not Hardcoded Colors
Change one value, the whole app updates.
Used TweakCN to apply a custom theme through design tokens. The green on trends and progress bars all comes from a single token — change it once and every component follows.
- AI builds fast. It still needs a human review.
Lovable generates code quickly, but quick doesn't mean clean. Reviewing the components after each build caught duplication and naming issues before they became real problems.
- Design tokens are how you stay consistent.
Applying the TweakCN theme made it obvious: one change at the token level updates every component at once. That's how you keep things consistent as a product grows.
- Knowing how to deploy is part of the job.
Building in Lovable, pushing to GitHub, and hosting on Vercel is a real workflow — not a sandbox. That handoff from AI tool to live site is where most designers stop.