Faeez Shabbir
Noola Impact cover art

Noola Impact

Client

A web client that turns uploaded energy bills into a clear plan for cutting annual costs.

Role
Frontend design and build. Backend by another developer; I contributed a few changes.
Timeline
2026
Stack
Next.js 16, React 19, Tailwind CSS, shadcn/ui, Zustand, SWR, Stripe Elements
Status
Client

01 / The problem

Noola Impact is an energy cost platform launched in Spain. Building owners upload their electricity and energy bills, AI analyses their consumption, and the platform tells them how to cut their annual costs. The frontend had to make that path feel obvious: upload a bill, understand what it says, know what to do next.

02 / Decisions

  1. Design and build, from scratch

    I designed the interface and built the whole frontend myself on Next.js 16 and React 19, with Tailwind CSS and shadcn/ui as the base so the design system and the code stay one thing.

  2. One door to the backend

    The browser never talks to Django directly. Every API request goes through a Next.js route handler that proxies it on to the backend.

  3. Two kinds of state, two tools

    Zustand holds interface state. SWR owns server data. Payments use Stripe Elements for secure card entry.

03 / The system

The frontend I built

fetchproxiedReact 19 interfaceTailwind CSS, shadcn/uiState and dataZustand for UI, SWR for serverdataStripe ElementsCard details go straight to StripeNext.js 16 route handlersEvery API request goes throughhereDjango backendAnother developer's. I contributeda few changes.StripePaymentsfetchproxiedReact 19 interfaceTailwind CSS, shadcn/uiState and dataZustand for UI, SWR for server dataStripe ElementsCard details go straight to StripeNext.js 16 route handlersEvery API request goes through hereDjango backendAnother developer's. I contributed afew changes.StripePayments
SurfaceSystem
Accent: built by me. Dashed grey: not mine.

04 / Results

  • Live in Spain.