While many people may have a surface level understanding of what “climate change” and “environmental issues” are, what these actually constitute are often neglected or desensitized, leading to a lack of environmental literacy. It can be overwhelming to start learning about issues in the environment. Additionally schools may not have the resources or time necessary to cover these topics in detail. flowerish promotes sustainability by motivating users to make easy, more environmentally-friendly decisions throughout the day.
What it does
flowerish promotes sustainability by motivating users to make easy, more environmentally-friendly decisions throughout the day and also giving them easy access tools and resources for learning more. It provides content in three different categories (with more to come ;) ) – personal sustainability tasks, education resources, and resources for activism/actions that users can take.
The user starts off with a turtle, alone in an oceanic ecosystem. The user can add species by completing task “cards” that range across actions like educating themselves (articles, podcasts, books, etc.), practicing individual sustainability habits, signing petitions, and more! Users can view their completed cards to refer to their past achievements. With every card completed, a new species/habitator is added to the ecosystem.
How we built it
We built flowerish using React.js, Material UI, react-router-dom, and mobX. We used React to create our screens and the “tasks cards”. We used M-UI components to enhance the user experience, and react-router-dom to handle the urls of our pages. Lastly, we used mobX to handle global state across different files.
Challenges we ran into
For the majority of our team members, it was their first time using React.js. In a weekend, that was definitely a steep learning curve! There were also some challenges in trying to host the app locally, but as a team we eventually figured out how to get everyone the software they needed to run it.
Finally, a virtual hackathon presented unique challenges for time management, communication and collaboration. We tried to mitigate this by using the VS Code Live Share extension, Github, and Discord.
Accomplishments that we're proud of
We're really proud of putting this together in less than two days and with less than ideal amounts of sleep! (Ideation took time). Additionally, we're proud of the great graphic work and having team members learn about React.js at lightning speed.
What we learned
We learned a lot about React.js and Material-UI, including (for many team members) how to create React components and other React-specific syntax elements. In pulling together resources for education, activism, and personal sustainability tasks, we ourselves learned a lot more about climate justice, environmentalism, and race within the green movement.
What's next for flowerish
We would like to add more chapters as well as the ability for users to suggest chapters. We also hope to incorporate Firebase, allowing users to make their own accounts. In the future, we’d like to turn Flowerish into a mobile game app to make it even more accessible to our user base.