Your Business Date
Subscription-based professional dating & networking SaaS built with Next.js and real-time architecture.
Project Overview
A subscription-based SaaS platform designed for career-oriented individuals seeking professional networking and meaningful relationships. The platform combines advanced filtering, real-time chat, video calling, subscription management, and business advertising into a high-performance web architecture.
Frontend Engineer
- Built complete UI architecture using Next.js & Tailwind
- Implemented API integration & business logic
- Structured multi-step registration flow
- Integrated Stripe subscription system
- Built real-time chat system using Socket.io
- Implemented Agora-based audio & video calling
- Handled animations using Framer Motion
- Collaborated with backend team for API alignment
1. Complex Multi-Step Registration & State Management
The registration flow contained 9 multi-step forms with dynamic validation and API payload dependencies. State updates were inconsistent, causing payload mismatches and broken real-time updates.
Solution
After deep collaboration and understanding advanced Redux patterns, I restructured global and local state logic using Redux Toolkit. I separated UI state from API state, normalized form handling, and ensured consistent payload synchronization across steps.
2. Broken Frontend Filtering Logic
The swipe-based discovery page had complex filtering logic by profession, industry, location, and interests. Filters were not returning correct results due to mismatched payload structures.
Solution
I collaborated closely with the backend engineer to understand the API contract and filtering logic. After aligning request structures and refining frontend filtering conditions, the discovery system began returning accurate, real-time results.
3. Real-Time Chat System Implementation
This was my first implementation of a real-time chat system using Socket.io. Message syncing, read receipts, file sharing, and emoji support required careful state synchronization.
Solution
I implemented Socket.io listeners with structured event handling, managed message queues properly in Redux, and built support for image/document uploads and emoji rendering — creating a WhatsApp-like chat experience inside a SaaS platform.
4. Audio & Video Calling with Agora SDK
The Agora SDK documentation lacked clarity for certain edge cases. Calls were failing to connect despite correct logic implementation.
Solution
I carefully studied the SDK documentation, restructured the connection lifecycle, and ensured proper token handling and channel synchronization. After debugging connection flow and event triggers, audio/video calls became stable and production-ready.
Stable real-time messaging & calling system
Optimized multi-step onboarding architecture
Accurate intelligent filtering system
Seamless Stripe subscription integration
Project Recap
Built in 2024
Industry
Web SaaS Platform
Service
Frontend Engineering & System Logic Implementation
Tech Stack