Surf Or Pay | Devpost

Inspiration

"Bro, I have to watch 5 lectures over the weekend. Die die must do. If I don't... I'll.. I'll pay you $20." "For real?" "Umm..."

These are real conversations we have had in our group, filled with chronic procrastinators. Two of us actually started a scheme once where we paid our third groupmate $20 if we didn't finish getting our planned. But unluckily for us, our friend was too dang nice, and allowed us way too many extensions and concessions😔. Naturally, we didn't end up finishing our tasks on time...

We needed a cold, unforgiving system, just like our parent's belt when we were younger. But what's the next best (and legal) alternative to keep undisciplined university students in line? 💸Empty wallets.💸

Thus, the idea for Surf or Pay was born!🌊🦈

What it does

You either stay afloat with your tasks, or your friend appointed as your loan*shark* GETS YOUR MONEY! Surf or Pay lets you add all the tasks you have to do, assign a forfeit sum of money to each task, and assign it to a friend you add.

If you complete your task in time, your money is safe phew.

But if you don't... Owe money, pay Money.

Our app's interface keeps track of all these tasks and the amounts you've promised. There's no way to get rid of the debt you've collected, unless you've been disciplined enough to stick to your deadlines!

Feature 1: My Ocean (instructions)

This is just the home instructions page on how to use our app, to orient users on how they can get started.

Feature 2: Different modes to owe and collect debt

Users may want to have the app for various purposes - keeping themself on task, as well as perhaps profiting off of a lazy friend and earning free money.

Surfer mode: When you click this in the sidebar, you can access your tasks list to view every single task you've ever made.

You can only delete the tasks you've completed within the deadline, which means if you procastinated too much, the task and amount owed will be there on your record forever, and your friend has every right to claim money from you.
You can add new tasks and set someone from your friend's list as your assigned "Shark" 🦈, who will be collecting your debt if you don't do your work. You can also set your forfeit amount and deadline.
Once you finish a task, you have to click "Submit" to notify your Shark that you did your work.

Shark mode: Here, you can see all your prey... I mean friends' tasks that are pending your validation/ are overdue.

You must validate the tasks your friend has submitted to you in order for their task to be marked as complete and valid. If they try to get out of paying you by submitting their task without finishing it, you can just reject it, which will be set back as incomplete in their own tasks list! 😈
You also see the overdue tasks, which you get to claim money from. The task will only be cleared for your surfer after you've claimed their money! This will force them to pay you and be held accountable for their laziness.

Feature 3: My friends

This allows users to add friends, who can then be added as their sharks for tasks they need to get done

Enter your friend's email which they used to sign up for Surf or Pay, and click add. You'll both then be added to each other's friend list! 😄

All these features are complimented with a completely hand-drawn interface and a responsive UI crafted to fit the purpose and vibe of our app!

How we built it

How We Built It

Surf or Pay is built using React 19, Next.js 15, TailwindCSS, and Firebase. Here's how each part of the stack contributed:

React 19: We leveraged React's component-based architecture to create reusable, dynamic components for the interface. This helped us build features like the dashboard, task calendar, and friends list quickly and efficiently.
Next.js 15: Next.js provided a seamless framework for server-side rendering and routing. It allowed us to handle user-specific pages like their dashboard and profile efficiently, ensuring a smooth user experience.
TailwindCSS: TailwindCSS helped us design a playful, cutesy-yet-professional UI that fits the app's loan shark theme. It sped up the styling process and allowed us to maintain a cohesive design system.
Firebase: Firebase is our backend powerhouse. It handles:
- Authentication: Managing user accounts and logins securely.
- Realtime Database: Keeping tasks and deadlines updated for both sharks and surfers in real time.
- Hosting: Deploying our app quickly and reliably.
- Design: The design was all hand-done without the use of premade svg's
  - Canva for planning and prototyping
  - Procreate to design graphics in png form, then converted to svg using external tools!

Challenges we ran into

1. Task Verification Logic

Implementing the logic for task verification was tricky, especially with tight deadlines. We had to ensure tasks moved between states (e.g., "pending," "overdue," "claimed") seamlessly, with accurate updates for both surfers and sharks.

2. Time Constraints

This being a 24-hour hackathon, balancing our ambitious feature set with time limitations was challenging. We focused on building a minimum viable product (MVP) while leaving room for future enhancements.

3. Responsive Design

Ensuring the app looks and functions perfectly across devices was a hurdle, but TailwindCSS’s responsive utilities made it manageable.

4. Firebase Integration

Synchronizing real-time updates for tasks between sharks and surfers required careful structuring of our Firebase database. Debugging some edge cases around data consistency was a learning experience.

Accomplishments that we're proud of

Honestly, the fact that we managed to finish this in the given amount of time is a pretty big accomplishment for us in itself. All of our group mates worked very hard, pushing ourselves past our limits. We are proud that all of us ventured into areas that we were personally not that familiar with and learnt a lot more about web development.

What we learned

We learnt the importance of a proper github workflow and we also learnt how to prioritise different tasks. Initially we had pushed the deployment until near the end but then ran into a lot of issues with some of our code being unable to be deployed. Therefore we learnt that we could have deployed earlier and then monitored it frequently to ensure there was no incompatible code being written

What's next for Surf Or Pay

We intend to improve our dashboard so the user can have a quick view of their most important pending tasks by showing a "Tasks Due Today" panel and a "Task Calendar".