Inspiration
EcoShare was inspired by the desire to make environmental action more accessible, engaging, and community-driven. Recognizing that many people want to reduce their carbon footprint but often lack the tools, motivation, or community support to track their progress and celebrate achievements, I set out to create a platform that bridges this gap. EcoShare provides a fun, interactive space where users can visualize their impact, join challenges, and connect with like-minded individuals, making sustainability both rewarding and social.
What it does
The application empowers users to track their environmental impact through a dynamic, growing tree visualization that responds to their logged actions. Users can log eco-friendly activities such as planting a tree, using public transport, or reducing plastic usage, and see their impact score increase in real time. The platform also displays personal metrics like carbon footprint, actions completed, and achievements unlocked. Beyond individual progress, EcoShare fosters collective action by allowing users to participate in community challenges, events, and groups, and to receive notifications and suggestions for new ways to improve their environmental footprint. The ability to browse and join groups further encourages users to connect with others who share similar sustainability interests.
How I built it
EcoShare was built using React and Next.js to ensure a fast, modern, and responsive user experience. For the interactive tree, I utilized react-three-fiber and three.js, which enabled the creation of a visually engaging, animated tree that grows as users log more actions. State management and persistence were handled with React hooks and localStorage, allowing for offline use and easy resets. The user interface was crafted with a component library to provide polished cards, tabs, dialogs, and toasts, ensuring accessibility and a clean look. Community features were simulated with mock data and popups for challenges, events, leaderboards, and groups, creating the feel of a vibrant, interactive community even without a backend.
Challenges I ran into
Throughout development, I encountered several challenges. Creating a tree that looks natural and grows smoothly based on user actions required significant experimentation with geometry, instanced meshes, and animation. Ensuring reliable state persistence and synchronization between the UI and localStorage was also tricky. Achieving UI and UX consistency across dialogs, popups, and navigation, especially for different devices, took several iterations. Additionally, designing the app to work seamlessly offline, without authentication or internet connectivity, while still feeling interactive and rewarding, was a unique challenge.
Accomplishments that I'm proud of
Despite these challenges, I am proud of several accomplishments. The interactive impact tree provides immediate, tangible feedback for eco-friendly actions, making sustainability fun and rewarding. The app is user-friendly, accessible to anyone, works offline, and allows users to reset their progress easily. Even without a backend, the app simulates a lively community with challenges, events, and groups, encouraging engagement and friendly competition. The clean, modern UI makes it easy for users to get started and stay motivated.
What I learned
Building EcoShare taught me a great deal about 3D graphics in React, particularly with react-three-fiber and three.js, as well as about state management and synchronizing UI with persistent data. I learned how visual feedback and gamification can motivate positive behavior, and I gained experience in building features that work both online and offline, gracefully degrading when certain services are unavailable.
What's next for EcoShare
Looking ahead, I plan to expand EcoShare by integrating real user authentication and backend storage for user data, actions, and community content. I aim to enable live community features such as real-time challenges, group chats, and event participation, and to develop a mobile version for on-the-go impact tracking. I also want to expand the library of eco-friendly actions, add personalized suggestions, enable social sharing of achievements, and provide deeper analytics and insights into both personal and community environmental impact.
Log in or sign up for Devpost to join the conversation.