• 

  Landing page

UnSub Project

What it does

UnSub is a smart subscription management platform designed to help people take control of their recurring expenses. It empowers users to stop unwanted charges and gain a clearer understanding of their spending habits by centralizing all their subscriptions in one place.

Inspiration

The idea for UnSub came from a YouTube video that highlighted the growing problem of subscription overload. I realized I was also struggling with this, losing track of where my money was going each month. Despite having no prior experience as a web developer, the Bolt Hackathon motivated me to learn the necessary skills and build a solution to a problem I was personally facing. This project is the result of that learning journey.

How we built it

UnSub was built as a single-page application from the ground up, serving as my personal curriculum for learning full-stack development.

• Frontend: The interface was built with React and Vite for a fast development experience. Styling was handled efficiently with Tailwind CSS. Icons were provided by Lucide React, and Framer Motion was used to add subtle animations that make the UI feel dynamic and professional.

• Backend: Supabase was the all-in-one backend solution. It provided the PostgreSQL database for storing user and subscription data, as well as a built-in Authentication system for secure sign-ups and logins. I also wrote my first serverless Edge Function using Supabase to handle a smart auto-cancellation feature.

Challenges we ran into

This project was full of challenges, which ultimately became the most valuable learning experiences.

• Data Structuring: Designing the database schema to correctly handle all the details of a subscription (e.g., billing cycles, trial periods, costs) was more complex than anticipated.
• Getting Security Right: The biggest technical hurdle was implementing Row Level Security (RLS) in Supabase. Writing the security policies to ensure users could only ever access their own private data required a lot of trial, error, and documentation-diving.
• User-Friendly Forms: Creating an "Add Subscription" form that was simple and intuitive—despite collecting a lot of information—was a key design challenge. I solved this by breaking it down into a multi-step process to avoid overwhelming the user.
• Smart Alert Logic: Writing the code to automatically flag subscriptions needing attention (like an upcoming trial expiration) involved complex logic with dates and conditions.

Accomplishments that we're proud of

• Successfully building a full-stack application from scratch with no prior web development experience.
• Implementing robust Row Level Security, which was a huge win for ensuring user privacy and data protection.
• Creating a "smart alerts" feature that correctly identifies and flags important subscription events for the user.
• Designing a clean, professional, and engaging user interface with the help of Tailwind CSS and Framer Motion.

What we learned

Building UnSub was an incredible, hands-on learning experience. I taught myself the fundamentals of modern web development, including:

• Full-Stack Development: Managing both frontend and backend components of a web application.
• Backend as a Service: Using Supabase to handle databases, authentication, and serverless functions without setting up my own server.
• Modern Frontend: Building a reactive and component-based UI with React and managing application state with hooks.
• Utility-First CSS: Styling efficiently and rapidly with Tailwind CSS.
• Data Security: Understanding the critical importance of security rules like RLS to protect user data.

What's next for UnSub

Overall, building UnSub was an incredible challenge that pushed me to solve a problem I cared about. The next steps would be to gather user feedback to further refine the user experience, add more smart-alert features, and explore integrations with financial services to automate subscription discovery.

Built With

• and-serverless-edge-functions
• and-uses-supabase-for-its-postgresql-database
• authentication
• eslint
• lucide
• npm
• react
• styled-with-tailwind-css
• supabase
• tailwind-css
• typescript
• vite