System Requirements Document (SRD)

red-frontend

1. Introduction

The red-frontend project is a modern, animated web application designed as part of Usama Tahir's Final Year Project (FYP) titled "Exam Eye – AI-Based Online Exam Monitoring and Cheating Detection System". This system aims to provide a seamless, visually appealing, and technically robust frontend for an online exam monitoring platform. The application will simulate real-world functionality, including dynamic role-based routing, cheating detection, and flag generation based on violations.

The project is tailored to meet the specific needs of users in Pakistan (PK), ensuring locale-specific considerations such as time zones and user preferences. The frontend will be built using React.js with Vite, adhering to a design system that emphasizes modern aesthetics, smooth animations, and performance.

2. System Overview

The red-frontend system will serve as the user interface for the Exam Eye platform, enabling teachers and students to interact with the system seamlessly. Key features include:

• Role-Based Navigation: Dynamic routing based on user roles (Teacher/Student) post-login.
• Cheating Detection UI: Real-time flag generation and animations triggered by violations.
• Interactive Dashboards: Animated dashboards for teachers and students, providing an intuitive and engaging user experience.
• Mock Data Integration: Simulated backend behavior to demonstrate exam monitoring, flagging, and results functionality.
• Future-Ready Architecture: A modular and scalable frontend that can easily integrate with a backend in the future.

3. Functional Requirements

• As a User, I should be able to log in and be dynamically routed to my dashboard based on my role (Teacher/Student).
• As a Teacher, I should be able to:
  • View an animated dashboard with key metrics.
  • Create exam papers using a dynamic form.
  • Monitor students during exams, with real-time status updates and flag animations for violations.
  • View submissions and expand student answers.
  • Reveal results with animations.
• As a Student, I should be able to:
  • View available exams with hover effects on cards.
  • Take exams with smooth question transitions and a timer animation.
  • Receive visual warnings for violations during exams.
  • View results with an animated score reveal.
• As a System, I should generate flags dynamically based on violations and display them with animations.

4. User Personas

1. Teacher

   • Role: Administer exams, monitor students, and evaluate results.
   • Key Needs: Intuitive monitoring tools, dynamic flagging, and smooth navigation.

2. Student

   • Role: Take exams and view results.
   • Key Needs: User-friendly exam interface, clear warnings for violations, and engaging animations.

5. Visuals Colors and Theme

Color Palette

• Primary: #4F46E5 (Indigo/Blue)
• Primary Light: #6366F1 (Lighter Indigo)
• Secondary: #A855F7 (Purple)
• Accent: #F59E0B (Amber)
• Highlight: #F97316 (Orange)
• Background: #F9FAFB (Soft Light Gray)
• Surface: rgba(255, 255, 255, 0.8) (Glassmorphic White)
• Text: #111827 (Dark Gray)
• Text Muted: #6B7280 (Muted Gray)
• Border: rgba(209, 213, 219, 0.5) (Light Gray Border)

Design Tokens

• Danger: #EF4444 (Red)
• Success: #22C55E (Green)

6. Signature Design Concept

Interactive Glassmorphic Dashboard with Real-Time Animations

The homepage/dashboard will feature a glassmorphic design with dynamic, real-time animations to captivate users. Key elements include:

• Interactive Cards: Cards will "float" slightly on hover (scale 1.03) and cast soft shadows.
• Real-Time Flag Counter: A live counter that increments dynamically with a pulse animation whenever a violation occurs.
• Monitoring Page: A grid of student cards that change colors based on status (e.g., green for active, red for flagged). Clicking on a card will expand it into a detailed view with a smooth scaling animation.
• Exam Interface: A timer that visually "fills" as time progresses, with smooth transitions between questions.
• Results Reveal: A confetti-like animation (using Framer Motion) when scores are revealed.

Libraries:

• Framer Motion: For animations like hover effects, page transitions, and dynamic flag updates.
• React Router DOM: For seamless navigation and role-based routing.

7. Interaction Model & Motion Direction

Interaction Model

• Landing/Home Page: Parallax scrolling with layered depth and smooth transitions between sections.
• Internal Pages: Animated interaction model with hover effects, staggered list animations, and smooth modals.

Motion Direction

• Page Transitions: Fade + slight slide on route change.
• Hover Effects: Scale and shadow increase for cards and buttons.
• Dynamic Updates: Pulse or shake animations for real-time flag updates.
• Smooth Modals: Fade + scale in for modals.

8. Non-Functional Requirements

• Performance: Maintain a smooth user experience with optimized animations and lightweight CSS.
• Scalability: Ensure the frontend is modular and ready for backend integration.
• Accessibility: Follow accessibility best practices for color contrast and keyboard navigation.
• Localization: Support locale-specific settings (e.g., time zones for PK).

9. Tech Stack

• Frontend: React.js with Vite
• State Management: Context API
• Routing: React Router DOM
• Animations: Framer Motion
• Styling: Simple CSS (modular or global)

10. Assumptions and Constraints

• The system will use mock data for all services, simulating real-world behavior.
• All tools and libraries used must be free and open-source.
• The application must adhere to the specified design system and animation guidelines.

11. Glossary

• Glassmorphism: A design style featuring translucent surfaces with blurred backgrounds.
• Flag: A visual indicator of a cheating violation.
• Parallax: A scrolling effect where background layers move at different speeds.
• Role-Based Routing: Navigation logic that directs users to different pages based on their role (e.g., Teacher or Student).

This updated SRD incorporates dynamic role-based routing and real-time flag generation based on violations, ensuring the red-frontend project aligns perfectly with Usama's vision.