🌱 About the Project

Inspiration

Energy efficiency upgrades can be overwhelming for homeowners. From solar panels to insulation and smart home technologies, it's difficult to know where to start or understand which improvements provide the greatest return on investment. We wanted to create an engaging experience that transforms sustainability planning into an interactive journey rather than a list of recommendations.

What It Does

Our application guides users through a personalized home efficiency assessment, allowing them to provide information about their home, energy usage, and sustainability goals. Using those responses, users can interact with a 3D home simulation, visualize potential improvements, and receive an AI-inspired sustainability report highlighting projected energy savings, environmental impact, and recommended upgrades.

How We Built It

This project was built using a modern React ecosystem:

• React + TypeScript for the application architecture
• Vite for fast development and bundling
• Tailwind CSS for responsive styling
• React Three Fiber / Three.js to power the interactive 3D home visualization and animated particle background
• GSAP for polished interface animations and page transitions
• Recharts to visualize sustainability metrics and projected savings
• React Icons for a consistent visual language throughout the interface

We focused heavily on creating an experience that feels modern, responsive, and approachable while maintaining a clean, eco-inspired aesthetic.

Challenges We Ran Into

One of our biggest challenges was combining several animation and visualization libraries into a cohesive experience. Coordinating React state with Three.js scenes, GSAP animations, and dynamic chart updates required careful planning to keep the application responsive and maintainable.

Another challenge was balancing functionality with user experience during the limited hackathon timeframe. We spent significant effort refining interactions, transitions, and visual polish while still delivering a complete end-to-end workflow.

What We Learned

Throughout the project we gained experience integrating React with Three.js, building reusable component architectures, orchestrating animations with GSAP, and creating interactive dashboards using Recharts. We also learned the importance of designing intuitive user flows and how thoughtful visual feedback can make technical information easier to understand.

What's Next

Future improvements include:

• AI-generated upgrade recommendations based on real energy models
• Personalized ROI calculations
• Utility provider integrations
• PDF report generation
• User accounts for saving and comparing multiple home analyses
• More advanced 3D interactions and real-time simulation updates

Our goal is to continue evolving the application into a practical tool that helps homeowners make informed, sustainable decisions while making the experience engaging and enjoyable.

Built With

• gsap
• react
• tailwind
• three.js
• vite