The Trees

Where Money Grows on Trees

Comment

Inspiration

There's a lot of people in the world who want to help the environment. But how do you get them all working together? Picture yourself as someone who suddenly wants to donate to, say, ocean cleanup. How do you get started? How do you know which charities are actually charitable and not just skimming off your pockets?

We created 🌳 The Trees 🌲 to solve these problems.

What it does

The Trees is a charity hub where you donate to environmental goals, called trees, by attaching "leaves" to them. That means:

  1. You can see what to donate to. What are the environmental issues today that actually matter? Here, you'll find out.
  2. You can see who to donate to. Which charities are trustable? Our website automatically redirects you to them quickly and efficiently.
  3. You can see who's donated before! From a single individual to a large corporation, anyone who donates through The Trees will have a leaf created for them, attached to the tree they contributed to. Over time, trees will get more extensive and more vibrant. See which megacorporations actually care, and which of your friends have helped. In fact, these recorded logs of action are perfect for...
  4. You can share with your friends. Philanthropy is fun, but getting likes for it is an added bonus. By recording and remembering leaves in a database, our website makes sure your donation is recognized, and shareable, forever.

How we built it

Front End: HTML, CSS, JS, React ⚛ Middle End: Axios Back End: MongoDB

Other Tools: Figma

Challenges we ran into

  1. Trying to develop a clean art style: as neither of us are talented artists, we had to use a combination of Paint, Figma, helper JS scripts, and online editors to create a working art style.
  2. Inexperience with React's DOM tools: It was quite a mess trying to code CSS properties well to create dynamic-ish pages using React's limited toolset. We wonder if there are other frameworks out there that might work better.
  3. Finding a unique project idea: Environment is a common hackathon topic, so the challenge right out the gate was finding an idea that wasn't completely derivative. We hope we found something interesting in The Trees.
  4. Learning and coding React at the same time: one of us was actually completely new to React, so they had to learn it while writing code for the project.

Accomplishments that we're proud of

  1. It's a full MERN app, with a working front and backend, along with a REST API between the two!
  2. Lots of wrestling with CSS and the DOM to get things to render properly.
  3. A fairly coherent palette and art style, if a little basic.

What we learned

  1. The MERN stack!
  2. React: again, one of us was actually completely new to React, so this was definitely a fun tool to add to the toolbelt.

What's next for The Trees

We hope to finish a fully functional and polished version of The Trees and post it online to share with some friends and maybe distribute it on a larger scale.

Side Note: We ran into some errors deploying the frontend onto git, so only the backend code has been linked.

Share this project:

Updates