Revive
Wellness Platform
A comprehensive digital platform designed to seamlessly handle both physical product sales and in-person class bookings with a robust unified CRM and order management system.
Project Overview
Revive is a comprehensive, full-stack digital platform designed to handle both physical product sales and in-person class bookings. The goal was to build a modern, high-performance web application that delivers a seamless user experience while providing the administrative team with a robust CRM and order management system to streamline their operations.
Built from the ground up to ensure scalability and maintainability, the platform integrates secure payment processing, streamlined content management, and reliable administrative notifications.
Design System & Architecture
- • Frontend Framework: Built on Next.js 15 utilizing the App Router and React Server Components. This hybrid rendering approach ensures optimal SEO, rapid initial page loads, and dynamic interactivity where needed.
- • Styling & UI: The design system leverages Tailwind CSS combined with Radix UI primitives and shadcn/ui for accessible, unstyled components. This allowed for the creation of a highly customized, premium aesthetic without sacrificing accessibility standards.
- • Animations: Micro-interactions and fluid page transitions are powered by Framer Motion, enhancing the perceived performance and premium feel of the platform.
- • Database: MongoDB (via Mongoose) was selected for its flexible document model, perfectly accommodating the varying schemas required for Products, Classes, Venues, and Orders.
Key Features & Implementation
1. Unified CRM & Order Management
The backbone of the administrative experience is a custom-built CRM dashboard mapped securely behind role-based access.
- • Order Tracking: Administrators can view, update, and manage the lifecycle of both product purchases and class enrollments from a single unified interface.
- • Stripe Integration: Payments are processed securely via Stripe. We utilized Stripe Webhooks (`checkout.session.completed`, `payment_intent.succeeded`) to automatically update order statuses in the MongoDB database, ensuring the CRM is always synced with real-time financial data.
- • Data Validation: All incoming data—from customer checkouts to admin product uploads—is strictly validated using Zod and React Hook Form.
2. Products & Classes Architecture
A major challenge was handling the distinct logic between shippable physical products and schedulable in-person classes.
- • Polymorphic Cart/Checkout: The data models (`Product.ts` and `Class.ts`) are distinct, but the checkout flow intelligently unifies them. The system calculates subtotal, taxes, and shipping logic based on the type of items in the cart (e.g., bypassing physical shipping collection for digital class bookings).
- • Dynamic Seed/Upload: Features integration with UploadThing for seamless, secure image hosting directly from the admin dashboard when creating new products or classes.
3. Email Infrastructure: SMTP Routing
A critical requirement was ensuring zero friction in administrative oversight and customer communication. Instead of forcing administrators to log into a dashboard to check for new inquiries or critical system alerts, we implemented an SMTP-based email forwarding system.
- • Instant Notifications: When a customer submits a contact form or triggers a high-priority event, the system securely routes the payload via SMTP directly to the centralized admin inbox.
- • Operational Efficiency: This architectural decision drastically reduced response times to customer inquiries. By pushing notifications directly to the devices administrators already monitor (their email), the team maintained high situational awareness without needing to constantly poll a web dashboard.
🎯 Conclusion
The Revive platform successfully bridges the gap between digital e-commerce and physical service booking. By combining a premium, highly interactive frontend with a robust, automated backend (Stripe Webhooks, SMTP routing, unified CRM), the project delivered an end-to-end solution that scales effortlessly with the business's growth.
Technologies Used
Frontend Framework & UI
Next.js 15, React 18, Tailwind CSS, Radix UI & Framer Motion
Backend & Data
MongoDB, Mongoose, UploadThing
Auth, Booking & Payments
NextAuth.js, Stripe Payments, Stripe Webhooks, Zod forms
Project Gallery
A visual journey through the platform's interfaces and features. Click any image to enlarge.