hyper-build

byRavi K

Build a production-ready, full-stack web application called “SubTrackr” – a Micro SaaS subscription tracker for individuals and small teams. Mission Help users track all their recurring subscriptions (SaaS, streaming, utilities, etc.), understand their true monthly/annual spend, and never miss a renewal or trial end. The app should feel fast, trustworthy, and finance-grade, with a clean, modern UI. Target users Primary: Tech-savvy individuals and freelancers who manage multiple subscriptions. Secondary: Small teams/agencies that want to track business SaaS spend and renewals. Core features (MVP) Authentication Email/password sign up, login, logout, and password reset. Secure session management with JWT or session cookies. Subscription management Users can create, edit, and delete subscriptions with fields: Name, description/notes Cost (decimal), currency (default USD, but support multiple) Billing cycle: weekly, monthly, quarterly, yearly, other Next renewal date Category (e.g., Productivity, Design, Dev Tools, Entertainment, Utilities, Other) Status: Active, Paused, Cancelled, Trial Optional: linked website URL, logo URL Display a list of subscriptions with sorting (by name, next renewal, cost) and basic filtering (by category, status). Dashboard & analytics Show: Total monthly and annualized subscription cost. Number of active subscriptions and trials. Upcoming renewals in the next 7 and 30 days. Simple charts: Monthly spend trend over the last 6 months (use sample/synthetic data if needed for history). Spend by category (pie or bar chart). Renewal reminders Daily background job that checks for subscriptions renewing soon. Send email reminders: 7 days before renewal 1 day before renewal On the renewal date In-app notification center showing upcoming renewals and recent alerts. User settings Profile: name, email, timezone, default currency. Notification preferences: toggle email reminders on/off. Data export: download all subscriptions as CSV. Pro features (design the data model and UI hooks for these, even if not fully implemented yet) Automatic subscription detection from bank transactions or email receipts (design tables and API endpoints for future integration). Smart insights: detect unused subscriptions, price increases, and duplicate services. Team workspace: shared subscriptions, owners, and approval workflow for new SaaS. Integration with Stripe for paid plans (Free vs Pro vs Team). Tech stack Frontend: React + TypeScript, Vite, Tailwind CSS, shadcn/ui (or similar component library). Backend: Node.js (Express or Fastify) or Python (FastAPI) with a clean REST API. Database: PostgreSQL with Prisma or SQLAlchemy ORM. Auth: JWT-based auth with secure password hashing. Background jobs: simple scheduler (e.g., node-cron or Celery-like pattern) for daily renewal checks and email sending. Email: use a provider like SendGrid/Resend (mock the integration if needed, but design the service layer). Deployment-ready structure: clear separation of frontend, backend, and database, with environment variables for config. Data model (minimum) User: id, email, passwordHash, name, timezone, defaultCurrency, plan (free/pro/team), createdAt Subscription: id, userId, name, description, cost, currency, billingCycle, nextRenewalDate, category, status, websiteUrl, logoUrl, createdAt, updatedAt Reminder: id, userId, subscriptionId, type (renewal_7d, renewal_1d, renewal_day), sentAt, createdAt Notification: id, userId, title, message, type, read, createdAt (Optional future) Team, TeamMember, SubscriptionOwner for B2B features. UX & design requirements Clean, modern SaaS look with a light/dark mode toggle. Responsive design that works well on desktop and mobile. Home/Dashboard page: high-level metrics + charts + upcoming renewals. Subscriptions page: list + search + filters + add/edit modal or page. Settings page: profile, notifications, export data. Use clear empty states (e.g., “No subscriptions yet – add your first one”). Include loading states and basic error handling (form validation, API errors). Monetization hooks Design the app so a “Upgrade to Pro” CTA can be shown in: Dashboard (e.g., “Pro: auto-detect subscriptions from your bank”) Settings (plan management) Include a simple pricing page (Free / Pro / Team) with feature comparison, even if payments are not wired yet. Deliverables A complete, runnable full-stack app with: Frontend code (React + TypeScript) Backend API (Node/Express or FastAPI) Database schema and migrations Seed script with sample user and subscriptions for demo Basic tests for critical flows (auth, CRUD subscriptions, renewal calculation) Clear README with: How to run locally (frontend, backend, DB) Environment variables needed How to deploy (e.g., to Render, Railway, or similar) Prioritize clean architecture, readable code, and a polished UI over excessive features. The goal is a Micro SaaS-ready foundation that can be extended with bank integrations, Stripe payments, and team features later.