Crown Energy Savings Calculator

• 

  A modern, responsive web application for calculating potential energy savings

• 

  Results page

• 

  Interactive scenario visual to show savings over time

• 

  Quick and easy CTA to send a warm lead to the sales team

Inspiration

South Africa’s persistent power outages and rising electricity tariffs create daily uncertainty for homeowners, businesses, and industry alike. I wanted a simple, embeddable tool that turns confusing spreadsheets into an instant, personalised savings snapshot—while seamlessly handing warm leads to my client, the Crown Technologies’ sales team. This client, a sustainable energy local business, had very low conversion rates on their website as people did not want to complete their lead form. I knew they need a more valuable lead magnet. The Hackathon was a great way to test what innovative lead magnets can be produced through this technology.

What it does

A modern, responsive web application for calculating potential energy savings with Crown Technologies energy-efficient solutions.

Advanced Calculator

• Real-time input validation with helpful error messages
• Dynamic calculations based on building type and location
• Interactive savings projections with 10-year timeline
• Mobile-optimized interface with touch-friendly controls

The form includes comprehensive validation with real-time feedback:

• Required field validation
• Data type and range validation
• Building-type specific validation
• Visual error indicators with helpful messages

The savings chart includes:

• Hover/touch interactions for detailed information
• Mobile-optimized touch events
• Accessibility features (keyboard navigation)
• Visual distinction between payback period and pure savings

How we built it

• Frontend: React 18, TypeScript, Tailwind CSS
• Build Tool: Vite
• Icons: Lucide React

Challenges we ran into

• Learning how to interact with Bolt.new – The application didn’t always understand what we wanted, so we had to be extremely specific.
  
• Segment-aware copy – Fine-tuning language so each audience felt spoken to without ballooning the bundle size.
  
• Enhance Prompt function - This function sometimes gave a very different instruction to what I wanted. I had to double check it all the time.

Accomplishments that I am proud of

• First Time Coder Creating my first ever app/calculator and entering this competition as a Strategist and not a coder. I learned so much and had such fun! I am definitely hooked : )

What I learned

• How to vibe-code and prompt in a way that gets good results.
  
• Creating a project brief first produces a solid first version you can iterate on.
  
• Building tools for clients is much easier than imagined.
  

What's next for Crown Energy Savings Calculator

• Dynamic ROI charts – Visual pay-back curves to deepen engagement.
  
• Battery-only and hybrid scenarios – Provide side-by-side comparisons for prospects.
  
• Automatic proposal PDFs – Generate a branded quotation on the spot for reps to send within five minutes of the call or email.
  
• Predictive maintenance insights – Use anonymised data to forecast inverter or battery health and up-sell service and maintenance contracts.
  

Built With

• openrouter
• supabase
• vibe