Dollars to Trees

Inspiration

With the rise of fast-fashion, I wanted to make a web page that gives a useful visualization of the impact the clothing industry has on the environment.

What it does

This application allows users to compare the number of trees needed to offset each dollar that is spent to manufacture clothing by simply using a scroll bar to increase total spend.

There is also a section to educate users on the emissions of constituent gases, as well as a chart that depicts, in kilograms, how much carbon dioxide, methane, and nitrous oxide is produced.

How we built it

I used React as a frontend framework and Bootstrap for creating a responsive web page. I spent a lot of time researching an appropriate, well-documented API and testing out fetch requests. Finally, I launched this application using Vercel.

I started with populating fetched data into my components to build out a basic layout based on a hand-drawn wireframe. I then cycled through building UI features and refactoring to dynamically render content on the page and to keep my code organized.

What's next for Dollars to Trees

• The API is changing its rate limit by April so I will have to build in the calculations used from Climatiq's API into my program.
• This app has the potential to grow since climate data ranges across all industries and there are many ways to visualize it!

Links

Website Repo

Built With

• bootstrap
• react
• typescript
• vercel