DEV Community

Evan Peters
Evan Peters

Posted on

Visualizing the "Invisible" Cost of AI and Everyday Living: Why I built CostOfLivin.org

As a student, I noticed a huge gap between "saving money" and "understanding usage." We know AI queries use energy, and we know 20-minute showers use water—but how much do they actually cost in 2026 dollars?

I built CostOfLivin.org to turn abstract energy data into real-world receipts.

The Tech Stack:
I wanted the site to be blazing fast and privacy-first (no database, no tracking).

Framework: React + Vite (for that instant dev loop)

Styling: Tailwind CSS (minimalist, and like a "google" aesthetic)

Icons: Lucide React

Hosting: Netlify

The Challenges
One of the biggest hurdles wasn't the code—it was the SEO. I recently discovered Google was ignoring the site because of a "ghost" noindex tag.

What I learned: Even if your index.html is clean, platforms like Netlify that I'm using can inject X-Robots-Tag: noindex headers on preview branches or specific subdomains. I had to audit my HTTP headers to ensure the "production" version was actually indexable.

What’s Next?
I’m looking to add:

State-by-state utility rates (since NYSEG hikes are wild in my state right now).

Vampire power presets for common dorm/apartment setups.

I’d love to hear your thoughts on the UI or any other "invisible" tech costs I should include!

Check it out here: https://costoflivin.org/

Top comments (0)