red-frontend

byUsama Tahir

You are a senior frontend engineer and UI/UX designer. Your task is to build a complete frontend for my Final Year Project: "Exam Eye – AI-Based Online Exam Monitoring and Cheating Detection System" IMPORTANT CONSTRAINTS: - Use ONLY free and open-source tools - Use React.js with Vite - Use simple CSS (no Tailwind, no paid UI libraries) - Use React Router DOM - Use Context API for state - Use Framer Motion (FREE) for animations --------------------------------------- 🎯 CORE GOAL: Build a fully functional, modern, animated web application that: - Looks like a real SaaS product - Is visually appealing and smooth - Uses animations to enhance UX (not distract) - Uses mock data but is backend-ready --------------------------------------- 🎨 DESIGN SYSTEM (VERY IMPORTANT): Create a modern UI with: Color Palette: - Primary: Indigo / Blue (#4F46E5) - Secondary: Purple / Gradient tones - Background: Soft light gray (#F9FAFB) - Cards: White (#FFFFFF) - Danger: Red (#EF4444) - Success: Green (#22C55E) Style: - Glassmorphism (light) - Soft shadows - Rounded corners (border-radius: 16px+) - Clean spacing (padding/margins consistent) Typography: - Modern sans-serif (Inter or system font) - Clear hierarchy (headings, labels, text) --------------------------------------- ✨ ANIMATION REQUIREMENTS (IMPORTANT): Use Framer Motion for: 1. Page Transitions: - Fade + slight slide on route change 2. Cards: - Hover: scale(1.03) + shadow increase 3. Buttons: - Smooth hover + click feedback 4. Modals: - Fade + scale in 5. Lists/Tables: - Smooth appearance (stagger animation) 6. Alerts/Flags: - Shake or pulse effect when violation occurs 7. Sidebar: - Smooth expand/collapse IMPORTANT: - Keep animations FAST and smooth - Avoid over-animation - Maintain performance --------------------------------------- 🧱 TECH STACK: - React.js (Vite) - Simple CSS (modular or global) - Framer Motion (for animations) - React Router DOM - Context API --------------------------------------- 📁 PROJECT STRUCTURE: /src /components /pages /context /services /data /styles /animations (optional for reusable motion configs) --------------------------------------- 🧠 ARCHITECTURE RULE: - No hardcoded data inside components - All data from services - Services use mock data - Easy to replace later with backend --------------------------------------- 🔐 AUTH + ROUTING: - Login/Register pages with animation - Role-based routing (Teacher / Student) - Protected routes --------------------------------------- 👨‍🏫 TEACHER DASHBOARD (ANIMATED): - Dashboard cards (animated on load) - Create Paper form (smooth dynamic inputs) - Monitoring page: - Student cards with status colors - Pulse animation on violations - Submissions: - Expandable student answer view - Results: - Animated reveal of scores --------------------------------------- 🎓 STUDENT DASHBOARD (ANIMATED): - Available exams: - Card hover effects - Exam interface: - Smooth question transitions - Timer animation - Flag system: - Visual warning animations - Results: - Score reveal animation --------------------------------------- 🚨 CHEATING SYSTEM UI: - Flag counter (animated increment) - Warning flash (red pulse) - Auto logout animation (fade out) --------------------------------------- 📦 MOCK DATA + SERVICES: - Same as before - Must simulate real system behavior --------------------------------------- ⚙️ FUNCTIONALITY: - Fully working UI - Simulated: - Exam flow - Flags - Monitoring - Results --------------------------------------- 🔁 FUTURE READY: - Only services layer changes for backend - UI stays intact --------------------------------------- 📦 OUTPUT REQUIRED: - Full React project - Clean code - CSS + animation usage - Framer Motion integrated properly - Instructions to run --------------------------------------- 🚫 AVOID: - Overly flashy animations - Laggy UI - Messy CSS - UI clutter --------------------------------------- 🔥 FINAL GOAL: Build a beautiful, animated, modern SaaS-style exam system that impresses both visually and technically during FYP defense.