EnviroPact

Home Page
Home Page 2
Events Page
Create Event
Signed In Event View
Contact Page

Inspiration

Upon encountering the theme "Stages of Life," we were reminded of a fragile, helpless sapling—one that possesses the potential to flourish into something truly beautiful but lacks the opportunity to do so. This vision inspired us to champion the preservation of our shared home: the Earth. Together, with the collective efforts of our local communities, we can create a meaningful and lasting impact.

What it does

EnviroPact is a web application that behaves as a community focused event planner for environmental cleanups. Users can create, join, and search events in their area, RVSPing with their Google Account, all to find others and work towards the common goal of improving our environment.

How we built it

For our frontend, we built EnviroPact using React.js, Tailwind CSS, and the AntDesign and Framer Motion libraries. For the backend, we utilized JavaScript, Firestore as a database, and Firebase as a BaaS and authenticator.

Challenges we ran into

One of our main challenges was using Git, as this was our first time using multiple branches in a project. What should have been a relatively simple process led to a lot of merge conflicts, resulting in several branch resets. Our very limited knowledge on building projects and hackathons also slowed us down, with a lot of the first day being spent on just figuring out a roadmap, and a chunk of the second day being used up on learning brand new tools.

Accomplishments that we're proud of

We are proud of how far we have come in such a short timespan. With no hackathon experience, and some of us with no project experience, it took a lot of learning as we go and being able to read docs to continue our progress. We learned and used languages and frameworks we have never learned before, and it was extremely satisfying to see our progress and learn so much while simultaneously making something valuable with friends.

What we learned

With this being the first hackathon for all four of us, we learned so much about what goes into designing and implementing a project and the tools needed to do so. We expanded our toolset as courses do not give you this real-world experience, and we now have a better understanding going into future projects.

What's next for EnviroPact

For the future, we plan on expanding the location and availability of the events, having them relative to the user's area. We would also like to expand how you search for events, as well as expanding the home page to feature specific events based on proximity.

Built With

antdesign
figma
firebase
firestore
framer
javascript
react
tailwind

Submitted to

SASEhack Fall 2024

Created by

In the EnviroPact project, I contributed to both the back-end and front-end of the events page. I implemented Firebase authentication for secure user access, set up Firestore for managing event data, and connected it seamlessly with the front-end. Additionally, I developed my first reusable React component for event cards.

Kavi Patel
I worked on the backend using JavaScript and Firebase. I mainly worked on implementing the functions to move data and documents to and from our Firestore database accurately

Adrian Moreno
In this project, I used front-end tools such as figma to create the design. I incorporated component libraries such as antd, material ui, and lucide react to build the UI for our website.

Stanley Ke
I contributed to the front-end. I primarily worked on going from mockup to website, using React.JS, Tailwind CSS, and the libraries AntDesign and Framer Motion.

Logan Bjork