Built a subscription reminder with Next.js and Supabase.

#showdev #webdev #nextjs #tailwindcss

Phase 1: Marketing & Landing Page (The Foundation)

Modular Architecture: Implemented a Marketing Layout to ensure the Header and Footer remain consistent across the Home, About, and Contact pages for better code maintainability.
Premium Hero Section: Designed an eye-catching top fold using high-quality gradients and bold typography to drive "Get Started" actions.
Responsive Features Grid: Developed a benefits-driven section using a flexible Tailwind grid that adapts seamlessly from mobile to desktop.
Native Dark Mode: Integrated built-in dark mode support with smooth transition-colors for a polished, high-end user experience.
Final CTA: Concluded the user journey with a strategic "Call to Action" section to convert scrolling visitors into active leads.

Phase 2: Dynamic Authentication System

Single-Page Auth: Implemented a dynamic login/signup page that switches states without extra routes. It automatically injects or hides the "Full Name" field based on the user's choice.

Enhanced UX: Added an "Eye" icon for password visibility, interactive high-contrast borders on focus, and loading spinners for state feedback.
Supabase Auth Integration: Connected a custom useAuth hook to handle secure registration, session management, and automatic redirection to the /dashboard.
Security & Recovery: Added client-side validation (e.g., 6-character password minimum), error alert cards for failed logins, and a secure "Forgot Password" flow.

Phase 3: The Subscription Engine (Dashboard & Logic)

Subscription Dashboard: Created a unified hub to manage payments, using Supabase RLS to ensure users only access their own data.
Smart Stats Overview: Built four real-time cards tracking Monthly Cost, Active Subscriptions, WhatsApp Success Rate, and Payments Due This Week.

Advanced Calculation Logic: Developed a system that normalizes all costs (Yearly/Weekly) into a monthly average and uses a getDaysUntilPayment utility for accurate countdowns.
Interactive Cards: Designed UI cards that are color-coded by urgency (Red for overdue, Orange for 7-day warnings, Blue for future dates) with instant Pause, Edit, and Delete controls.

Phase 4: Smart Data Entry (The Create Form)

Zod Validation: Built a "Smart Form" that prevents empty names, limits costs to a $999k ceiling, and blocks past dates.
Automated Intelligence: The form automatically calculates the "Next Payment Date" when a user selects a start date and cycle.

UX Optimization: Added auto-capitalization for service names and a "Protocol Fixer" that automatically adds https:// to website URLs.

Phase 5: Meta WhatsApp Integration & Monitoring

Official Meta API: Connected the application to the Meta WhatsApp Business API to send automated, reliable payment reminders.
The Monitoring Hub: Built a notification feed powered by Supabase Real-time. When the Meta API sends a message, the header's notification bell updates instantly without a page refresh.
Status Tracking: Implemented status indicators (Green Check for sent, Red Alert for failure) to log the history, timestamp, and phone number of every WhatsApp reminder.

Phase 6: Global Settings & Personalization

WhatsApp Configuration: Created a secure settings field for users to link their phone numbers using international format validation.

Timezone Calibration: Added a global timezone selector. If a user moves from Asia/Karachi to another region, the app automatically recalibrates all payment and reminder schedules to match their local time.
Profile Sync: All settings are stored in a central user_profiles table, acting as the single source of truth for both the frontend and backend Edge Functions. Phase 6: Infrastructure & Environment To securely connect all these moving parts, the project relies on the following environment configuration: