-
This page uses Yelp API to show gardens near any city that the user inputs.
-
These are some of the flowers that you can grow in your garden. In this picture, we have the flowers lavender and lotus.
-
These are some other flowers you can have, which are chamomile and cattail.
Inspiration
On Friday evening, we looked ahead and saw a long weekend of sleeplessness, poor dietary choices, and general lack of self-care. We wanted to make a web-app to help gamify self-care, so that people can make healthier choices and have fun at the same time.
What it does
Our app has two functionalities. The main one is that you can grow potted plants by taking care of yourself. For instance, when you drink water, you water a waterlily; when you sleep well, you water a lavender plant. When your plants are fully grown, they start blooming and generating coins which you can use to buy more plants! Our second functionality is garden search. By inputting a city, you can find nearby gardens. This function encourages users to go outside and explore nature, another way to nurture your body’s garden!
How we built it
We used HTML, CSS, and JavaScript to run our frontend, and Python to run our backend. We also used the Flask framework to make API calls to the Yelp business API to find nearby gardens. Our art was self-made by Grace Chia, one of our team members, using Microsoft Paint and Krita.
Challenges we ran into
There was difficulty in having the flowers and/or coin states updated across HTML pages, but we resolved the issue with JavaScript's local storage function. Another challenge was implementing a 3D garden object. We wanted to make a clickable object but realized it was more challenging than we thought because of the 3D vectors. Eventually, we were able to implement it but in the future, hopefully, we can make it a clickable object. Furthermore, we were unable to add the 3d object to our final website, which runs on a server, because we did not have time to figure out how to start npm on the server.
Accomplishments that we're proud of
As a first-year team, we are extremely proud of how much we have learned at this hackathon. We were able to advance in our front-end and back-end skills. There were many firsts during this hackathon. For example, we were able to implement an API for the first time with Flask and host our website using Render.
What we learned
We learned how to host a website, use an API, use JavaScript's local storage function, learn about 3D objects, and new features with CSS and Javascript to make our website look more appealing and have better functionality.
What's next for Nurture Nook
NurtureNook hopes to advance its website by adding more plants to grow your garden and more seeds to buy from the store. An ambitious idea we had was to use a ChatGPT API to suggest to people how to start making their own gardens. We also wanted to add more features about the benefits of nature and how to get more active.
Log in or sign up for Devpost to join the conversation.