Our website's front page

🌱 Backyard Babylon 🌷

🌎 Inspiration

Every year, around 5,000 deaths are reported worldwide due to flash floods. In the U.S alone, losses due to flash floods average close to $8 billion dollars a year. Flash flood, a common natural disaster that has been increasing in frequency due to the effects of global warming, is a global problem that needs to be dealt with ASAP. Our website promotes a well-known, but under-utilized solution to this global problem: Home Rain Gardens, which have also been proven to help conserve water, enhance biodiversity and improve local ecological systems. Anyone can create a rain garden in their backyard as rain gardens are usually low cost, low maintenance, and also don’t require a lot of space.

🌿 What our website offers

Our website provides the tools and the information needed for anyone to start building and maintaining a rain garden in their own backyard. Users can use our site to:

Learn more about the benefits of home rain gardens.
Use a well-researched algorithm to estimate the cost and effectiveness of a rain garden specifically for their backyard.
Get a list of recommended plants based on their local climate.
Design their own garden with an interactive grid system.
Assess their plants’ health simply by taking a picture.

📚 Lessons

Although this hackathon journey has been quite short, our team has learned multiple valuable lessons:

Through our research we learned about an easy and valuable way to contribute to the fight against climate change, saving lives from flash floods and improving local ecosystems. We're going to set one up in our backyard next weekend!
How much we can accomplish and learn in a short amount of time if we set our mind to our goal and work together as a team.
How being flexible in software development can maximize effectiveness and ensure a viable product.
How to use useful tools that can be applied to numerous projects. Every member of our team has learned something new, mostly from each other.

🔨 How our project was built

Next.js: the main web framework we used for our website.
Tailwind: an open-source CSS framework we used to make our website looks as nice and as clear to navigate as possible in a short amount of time.
MongoDB: where our scraped dataset of 65+ high water-absorbent plants (with multiple features such as image, ideal moisture, sunlight exposure, size, etc.) resides.
Python & Pandas: tools we used to help us scrape the internet for information on plants, clean & transform the scraped data, and populate our database.
Plant.id API: the REST API which provides us information on plants and their health status based on images.
A lot of research to find the best information and guidelines on how to start creating a rain garden.

🚧 Challenges

The Tailwind framework seemed quite useful, but utility classes can get quite messy, so a lot of odd errors happened and extra time was spent on debugging.
We initially planned to create a drag-and-drop grid system where users can design their own garden based on the recommended plants, but this was proven to be very challenging and complicated as it requires sophisticated UI manipulations.
A lot of working components behaved differently and caused errors as we tried to move quickly to other components to finish our website in time. The time constraint was tough and we are not used to this since this is our first hackathon.

🌠 Takeaways

We had a great time with this project and with the hackathon as a whole. The time constraint proved interesting because we had to organize, brainstorm, and get clever very quickly. There were hurdles to overcome, but we worked together efficiently to address them--our team got much closer in a professional context over this weekend. It was a tremendous learning experience and we're excited for the next one!