Team: TreeAppGang at Backyard Hacks Hackathon!

Inspiration: Tree Huggers!

Our motivation for building this website was to encourage individuals to go outside and have more DIRECT experiences within nature. As one of our team members (Grace) was familiar with tree identification and the processes that went to differentiate between different trees, we decided to make a tree identification website that would help users distinguish between a small selection of trees! By learning about the different parts of a tree such as the leaf, the bark, the fruit it produces, users of our website will be able to discover amazing new fun facts about the trees that grow all around us. Soon, everyone can try to develop tree identification skills (and hopefully become a tree ID expert like Grace) right in their backyards!

What it does: Our Hackathon Tree Explorer...

So as a user, if you go through our tree explorer website, you will be able to explore trees from 3 areas: Eastern US, Western US, and Nigeria. We built this website with the idea in mind that the user would have a tree in front of them, one they don't know too much about, and would use our website to try identifying what tree they are observing.

In each region, the website will guide you through the process of looking at various features of a tree (the specifics of the leaf/leaflet, fruit, bark, etc) and will help you identify the tree that you are looking at that has those characteristics. As you go through this process, you will end up at the page with the name of the tree you were desperately trying to find!

We took a few selections of trees from each of the regions we are from (Maryland, Florida, Texas, Nigeria) and this website was able to come to life!

How we built it

So the file structure of this website is split into 4 main components:

  • the main home page called index.html

  • The tree region of Nigeria

  • The tree region of Eastern United States

  • The tree region of Western United States

with each subset kept separate from each other, we were able to come up with a format that would allow the specific tree regions to link onto individual pages of the trees the user was trying to identify.

The way the tree finding process works within the website is more of a question/answer format almost like a flowchart; guiding the user to find the tree they are looking for. Although it is not an exhaustive list for all of the trees, it has a few basic ones that allows for quick exploration!

Challenges we ran into / Accomplishments we are proud of :D

After we developed our idea, we realized most of us had limited to no experience with website development! We all had to somewhat start from scratch to figure out the process of developing the website. We didn't realize that there was a structure needed to the website to have it function correctly, we weren't sure how to direct the user of the website to find the individual trees, and it was crazy! Also, we had the issue of making the look somewhat presentable.

It was a long trial and error process, with lots of web searching and hair pulling and timezone issues but WE DID IT!

Honestly was a huge success for us with most of us barely understanding the difference between .html files and css files.... XD

What's next for TreeFinder!

We still have alot to go, but we are proud of what we have gotten through in this short amount of time; hopefully we can keep diversifying the tree collection and add in more species from different areas!

Hope you all like it!

Built With

Share this project: