Full Stack Case Study   2025–2026

What I Built for BizCivitas

Company Bardbox Digital Growth · Client BizCivitas

Spent the first 3 months building the entire user panel from scratch on my own. Then had 1 month of collaboration on admin panel UI changes as per client requirements. After that I worked independently on RBAC, events system, backend APIs, CMS migration and more.

419
API Endpoints
53
MongoDB Models
58
Admin Routes
3mo
User Panel
3+mo
Admin + Backend
Scroll to read
React Redux Toolkit Next.js Node.js MongoDB Express WhatsApp API Firebase Material UI Tailwind CSS React Hook Form JWT Auth React Redux Toolkit Next.js Node.js MongoDB Express WhatsApp API Firebase Material UI Tailwind CSS React Hook Form JWT Auth
Chapter 01

User Panel,
from nothing.

No template. No existing UI. I built the entire user-facing panel from scratch in Next.js with React Redux Toolkit for state management, connected to a MongoDB backend. Every screen, every API call, every responsive breakpoint. Took me 3 months to get it all done properly.

Feeds (BizPulse, BizHub, Daily) Connections & Messaging Events & Registration Profile & Membership Notifications Knowledge Hub Rewards Redux Auth Slice
🖼️   Screenshot placeholder — User Panel
🕐
3mo
Built from scratch
Timeline
📋
15+
User panel screens
Screens
🌍
100%
Fully responsive across mobile, tablet and desktop
Responsive
🔨
Redux
Toolkit — global state
State
📱
Next.js
App Router
Framework
Chapter 02

Admin Panel &
Backend,
four roles, one system.

🕐 1 month collaboration on UI  ·  Then worked independently on RBAC and beyond
🏛️
Tier 1
Master Franchise
City partner with the highest authority. Manages the entire city zone, oversees all partners below.
📍
Tier 2
Area Partner
Manages specific areas within a zone. Has visibility into their area's members and metrics.
👥
Tier 3
CGC
Core Group Coordinator. Handles the core community group, meetings and core member activity.
📳
Tier 4
DCP
Digital Channel Partner. Focused on digital referrals and member acquisition, with their own dedicated dashboard.
4
Role-specific dashboards built
JWT
Middleware on every protected endpoint
Full CRUD
APIs built for each user type
🖼️   Screenshot placeholder — Role management & dashboards
Chapter 03

Referral
Hierarchy
& Analytics.

I built the referral tree and the stats system from backend APIs to the admin UI. It tracks 4 key business metrics for every user and core member.

🏆
BizWin
Business wins and referral conversions
🤝
BizConnect
Business connections made on platform
📅
Meetups
Physical meetup attendance tracked
💌
Invitations
Meeting invites sent and accepted
Zone APIs
13
Endpoints for zone creation, editing, listing and management
Franchise APIs
16
Partner creation, area assignment, hierarchy management
Referral Hierarchy Page — /referral-hierarchy
👤 Search any user → load their full tree
Direct referrals shown at level 1
Deep referral chains tracked recursively
Stats: depth, total referrals, revenue
🖼️ Screenshot placeholder — /referral-hierarchy
Chapter 04 — Most Complex

End-to-End
Event System.
Fully automated.

Type 01
👤 Member Events
Restricted to registered BizCivitas members. Requires membership verification before registration is accepted.
Type 02
🌐 Public Events
Open to all visitors and guests. Anyone can register, no membership required. Full automation still applies.
▶ Event Lifecycle — 5 Automated Stages
①
Registration
User registers for a member or public event. On success, the system instantly triggers a confirmation email with a unique QR code and a WhatsApp message. Both go out automatically right after registration.
Email + QR WhatsApp Trigger Both Event Types
②
Reminder Automation
Before the event, every registrant gets a reminder on WhatsApp and over email. Each message has their own individual QR code for check-in at the venue.
Individual QR per Attendee WhatsApp Reminder Email Reminder
③
Live QR Scanner — /event-scanner
At the event, admin staff open the scanner page on any device with a camera. It reads the visitor's QR in real-time using @yudiel/react-qr-scanner, marks attendance in the database instantly, and triggers a WhatsApp + Email confirmation.
Real-time Camera Scan DB Attendance Mark Instant Confirmation
🖼️   Screenshot placeholder — /event-scanner
④
Post-Event Follow-Up — /event-registrations
After the event closes, the system sends targeted follow-up messages based on each registrant's attendance status. Attended = thank you message. Missed = sorry we missed you. Different templates, automated in bulk.
Attendance-Based Targeting Bulk Automation
⑤
Email Templates System — /email-templates
Admin-managed email templates stored in MongoDB. Each event can be assigned a custom template. Templates support dynamic variables like attendee name, event name, QR code, date and venue. All of it gets resolved automatically when the email goes out.
MongoDB Stored Dynamic Variables Per-Event Templates
🖼️   Screenshot placeholder — /email-templates
8
Attendance APIs
8
WhatsApp APIs
7
Email Template APIs
Chapter 05

Website API
Integration
with Admin Panel.

🔨 Built APIs in backend, integrated with React Redux in admin panel

I created the APIs on the Node.js backend with MongoDB as the database and then integrated them into the admin panel using React and Redux. Each module has its own set of endpoints that I built first and then wired up on the frontend.

📝
Blogs Manager
Built CRUD APIs for blogs in the backend. Integrated create, edit, publish and delete flows in the admin panel with React Redux.
API + Integration
🎉
Events Manager
Created event listing and attendance APIs on the backend. Built the events list and attendance verification UI in the admin panel.
API + Integration
👥
Guest Registrations
Built APIs for guest registration and verification. Integrated the full guest management UI inside the admin panel.
API + Integration
🎯
Leads Manager
Created leads APIs with filters, stats and detail endpoints. Integrated leads pipeline, advanced filters, lead detail modal and global stats in the admin panel.
API + Integration
🗣
Teams Manager
Built team management APIs on the backend and integrated them into the admin panel with full CRUD on the frontend.
API + Integration
📱
WhatsApp Bulk Messaging
Built the WhatsApp bulk messaging API on the backend and integrated the messaging UI directly inside the admin panel.
API + Integration
🖼️   Screenshot placeholder — API integrated modules in admin panel
Chapter 06

Manual
Payment,
done right.

🏠
Zone → Area Cascade
Selecting a zone auto-loads its areas via API. No hardcoded data, always live.
📋
React Hook Form + MUI
Handles validation, error states and form submission properly. Nothing breaks on edge cases.
📞
International Phone Input
libphonenumber-js for real phone number validation across countries.
💳
Membership Status Display
Shows current plan, renewal date, and full payment history for the selected user.
👤
Referrer Autocomplete
Search and assign a referrer at the time of processing the payment.
Manual Payment Form — /Mannual-payment
Zone
Ahmedabad Zone ▾
Area
Navrangpura ▾
Member Name
Search member...
Phone Number
+91 ··········
Membership Type
Gold ▾
Referrer
Search referrer...
Amount
₹ ·····
Payment Method
UPI ▾
🖼️ Screenshot placeholder — Manual payment page
By the Numbers

Project at
a glance.

3mo
User Panel, built from scratch
3+mo
Admin Panel + Backend
📅
4
RBAC roles with dedicated dashboards
4
Analytics metrics tracked per member
5
Event lifecycle stages fully automated
🎉
2
Event types built end-to-end
3
Communication channels automated: Email, WhatsApp and In-app Notifications
📱
6
Modules with APIs built and integrated in admin panel
419
API endpoints built & documented
54
Postman collections
🔨
1
Single admin panel with all modules API integrated