App Architecture & Features
Real-time Live Tracking
Every keystroke is synchronized to the admin dashboard using Pusher, allowing admins to see user intake data as it's typed.
Presence Queue
Built-in queue system that informs users of their position and prevents multiple users from editing the same form simultaneously.
Secure Validation
Custom client-side validation logic with premium UI feedback, backed by forceTLS Pusher encryption.
Technical Stack
Next.js 15 (App Router)Framework
React 19UI Library
Pusher ChannelsReal-time Engine
Tailwind CSS 4.0Styling
Core Folder Structure
app/ ├── admin/ # Admin dashboard route ├── api/ │ ├── pusher/ # Presence channel auth │ ├── register/ # Final form submission │ └── track/ # Live keystroke tracking └── register/ # Form & Success pages components/ ├── AdminDashboard.tsx └── RegistrationForm.tsx lib/ └── pusher.ts # Pusher configuration types/ └── user.ts # Data interfaces
How to Demo the System
01
Open the Admin Dashboard in one tab.
02
Open the Registration Form in another tab (or side-by-side).
03
Type into any field and watch it update live on the Admin panel.