Foodprint

• 

  Landing

• 

  ways to practice sustainability

• 

  statistics

Inspiration ✨

In recent years, climate change and the associated negative effects have risen exponentially. Climate change and rising global temperatures put agriculture, human health, water supply, and more at risk. Since the food and agriculture chain is such a huge contributor to carbon emissions, I was inspired to create a platform to educate others about this problem.

What it does 🔨

Foodprint is a website built to educate users about making sustainable food choices. Information is presented in a visually appealing manner. In the statistics section, the numbers are meant to stand out to the viewer. At the bottom, there is a series of cards showing examples of sustainable practices to follow.

How I built it 👩‍💻

I built the website in React using Chakra UI. For the ui design, I followed a minimalist style to make the site less distracting for the user.

Challenges 🔴

Since it was my first time creating a website in React from scratch, I was pressed for time as I spent a lot of time reading the docs. When deploying it to Vercel, I encountered several build failures. In the end, I figured out that I had to remove packages that were defined but never used.

What's next for Foodprint 👀

I hope to add a "dark mode" feature to the site for better user experience. In addition, I would like to add more pages linked to the cards that allow the user to further explore the methods suggested. For example, each card would link to resources that gave detailed instructions and explanations. A few small changes I would implement are subtle css animations effects on the components to make the website appear less static. Lastly, I think a carbon foodprint calculator would be a great addition because it will enable the user to engage with the site rather than just read the content.

Built With

• chakra-ui
• create-react-app