Inspiration
We were inspired by the environmental track. We realized the importance of spreading awareness about sustainability and taking care of Mother Nature. Most pre-existing apps or websites make the environment seem boring and unexciting, so we want to put a twist on supporting nature!
What it does
We decided to use gamification to motivate environmentally friendly habits while penalizing bad ones. You can easily create an account on Petal and keep track of your progress with a virtual flower. The flower grows or shrinks depending on your deeds. The dashboard also records the last deed logged and randomly generates a fun fact about the environment.
How we built it
We used Figma to create a mock up of our project and the individual pages. Next, we used Figma’s Inspect feature to help build the front-end with HTML and CSS.
For the back-end, we used the Python framework, Flask, to support the functionality. To store user information, we used a SQLite database.
Finally, we used Git to track our commits.
Challenges we ran into
Some of the database design was complicated to come up within the short time span.
Another challenge was that when the flower was at max growth and the user inputted a good deed, the flower would return to the seed state. Similarly, when the flower was a seed and the user inputted a bad deed, the flower would go to max growth. We were able to fix this by carefully peer reviewing and walking through the code.
This inspired us to improve our testing further.
Accomplishments that we're proud of
We’re proud of the aesthetics and overall UI of the project. We also think that our idea is something that could be used in real life to help get people interested in taking care of their surroundings.
Finally, we are also proud that our project is fully functional and stores the unique progress for each user.
What we learned
We learned how to better use Flask and Figma to improve the cohesion between front and back end. Both of us were really new to Figma, so we learned a lot about how to use the design tools and find the appropriate CSS attributes for each element. In Flask, we learned how to integrate the front and back-end together.
What's next for Petal
In the future, we want to expand from a webapp to a mobile app. This could allow us to record step data to automatically log good deeds (such as walking instead of using a car).
"Put the petal to the metal!"
Log in or sign up for Devpost to join the conversation.