Inspiration:

We'd love to promote a more sustainble way for commute/transportation by updating some key features of the existing map.

What it does:

We created a website that has the following features:

  • It calculates carbon footprint for each trip
  • It explicitly outputs the carbon footprint used/saved for each type of transportation and recommend a greener transportation (while at the same time efficient)
  • If the users choose our recommended way of commute, they will get random surprise (sun/water/soil...)
  • Users could use the 'surprises' to nurture a tree -- see a tree growing because of their greener choice
  • It also records routes users've taken and will output a yearly report (visualize your trips!)

How we built it:

We designed and prototyped using Figma, and mainly built it using React (tsx). We collaborated via Google docs, Google slides, Github

Challenges we ran into

Since we are all new to web design, we've encountered challenges like:

  1. How to set up the correct and linking website navigation bar
  2. How to get and fetch users input so that we could output routes and transportation options
  3. How to set up a map using token and api (still working on...)

Accomplishments that we're proud of

The Growing Tree

What we learned

We learnt React basics and Figma (all from beginning), which we pretty proud of.

What's next for EcoWanderers

We're going to keep working on building the website to match with our goals and expectations, e.g.

  1. Get the map work
  2. Get the 'origin'/'destination' work (accepting user input)
  3. More adds on for our "Growing Tree" game

Built With

  • figma
  • js-cookie
  • mapbox-gl
  • react
  • tsx
Share this project:

Updates