Go Touch Grass

Want to learn more about different plants? Our interactive website allow you to become a botanist. Capture plants, catalog them, and learn fun facts all on one website.

Comment

Inspiration

Biodiversity is an underappreciated field of study. 45% of plant species seems to be on the verge of extinction. Thereby, we want to allow the younger generation to interact with the environment even more. Because while near extinct organism are still alive, it is best to study them as much as possible. Afterall, nature is still a big mystery to us.

What it does

The website is designed to be an interactive educational game. The user is able to upload a picture of a new plant they find. To identify the plant, a databased is utilized to find a matched to the picture. Information card will popped up each time a new plant is collected. The end goal is to collect as many plants as possible to unlock achievements and badges. The unique plants they find will be stored in their own virtual greenhouse, a visual representation of all the different plants species.

How we built it

To build the website, we used HTML, CSS, and Javascript. Then by utilizing an API (Plant.id by kindwise), we were able to analyzed plant databased. Finally, we also used the leaflet API.

Challenges we ran into

Our main challenge was navigating GitHub and API. Many of the members in our team were new to API. Therefore, we had to spend a lot of time understanding and implementing the API into our website. In addition, we had lots of technical issues with Git. Although Git is useful, we only knew the basic commands and when a problem arise, we were unprepared to deal with it. There was a lot of connections issues in trying to share projects and update the code.

Accomplishments that we're proud of

We are proud of our integration of the dataset. Datasets typically possessed an abundance of information that is not easily accessible to the public. Even if it is, it is not intuitive enough for non-researchers. Thereby, our ability to condense the information allowed for the data to be more easily digestible. We are proud to be able to expose younger generations to the importance of preserving nature and understanding our environment.

What we learned

During our development process, we developed a greater understanding of how to use HTML and CSS. By focusing a lot on the interface, we needed to truly understand the functions of CSS. More importantly, this help us become better web developers by branching our with new functionalities through API.

Built With

Share this project:

Updates