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

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD)

1. Introduction

This document outlines the requirements for the development of a fully production-ready mobile application called “Collevento”, a premium college event management platform. The application will feature strict role-based navigation and functionality tailored to three distinct user roles: Student, Organizer, and Admin. Each role will have a completely unique bottom tab navigation and dashboard layout with no shared tabs between roles. The platform will include AI assistance, dynamic navigation, real-time updates, camera-based QR scanning, payment QR code upload, push notifications, and robust security measures, ensuring a seamless and secure user experience. The application will be fully connected end-to-end, including frontend, backend, APIs, database, and deployment.

2. System Overview

Collevento is designed to streamline college event management by providing role-specific dashboards and functionalities. The system dynamically loads navigation and features based on the user's role after login, ensuring strict separation of functionalities. It will include AI-powered assistance integrated into all dashboards, QR code scanning using the device camera API, payment integration, real-time updates via WebSocket connections, push notifications, and robust security measures. The application will be fully production-ready, with complete implementation of frontend, backend, database, APIs, and deployment.

3. Functional Requirements as Story Points

Page 1 of 9

Common Authentication Flow:

  • As a User, I should be able to enter my phone number to initiate login.
  • As a User, I should receive an OTP via Twilio for verification.
  • As a User, I should have my OTP stored in Redis with a 5-minute expiry.
  • As a User, I should be limited to a maximum of 3 OTP requests per 10 minutes.
  • As a User, I should be able to verify my OTP to proceed.
  • As a New User, I should be able to register by providing my full name, college name (mandatory), role (Student/Organizer/Admin), and uploading a profile photo to S3.
  • As a User, I should receive a JWT and Refresh Token upon successful authentication.
  • As a User, I should see role-specific navigation dynamically loaded after login.

Role-Based Navigation:

Page 2 of 9

Student:

  • As a Student, I should see a Home tab with a welcome header, animated stats, upcoming events, and an AI Assistant floating button.
  • As a Student, I should be able to browse approved events, search and filter them, view details, and book events via Razorpay.
  • As a Student, I should be able to upload payment proof if required during event booking.
  • As a Student, I should be able to view my booking history, display QR tickets, download ticket PDFs, and check ticket status (Pending/Confirmed/Attended).
  • As a Student, I should be able to download participation certificates.
  • As a Student, I should be able to view and edit my profile, including college name, and log out.

Organizer:

  • As an Organizer, I should see a Dashboard tab with total events, registrations, revenue, attendance percentage, real-time updates via WebSocket, and an AI Assistant floating button.
  • As an Organizer, I should be able to create events, edit events, upload banners to S3, upload certificate templates, and upload payment QR codes during event creation.
  • As an Organizer, I should be able to view bookings and approve payments.
  • As an Organizer, I should be able to scan multiple QR codes using the device camera API, validate them, mark attendance, view participant details, and see scan history.
  • As an Organizer, I should be able to view event-wise registrations, revenue graphs, attendance rates, and export analytics as CSV files.
  • As an Organizer, I should be able to edit my profile, view my college name, and log out.
Page 3 of 9

Admin:

  • As an Admin, I should see an Overview tab with total users, total events, revenue, attendance logs, and an AI Assistant floating button.
  • As an Admin, I should be able to approve or reject pending events and notify organizers.
  • As an Admin, I should be able to view users, disable accounts, and manage roles.
  • As an Admin, I should be able to view system analytics, college-wise stats, revenue summaries, and export reports.
  • As an Admin, I should be able to send global SMS, WhatsApp messages, and push notifications.

Additional Features:

  • As a User, I should receive push notifications for updates and reminders.
  • As a User, I should experience real-time updates via WebSocket connections.
  • As a Student, I should be able to view an event detail page with booking flow, Razorpay payment integration, and payment proof upload.
  • As an Organizer, I should be able to scan QR codes using the device camera API and view scan history.
  • As an Organizer, I should be able to upload payment QR codes during event creation.
Page 4 of 9

4. User Personas

  1. Student: A college attendee who participates in events, books tickets, and downloads certificates.
  2. Organizer: A college representative responsible for creating and managing events, scanning QR codes, and monitoring analytics.
  3. Admin: A platform administrator who oversees user accounts, event approvals, and system-wide analytics.

5. Visuals Colors and Theme

Theme:

Premium dark fintech (Slice-inspired)

Color Palette:

  • Primary Gradient: #6C63FF → #8B5CF6
  • Background: #0F0F1B
  • Card: #1E1E2F (glass blur)
  • Text: #F9F9F9
  • Font: Inter or Satoshi
Page 5 of 9

UI Design Requirements:

  • Floating pill bottom navbar
  • Animated active tab
  • Smooth transitions
  • Glass cards
  • Skeleton loaders
  • Haptic feedback
  • Animated counters
  • Splash screen with logo animation

6. Non-Functional Requirements

  • Scalability: The system must handle high traffic and concurrent users efficiently.
  • Performance: Ensure smooth transitions, fast loading times, and real-time updates.
  • Security: Implement JWT authentication, role-based middleware, OTP rate limiting, HMAC SHA256 encryption for QR codes, Razorpay signature verification, and secure S3 storage.
  • Reliability: Ensure uptime and fault tolerance through robust backend architecture.
  • Usability: Provide an intuitive user interface with AI assistance and seamless navigation.

7. Tech Stack

Frontend:

  • React Native for mobile app development
Page 6 of 9

Backend:

  • Python
  • FastAPI

Database:

  • MySQL or MariaDB (with Alembic for migrations)

AI Models:

  • GPT 5.2 for user-friendly responses
  • Claude 4.5 Opas for academic or coding work

AI Tools:

  • Litellm for LLM Routing
  • Langchain

Local Orchestration:

  • Docker
  • docker-compose

Server-Side Orchestration:

  • Kubernetes
Page 7 of 9

8. Assumptions and Constraints

  • Users must have a valid phone number for OTP authentication.
  • College name is mandatory during registration.
  • Role-based navigation must be strictly enforced.
  • Redis is used for OTP storage and QR code invalidation.
  • Payment integration is handled via Razorpay.
  • Push notifications require Firebase Cloud Messaging (FCM).
  • Real-time updates are implemented using WebSocket connections.
  • AI Assistant must be integrated into all dashboards.
  • QR codes must be scanned using the device camera API.
Page 8 of 9

9. Glossary

  • JWT: JSON Web Token, used for authentication.
  • Redis: In-memory data structure store, used for caching and OTP storage.
  • S3: Amazon Simple Storage Service, used for storing images and files.
  • WebSocket: A protocol for real-time communication.
  • HMAC SHA256: Hash-based Message Authentication Code, used for QR code encryption.
  • Razorpay: Payment gateway for handling transactions.
  • AI Assistant: An AI-powered chatbot for user support.
  • QR Code: Quick Response Code, used for ticket validation and attendance tracking.
  • Socket.io: Real-time communication library for WebSocket connections.

This document provides a comprehensive overview of the requirements for the Collevento application, ensuring a production-ready implementation with robust features, AI integration, and security measures.

Page 9 of 9

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.