seasfor.us

Demo video: https://youtu.be/YeefWeSYLUQ

Background

There are 5.25 trillion pieces of plastic waste estimated to be in our oceans. 269,000 tons float, 4 billion microfibers per km² dwell below the surface. This alarming number of pieces of plastic damages the marine life in our ocean.

This platform will help the #TeamSeas initiative started by Mr. Beast and Mark Rober, to be the most-impactful cleanup project of all time. #TeamSeas will work with Ocean Conservancy and its partners to remove millions of pounds of plastic and trash from beaches all around the world. They’ll also send professional crews to clean up some of the most iconic, vulnerable ocean spaces.

With this already awesome initiative, we create the #SeasForUs platform that will speed up the process of finding clean-up events in your local area. We want it to be as easy as possible for people to contribute and help #TeamSeas clean up coastal areas.

You can start by looking at cleanup events in your local area, and join them. You will directly help at your local beaches to clean up all the trash that we can pick during the time of the event. Then, you can post your activity to the post-board so you can share your moments of contribution to the community.

To help you spark up the motivation to come and clean up the events, we also provide a Leaderboard that will rank how many events you've been attending.

What we learned

For some of us, this is the first hackathon we went to, and we are really pumped up that all of it must be done only in 36 hours. Having a limited time makes us work faster with a more efficient strategy.

We are utilizing GitHub Issues as our project management platform. We started by listing all of the features that we want to build and develop gradually as we work parallel with front-end and back-end applications.

In this application we are focusing on the User Experience as much as possible so we take a further effort of developing UX enhancing features like loading skeleton and straightforward UI

How we built our project

#SeasForUs is a web app using Laravel as the back-end framework. Data from users is sent to the server and stored in a MySQL database. The frontend was created using Next.js and TypeScript to provide a good developer experience as well as other advantages like server-side rendering and image optimization

Tech Stack

Frontend:

Next.js
TypeScript
Tailwind CSS
Zustand
React Hook Form

Backend:

Laravel
Auth0

Challenges we faced

This is the first time we are using Auth0 as the authentication provider. Although Auth0 recommends using the same framework with the frontend, which is using Node.js, we tried to use Laravel as our back-end framework. We have some hiccup along the way but it is solved and works really great. Auth0 is fairly simple to use with awesome integration with Google OAuth. It is painless and really robust.