Inspiration

Wildlife conservation refers to the practice of protecting wild species and their habitats in order to maintain healthy wildlife species. In the light of the problems that animals are facing in the 21st century, we came up with an all-inclusive hack that provides multiple avenues to safeguard our wildlife and also gain knowledge related to our ecosystems and our endangered species in the process.

What it does

  • The application features a carousel-based information display on multiple endangered species on our planet in the 21st century.
  • It also features a working payment gateway to accept donations from the general masses who are willing to support the planet through financial support.
  • This application features a working blog page that is constantly updated with stories that inspire and give hope.
  • It also includes a facts section that is updated with quirky facts related to wildlife and our global ecosystem.
  • It incorporates a membership section that includes an approval-based membership form which gives access to exclusive Save-Thy-Planet newsletter and other privileges.
  • It allows individuals report cruelty against animals through a simple form that access the exact coordinates of the animal abuse (synonymous to the location of form submission).
  • It also renders all instances of animal abuse coordinates on a globally accessible map which can be utilized by animal activists and authorities to apprehend the perpetrators without delay.

How we built it

My application utilizes the following tech stack:

Frontend

  • HTML / CSS: Simple mark-up and styling for Save-Thy-Planet application.
  • EJS Templating Engine: Backend templating engine to render frontend from MongoDB Atlas.
  • Vanilla JS: Plain JavaScript without any additional libraries.

Backend

  • Node.js: JavaScript runtime built on Chrome's V8 JavaScript engine.
  • Express.js: Minimal and flexible Node.js web application framework that provides a robust set of features for webapp development.
  • MongoDB Atlas: Primary database to store authenticated users and violation reports.

Frameworks / Libraries

  • Bootstrap: Minimal JS Framework for speedy frontend setup.
  • Passport.js: Base library for Google OAuth.
  • Passport-Google-OAuth: Used to set up Google Oauth inside our application.
  • Mongoose ODM: Used to interact with MongoDB Atlas Cluster.
  • Razorpay API: Used to set up payment gateway inside our application.
  • JavaScript Maps API: Renders the global map with violation markers inside our application.
  • HTML Geolocation API: Accesses current location of individual submitting the violation form on the backend.
  • Twilio SendGrid API: Enables working contact form and membership approval form submission.

Challenges we ran into

  • Faced a lot of issues with setting up passport.js for Google Oauth.
  • Faced difficulties integrating Google Maps API inside our web application due to async nature of JavaScript.
  • Faced issue with logging form data to MongoDB but sorted it out quickly.

Accomplishments that we're proud of

  • Successfully managed to build most of what we were planning to build in our ideation stage.
  • I'm proud of building an end-to-end full stack application from scratch as I never thought we had the potential to see the application to its end.
  • I'm proud of building an application that has such social relevance concerning wildlife conservation.

What we learned

  • Learnt to integrate an API inside our full-stack application.
  • Understood and learnt about storing OAuth sessions in MongoDB.
  • Learnt how to set up a working payment gateway using Razorpay inside our application.

What's next for Save-Thy-Planet

  • Adding chatroom functionality to interact with like-minded individuals.
  • Delving more into membership privileges.
Share this project:

Updates