shadow-application

byKiran Shetty

Build a fully production-ready mobile application called “Collevento”. This is a premium college event management platform with strict role-based navigation. There are 3 roles: 1) Student 2) Organizer 3) Admin Each role must have a completely different bottom tab navigation and dashboard layout. No shared tabs between roles. Navigation must load dynamically based on user role after login. -------------------------------------------------- AUTH FLOW (COMMON FOR ALL ROLES) -------------------------------------------------- 1) Enter phone number 2) Send OTP via Twilio 3) Store OTP in Redis (5 min expiry) 4) Rate limit OTP (max 3 per 10 minutes) 5) Verify OTP 6) If new user: - Collect: - Full Name - College Name (mandatory) - Role (Student / Organizer / Admin) - Profile photo upload to S3 7) Issue JWT + Refresh token 8) Load role-specific navigation -------------------------------------------------- ROLE-BASED NAVIGATION STRUCTURE -------------------------------------------------- ============================== ROLE 1: STUDENT NAVIGATION ============================== Bottom Tabs: 1) Home - Welcome header - Animated stats - Upcoming events - AI Assistant floating button 2) Events - Browse approved events - Search + filter - View details - Book event - Razorpay payment - Upload payment proof (if required) 3) Tickets - Booking history - QR ticket display - Ticket PDF download - Status (Pending / Confirmed / Attended) 4) Certificates - Download participation certificates 5) Profile - View & edit profile - College name - Logout AI Assistant: - Floating chat button on Home - Chat screen modal - Event suggestions - Ticket help - Booking status - Refund explanation - Real-time via Socket.io -------------------------------------------------- ============================== ROLE 2: ORGANIZER NAVIGATION ============================== Bottom Tabs: 1) Dashboard - Total Events - Registrations - Revenue - Attendance % - Real-time updates via Socket.io 2) Events - Create Event - Edit Event - Upload Banner (S3) - Upload Certificate Template - View Bookings - Approve Payments 3) Scan - QR Scanner screen - Validate QR - Mark attendance - Show participant details - Prevent duplicate scans (Redis invalidation) 4) Analytics - Event-wise registrations - Revenue graph - Attendance rate - Export CSV 5) Profile - Edit profile - College - Logout -------------------------------------------------- ============================== ROLE 3: ADMIN NAVIGATION ============================== Bottom Tabs: 1) Overview - Total Users - Total Events - Revenue - Attendance logs 2) Approvals - Pending events - Approve / Reject - Notify organizer 3) Users - View users - Disable accounts - Role management 4) Reports - System analytics - College-wise stats - Revenue summary - Export reports 5) Broadcast - Send Global SMS - Send WhatsApp - Send push notifications -------------------------------------------------- NAVIGATION RULES -------------------------------------------------- - Role is stored in JWT. - After login, decode JWT. - Dynamically load role-based navigator. - Prevent route access using role middleware. - If role mismatch → redirect to correct dashboard. - No shared navigation components between roles. -------------------------------------------------- UI DESIGN REQUIREMENTS -------------------------------------------------- Theme: Premium dark fintech (Slice-inspired) Primary Gradient: #6C63FF → #8B5CF6 Background: #0F0F1B Card: #1E1E2F (glass blur) Text: #F9F9F9 Font: Inter or Satoshi Requirements: - Floating pill bottom navbar - Animated active tab - Smooth transitions - Glass cards - Skeleton loaders - Haptic feedback - Animated counters - Splash screen with logo animation -------------------------------------------------- SECURITY -------------------------------------------------- - JWT authentication - Role-based middleware - OTP in Redis - QR encrypted with HMAC SHA256 - One-time scan invalidation - Razorpay signature verification - Webhook validation - Zod validation - Rate limiting - Secure S3 -------------------------------------------------- DELIVER FULL IMPLEMENTATION -------------------------------------------------- Provide: 1) Frontend folder structure 2) Backend folder structure 3) Role-based navigation code 4) Prisma schema 5) All API routes 6) Controllers + services 7) Redis setup 8) Razorpay webhook handler 9) Twilio SMS + WhatsApp integration 10) QR generation logic 11) QR validation logic 12) Ticket PDF generator 13) Certificate generator 14) .env example 15) Deployment guide Everything must be production-ready and fully connected end-to-end. No placeholder logic. add a ai assistent to all dashboard and while sacnning the qr code the orgnizer can scann multiple qr code and the histry should be shown and he should scan through camera and and while creating the event the organizer can upload the payment qr code . Add push notifications and real-time updates using WebSocket connections for live dashboard data Add real camera-based QR scanning using the device camera API for the organizer scan feature Add event detail page with booking flow, Razorpay payment integration, and payment proof upload for students Please test the full flow: splash screen → login → OTP → register as each role (student, organizer, admin) and verify the navigation changes correctly add full backend with api keys. make a production ready app . make a production ready app implement all pessary thing frontend backend ,api keys and database make a full stack app for production end-to-end app