EcoTrace Eco-Habit Tracking Application

Inspiration

What it does

How we built it

The inspiration for EcoTrace - Sustainable Habit Tracker stemmed from a growing personal awareness of climate change and the struggle many individuals face in consistently adopting eco-friendly practices. I noticed that while many people want to be more sustainable, it can be hard to track their efforts, see tangible results, and feel part of a larger movement. This often leads to a sense of overwhelm or a lack of motivation. I wanted to create a tool that not only simplifies the tracking of green habits but also gamifies the process and fosters a sense of community, making sustainability more engaging and rewarding. The idea was to transform abstract environmental goals into concrete, trackable actions, empowering users to see their cumulative positive impact.

What I Learned Building EcoTrace with Bolt.new was a fantastic learning experience, particularly in the realm of rapid prototyping and leveraging AI for development. I learned the immense power of incremental prompting: breaking down a complex application into smaller, manageable features and guiding the AI step-by-step. Trying to prompt for the entire application at once often led to less coherent or complete code.

I also gained practical insight into the importance of clear and explicit instructions when working with AI code generation. The AI doesn't infer common sense; every detail, from file structure to component interaction and styling, needs to be clearly articulated. Furthermore, I learned how to effectively use frontend and backend separation even in a rapidly prototyped environment, ensuring the React components correctly consumed data from the simple Express API. The process highlighted how AI tools can significantly accelerate the initial setup and boilerplate generation, freeing up time for more complex logic and design considerations.

How I Built My Project I built EcoTrace using Bolt.new as the primary development environment, leveraging its AI-powered code generation capabilities.

Initial Setup & Architecture: I started by prompting Bolt.new to set up the basic React frontend and a Node.js/Express backend. I specified the routing structure and requested a simple navigation bar and footer.

Dashboard Development: Next, I focused on the main dashboard. I prompted the AI to create components for displaying a welcome message, impact points, and a progress bar. I also instructed it to fetch sample habits from a mock API endpoint I defined in the Express server.

Habit Management: I then moved to the habit management page, prompting for a list display of habits, a form to "suggest new habits," and buttons to "add to my habits," all with basic frontend functionality.

Community & Profile Pages: I iterated by adding the community challenges section with hardcoded challenges and a basic leaderboard using mock user data. Finally, I built out the user profile page to display placeholder user information and tracked habits.

Iterative Refinement: Throughout the process, I continuously refined the prompts. If a component wasn't exactly right, I would give specific instructions to Bolt.new, such as "Adjust the styling of the Navbar to use flexbox for alignment" or "Ensure the 'Mark as Done' button in Dashboard.js changes its text to 'Completed' when clicked." I focused on consistent styling and ensuring basic responsiveness. The integrated deployment with Netlify also allowed for quick previews of the live application.

Challenges I Faced The development process, while accelerated by AI, wasn't without its challenges:

Over-prompting: Initially, I tried to include too many instructions in a single prompt. This often led to the AI missing details or generating less accurate code. I quickly learned to break down requests into smaller, more granular steps, which significantly improved the AI's output.

Maintaining Context: At times, the AI seemed to "forget" previous instructions or stylistic choices. This required me to occasionally reiterate global styling preferences or remind it of the overall application structure. I found that explicitly referring to component names or file paths helped in maintaining context.

Debugging AI-Generated Code: While the AI generated most of the boilerplate, minor logical errors or integration issues between components sometimes arose. Debugging these required understanding the generated code and making manual adjustments, which could be trickier than debugging self-written code as the AI's logic might not always be immediately intuitive.

Limited Specificity: For highly custom UI elements or complex interactions, the AI sometimes struggled to produce exactly what was desired without very detailed, almost code-level instructions. This meant that certain features required more manual coding or very precise prompting to get right.

Despite these challenges, Bolt.new significantly reduced the development time for EcoTrace, proving to be an invaluable tool for rapid prototyping and bringing an idea to life quickly for the hackathon.