Built a subscription reminder with Next.js and Supabase.

Source: Dev.to

Phase 1 – Marketing & Landing Page (The Foundation)

• Modular Architecture – Implemented a marketing layout so the header and footer stay consistent across Home, About, and Contact pages, improving code maintainability.
• Premium Hero Section – Designed an eye‑catching top‑fold with high‑quality gradients and bold typography to drive “Get Started” actions.
• Responsive Features Grid – Built 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 – Ended 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. The form automatically injects or hides the Full Name field based on the user’s choice.

  

• Enhanced UX – Added an “eye” icon for password visibility, high‑contrast focus borders, and loading spinners for state feedback.

• Supabase Auth Integration – Connected a custom useAuth hook to handle secure registration, session management, and automatic redirection to /dashboard.

• Security & Recovery – Implemented client‑side validation (e.g., minimum 6‑character password), 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 Row‑Level Security (RLS) so 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 – Normalized all costs (yearly/weekly) into a monthly average and used a getDaysUntilPayment utility for accurate countdowns.

• Interactive Cards – Designed UI cards colour‑coded by urgency (red = overdue, orange = ≤ 7 days, blue = future) 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, caps costs at $999 k, and blocks past dates.

• Automated Intelligence – The form automatically calculates the Next Payment Date when a user selects a start date and billing cycle.

  

• UX Optimisation – Added auto‑capitalisation for service names and a “Protocol Fixer” that automatically prefixes https:// to website URLs.

---

Phase 5 – Meta WhatsApp Integration & Monitoring

• Official Meta API – Connected the app to the Meta WhatsApp Business API to send automated, reliable payment reminders.
• 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 = sent, red alert = failure) that log the history, timestamp, and phone number of every WhatsApp reminder.

---

Phase 6 – Global Settings & Personalisation

• WhatsApp Configuration – Created a secure settings field for users to link their phone numbers, with international‑format validation.

  

• Timezone Calibration – Added a global timezone selector. When a user moves from, e.g., Asia/Karachi to another region, the app automatically recalibrates all payment and reminder schedules to the new 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 7 – Infrastructure & Environment

To securely connect all moving parts, the project relies on the following environment configuration:

(Note: The diagram above shows the required Supabase keys, Meta API credentials, and other secrets needed for deployment.)

---

All sections retain the original content and hierarchy, with improved markdown formatting for readability.

![Project Screenshot](https://ev-to-uploads.s3.amazonaws.com/uploads/articles/ob4kmxhfr38ygey3mbh9.png)

**GitHub Repository**  
[Socialmedia‑WhatsApp‑Reminders](https://github.com/syedmurtjiz/Socialmedia-whatsapp-reminders-)

**Live Demo – Spotify Clone**  
[duepilot.vercel.app](https://duepilot.vercel.app/)

**Personal Portfolio**  
[syedmurtjizdev.vercel.app](https://syedmurtjizdev.vercel.app/)

*Dedicated to crafting high‑quality, user‑centric web applications. Explore my work and learn more about my journey at the links above.*