SeasForUs | theodorusclarence.com

Short Explanation

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.

Project Goals

This project aims to create a space so people all over the world can join clean-up events based on their nearest beach. This website has several functionalities which are:

Authentication using Auth0
Browse events and provide a filter to help them find one
Join the event
Post an activity after they did the clean-up
Leaderboard to spark up motivation

Tech Stack Used

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

As a challenge from MLH, we are also using Auth0 for the authentication and use google OAuth for the provider. Auth0 provides us with the name and profile picture which we show on the website and looks really neat.

We also use Zustand & SWR for the store and fetching strategies so we can utilize the stale-while-revalidate which uses cache to make the whole experience feel snappy.

App Demo & Screenshots

Pro tip: click the image to make it full screen

Spotlight

We Won!

We actually won 2 categories which are

Sustainability: Runner Up
Best Use of Auth0

We won a $150 cash prize and some swags 🤑. This is actually my first time winning a hackathon (last hackathon I only won the Deloitte Challenge), and I'm really happy about it. In the uni, I'm not the type of person that likes to compete in several competitions. Hackathon is an exception, it is super fun to create an application at such a fast pace while still considering the quality

Demo Video

Here is our submitted video, you can see all of the features here.

The Problems and How I Deal With It

Definitely, time is a problem, but Rizqi (front-end) and I, sprinted all of the UI and layout in just about 12 hours, we constantly work in a Zoom call so the process is fairly quick. I also use my Starter Repo which helps a lot to get it started.

We also have some quirks about authentication with Auth0, because it is normally used with Node.js environment, and our backend team is using Laravel, so they need some time to implement the features.

Lessons Learned

Attribution

Theodorus Clarence: Front-end and Design
Rizqi Tsani: Front-end and Design
Ishaq Adhel: Back-end and Infrastructure
Muhammad Zhafran: Back-end and Infrastructure