Energy Saver is a portfolio demo built with Angular that simulates how much a user could save on electricity by comparing providers. The user enters a monthly bill, sees provider cards with discounts and estimated annual cost & savings, selects one, and confirms via a checkout panel (sticky on desktop). A success toast appears on finalize and the simulation resets.
Angular (standalone components) + Signals state via a lightweight SimulationState store
Zoneless change detection (no Zone.js)
pt-BR currency formatting (monthly, annual, savings)
Responsive UI: light background with gradient accents; input + list on the left, checkout on the right
Provider data loaded from a seed service (EnergyProviderService)
Unit tests with Jasmine: state, services, and components (using spies/stubs)
Energy Saver is a portfolio demo built with Angular that simulates how much a user could save on electricity by comparing providers. The user enters a monthly bill, sees provider cards with discounts and estimated annual cost & savings, selects one, and confirms via a checkout panel (sticky on desktop). A success toast appears on finalize and the simulation resets.
-
Angular (v20) standalone components + Signals
-
Use the state pattern to manage the data state of the application
-
Zoneless change detection (no Zone.js)
-
pt-BR currency formatting (monthly, annual, savings)
-
Responsive UI: light background with gradient accents; input + list on the left, checkout on the right
-
Provider data loaded from a seed service (EnergyProviderService)
-
Unit tests with Jasmine: state, services, and components (using spies/stubs)
Note: This is a non-commercial demo; provider data and pricing are mocked for illustration only.Note: This is a non-commercial demo; provider data and pricing are mocked for illustration only.
