SubAiTracker

Subscribe management, React, only Bolt

Comment

Inspiration

SubTracker was inspired by the challenges users face in the rapidly growing subscription economy: complex subscription management, lack of cost visibility, risk of duplicate subscriptions, missed optimization opportunities, and difficulty managing renewal dates.

My goal was to solve these problems with a smart AI-based solution, helping users conveniently manage all their subscription services in one place and optimize costs.

What it does

SubTracker is a web application that allows users to manage all their digital services in an integrated manner.

The platform solves user inconveniences in the subscription economy era with the following core features:

Unified Subscription Management: Provides an intuitive dashboard to check and manage all subscription services in one place, including AI tools, streaming, productivity tools, and cloud services.

Smart Analysis and Optimization Suggestions: Analyzes subscription patterns to visualize cost trends and suggests AI-based customized optimization methods such as duplicate subscription detection, high-cost subscription analysis, and usage-based optimization.

Renewal Date and Budget Management: Provides renewal date notifications to prevent unexpected automatic payments, and helps manage spending effectively by setting and tracking budgets by category.

User experience-centered design: Maximize user convenience with easy OAuth login, mobile-friendly responsive design, and intuitive navigation.

How we built it

SubTracker was designed with rapid development and scalability in mind, with the goal of developing an MVP.

Initial setup and foundation: We built a core development environment such as Tailwind CSS and ESLint based on Vite, React, and TypeScript templates.

Backend and authentication system: Build a PostgreSQL database using Supabase, and implement a simple authentication system via Google and GitHub OAuth. Set up RLS (Row Level Security) for user-specific data security.

Implementation of core functions: Subscription management: Implemented a unified dashboard and subscription list page with subscription add, edit, and delete functions.

Expanding product scope: Expanded the scope from the initial AI subscription service to all types of subscription services, and defined various category systems.

Implementation of advanced analytics functions (Stage 3):

AI-based insights: Build an AI-based insight system that automatically analyzes subscription patterns to detect duplicate services, analyze high-cost subscriptions, and suggest optimizations based on usage rates.

Predictive Analysis: Added analysis functions based on various scenarios to predict future costs and trends.

Smart Recommendation: Developed a system that suggests customized subscription optimization methods such as cost savings, service integration, and new service recommendations.

UI/UX Improvement and Completeness Improvement (Stage 4):

Advanced UI Component System: Built a library of reusable advanced UI components such as loading spinners, skeleton loaders, toast notifications, and modals.

User Experience Improvement: Implemented improved loading state management and immediate feedback system for actions through skeleton UI and loading spinners.

Responsive Design and Visual Completeness: Completed a responsive design optimized for all devices with a mobile-first approach, and improved visual completeness with gradient backgrounds and shadow effects.

Challenges we ran into

We faced several challenges during development: Supabase environment variable management: We had difficulty with initial login and data linkage due to the Supabase URL and API key not being set properly in the development environment.

This was resolved by adding environment variable check logic.

Database schema design and RLS: We put a lot of thought into designing the database schema to efficiently manage complex subscription and analytics data and setting RLS policies for user-specific data access control.

Complexity of AI-based analytics logic: Implementing logic that provides meaningful AI insights and predictions based on real user data required a lot of simulations and tests.

Performance Optimization: In order to provide rich UI/UX and animations while maintaining fast loading speed and smooth user experience, we had to apply various performance optimization techniques such as code splitting, image optimization, and memoization.

Through this process, SubTracker evolved from a simple subscription management tool to a smart AI-based platform that helps users with their financial health.

Accomplishments that we're proud of

We achieved the following major achievements while working on the SubTracker project: Database completion and stabilization: We built a database including more than 80 different category subscription services, and established a stable data foundation through data migration and integrity assurance.

Implementation of advanced analytics features: Predictive analytics system: We added advanced analytics features to predict future costs and trends, such as 3-month/6-month/1-year cost forecasting, scenario-based analysis, and risk factor analysis.

UI/UX Improvements and Completeness: Building an Advanced UI Component System: Building a library of reusable and visually stunning UI components, including LoadingSpinner, SkeletonLoader, EmptyState, Toast, ProgressBar, Badge, Tooltip, Modal, and Accordion, to complete the production-level design.

Improved User Experience: Taking the user experience to the next level with improved loading state management and an instant user feedback system, including skeleton UI, loading spinner, progressive loading, and friendly error status messages.

Fully Responsive Design: Using a mobile-first approach, we implemented an optimized layout and touch-friendly interface for all devices.

Visual Completeness: Applying gradient backgrounds, drop shadows, consistent color system, and typography, we completed a polished and professional visual design.

What we learned

While working on the project, we learned the following important things: The Power of Supabase: As a Backend as a Service (BaaS), Supabase’s authentication, database, and RLS capabilities dramatically reduced our backend development time.

The Importance of a Component-Based Design System: By building reusable and extensible UI components, we were able to maintain a consistent design language and increase development efficiency.

Improving User Experience through Animation: Smooth page transitions and micro-interactions using Framer Motion contributed to providing a more intuitive and enjoyable experience for users.

The Value of Data-Driven Decision Making: As we implemented AI-based analytics and predictive capabilities, we once again confirmed that data is a key element that provides real value to users and helps them make better decisions.

Benefits of strict type management: TypeScript enabled us to secure type safety and reduce errors that could occur during development.

What's next for SubAiTracker

Currently, SubAiTracker requires users to manually add subscription services. The next step for SubAiTracker is that users only need to register their email or card information, and the AI ​​will automatically track the user's subscription information and import the information into the DB.

Built With

  • jwt
  • lingo.dev
  • lucide-react
  • netlify
  • oauth
  • react-18
  • react-hook-form
  • react-query/tanstack-query
  • react.memo
  • supabase
  • tailwind-css
  • typescript
  • vite
  • zod
  • zustand
Share this project:

Updates