How it works
under the hood.
The Creative Stack
Nuxt 4
My favorite progressive meta-framework handles the reactive frontend and layout. Nuxt's Nitro server runs the backend scripts. Instead of streaming unrendered pieces, the server code waits for a full response before delivering it to the visitor.
Puppeteer
The Puppeteer client connects to Browserless, which launches a headless Chromium instance on the server. Browserless emulates a real website visitor and captures the network data of the targeted page. The app then measures the actual byte sizes of the response buffers, chopping the data into HTML, CSS, JavaScript, images, fonts, and other assets.
Supabase
I store audit history and page metrics in a Supabase PostgreSQL database. This way, if you're logged in, you can check out your past website scans. (More functionality will ship to motivate this login feature.) Access is secured through Row Level Security (RLS), while heavier calculations are cached to avoid flushing the server with calls.
The Carbon Calculation Pipeline
User Request: The user enters a URL on the frontend.
Puppeteer Spin-up: Nuxt triggers a server-side headless browser.
Data Harvesting: Puppeteer tracks and logs asset network sizes.
Carbon Translation: Raw bytes are passed into the carbon logic formula.
Database Sync: Supabase records the audit for history and dashboard analytics.
UI Render: The frontend translates data into scannable percentage breakdowns.
What's Baking for V2
Let's map out the next iteration to make these sustainability insights tangible!
Framework Detection
The auditor will sniff out if a site is running on Nuxt, Next.js, WordPress, or vanilla code. Instead of generic advice, you will get optimizations feedback for your creative stack.
SSR vs. SPA Analysis
By inspecting the page’s initial server response, we can tell whether a site is rendered on the server or assembled later in the browser with client-side JavaScript. That allows us to give recommendations tailored to how the site actually works, instead of relying on generic performance advice.
Other stuff
Other ideas exist; will look at them in due time.