Sql_Adv_Proj

🎓 Examination Management System - Frontend

    **A modern, responsive React application for managing educational examinations with real-time features.** [Live Demo](#) • [Features](#-features) • [Getting Started](#-getting-started) • [Documentation](#-documentation)

---

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• Getting Started
• Environment Configuration
• Available Scripts
• Routes Structure
• Components
• State Management
• API Integration
• Styling
• Contributing
• License

---

🎯 Overview

The Examination Management System Frontend is a feature-rich React application that provides an intuitive interface for students and instructors to manage educational examinations. Built with React 19, Vite, and Tailwind CSS, this application offers:

• 🔐 Role-based authentication (Student/Instructor)
• ⏱️ Real-time exam timer with auto-submission
• 📊 Comprehensive exam results and analytics
• 📱 Fully responsive design for all devices
• 🎨 Modern UI with smooth animations

---

✨ Features

For Students

| Feature | Description | |———|————-| | 📝 Take Exams | Interactive exam interface with timer | | ⏱️ Real-time Timer | Countdown with auto-submit on expiry | | 🚩 Question Flagging | Mark questions for review | | 📊 View Results | Detailed exam results with correct answers | | 📚 Browse Courses | Explore available courses | | 💾 State Persistence | Resume exams after page refresh |

For Instructors

| Feature | Description | |———|————-| | 📖 Manage Courses | Create and edit courses | | 👨‍🎓 Manage Students | View and assign students to tracks | | 📝 Create Exams | Generate exams for courses | | 📈 View Analytics | Monitor student performance |

General Features

| Feature | Description | |———|————-| | 🔐 Authentication | Secure login/register with role detection | | 🛡️ Protected Routes | Role-based access control | | 🔔 Toast Notifications | Real-time feedback on actions | | 🎨 Responsive Design | Mobile-first approach | | ⚡ Fast Performance | Optimized with Vite |

---

🛠️ Tech Stack

Technology	Version	Purpose
React	19.2.0	UI Library
Vite	7.2.5	Build Tool & Dev Server
React Router	7.12.0	Client-side Routing
Tailwind CSS	4.1.18	Utility-first CSS Framework
Axios	1.13.2	HTTP Client
React Hot Toast	2.6.0	Toast Notifications
ESLint	9.39.1	Code Linting

---

📁 Project Structure

Front_sql_projrct/
│
├── 📄 index.html               # HTML entry point
├── 📄 package.json             # Dependencies & scripts
├── 📄 vite.config.js           # Vite configuration
├── 📄 eslint.config.js         # ESLint configuration
│
├── 📁 public/                  # Static assets
│
└── 📁 src/
    │
    ├── 📄 main.jsx             # Application entry point
    ├── 📄 App.jsx              # Root component & routing
    ├── 📄 App.css              # Global styles & animations
    │
    ├── 🌐 api/
    │   └── axios.js            # Axios instance & interceptors
    │
    ├── 🧩 components/
    │   ├── auth/
    │   │   └── ProtectedRoute.jsx   # Route protection HOC
    │   │
    │   ├── common/
    │   │   ├── Badge.jsx       # Badge & StatusBadge
    │   │   ├── Button.jsx      # Button with variants
    │   │   ├── Card.jsx        # Card component
    │   │   ├── EmptyState.jsx  # Empty state display
    │   │   ├── Input.jsx       # Input with validation
    │   │   ├── Loader.jsx      # Loader & Skeleton
    │   │   ├── Modal.jsx       # Modal & ConfirmModal
    │   │   └── index.js        # Barrel export
    │   │
    │   └── layout/
    │       ├── Footer.jsx      # Footer component
    │       ├── MainLayout.jsx  # Layout wrapper with Outlet
    │       ├── Navbar.jsx      # Role-based navigation
    │       └── index.js        # Barrel export
    │
    ├── 🔄 context/
    │   ├── AuthContext.jsx     # Authentication state
    │   ├── ExamContext.jsx     # Exam state & timer
    │   └── StudentContext.jsx  # Student data state
    │
    ├── 📊 data/
    │   └── courseData.js       # Static course data
    │
    ├── 📄 Module/
    │   ├── Exam.jsx            # Legacy exam component
    │   └── home.jsx            # Legacy home component
    │
    ├── 📱 pages/
    │   ├── LandingPage.jsx     # Public landing page
    │   ├── NotFoundPage.jsx    # 404 page
    │   ├── index.js            # Barrel export
    │   │
    │   ├── auth/
    │   │   ├── LoginPage.jsx   # Login with tabs
    │   │   ├── RegisterPage.jsx # Registration form
    │   │   └── index.js
    │   │
    │   ├── exams/
    │   │   ├── ExamListPage.jsx    # Exam history
    │   │   ├── TakeExamPage.jsx    # Exam interface
    │   │   ├── ExamResultPage.jsx  # Result display
    │   │   └── index.js
    │   │
    │   ├── instructor/
    │   │   ├── InstructorDashboard.jsx  # Instructor home
    │   │   ├── InstructorCoursesPage.jsx # Course management
    │   │   ├── InstructorStudentsPage.jsx # Student management
    │   │   ├── InstructorExamsPage.jsx   # Exam management
    │   │   └── index.js
    │   │
    │   └── student/
    │       ├── StudentDashboard.jsx  # Student home
    │       ├── CoursesPage.jsx       # Course listing
    │       ├── CourseDetailPage.jsx  # Course details
    │       └── index.js
    │
    ├── 🔌 services/
    │   ├── authService.js      # Auth API calls
    │   ├── courseService.js    # Course API calls
    │   ├── examService.js      # Exam API calls
    │   └── studentService.js   # Student API calls
    │
    └── 🔧 utils/
        ├── constants.js        # API endpoints & constants
        └── helpers.js          # Utility functions

---

🚀 Getting Started

Prerequisites

• Node.js (v18.x or higher) - Download
• npm or yarn package manager
• Backend API running on http://localhost:3000

Installation

1. Clone the repository

   git clone https://github.com/your-username/examination-system.git
   cd Front_sql_projrct
   

2. Install dependencies

   npm install
   

3. Configure environment (optional)

   Create a .env file for API configuration:

   VITE_API_BASE_URL=http://localhost:3000/api/v1
   

4. Start the development server

   npm run dev
   

5. Open in browser

   http://localhost:5173
   

---

⚙️ Environment Configuration

Variable	Description	Default
VITE_API_BASE_URL	Backend API base URL	http://localhost:3000/api/v1

---

📜 Available Scripts

Script	Command	Description
Dev	npm run dev	Start development server with HMR
Build	npm run build	Build for production
Preview	npm run preview	Preview production build
Lint	npm run lint	Run ESLint

---

🛤️ Routes Structure

Public Routes

Route	Component	Description
/	LandingPage	Public landing page
/login	LoginPage	User login (Student/Instructor tabs)
/register	RegisterPage	User registration

Student Routes (Protected)

Route	Component	Description
/student/dashboard	StudentDashboard	Student home page
/student/courses	CoursesPage	Browse courses
/student/courses/:id	CourseDetailPage	Course details
/student/exams	ExamListPage	Exam history
/student/exams/take/:courseId	TakeExamPage	Take new exam
/student/exams/:examId/retake	TakeExamPage	Resume pending exam
/student/exams/:examId/result	ExamResultPage	View exam results

Instructor Routes (Protected)

Route	Component	Description
/instructor/dashboard	InstructorDashboard	Instructor home
/instructor/courses	InstructorCoursesPage	Manage courses
/instructor/students	InstructorStudentsPage	Manage students
/instructor/exams	InstructorExamsPage	Manage exams

---

🧩 Components

Common Components

Component	Props	Description
Button	variant, size, fullWidth, disabled	Customizable button
Input	label, error, icon, type	Form input with validation
Card	title, headerAction, padding, hoverable	Content card
Modal	isOpen, onClose, title, size	Modal dialog
Badge	variant, size	Status badge
Loader	size	Loading spinner
EmptyState	title, description, action	Empty content state

Layout Components

Component	Description
MainLayout	Layout wrapper with Navbar and Footer
Navbar	Role-based navigation menu
Footer	Application footer
ProtectedRoute	HOC for route protection

---

🔄 State Management

Context Providers

AuthContext

// Available values and methods
const { 
  user,              // Current user object
  isAuthenticated,   // Auth status
  isLoading,         // Loading state
  login,             // Login function
  logout,            // Logout function
  register           // Register function
} = useAuth();

ExamContext

// Available values and methods
const {
  currentExam,       // Current exam data
  questions,         // Exam questions
  answers,           // Student answers
  timeRemaining,     // Timer in seconds
  flaggedQuestions,  // Flagged question IDs
  isSubmitting,      // Submission state
  generateExam,      // Start new exam
  resumeExamFromServer, // Resume pending exam
  selectAnswer,      // Select answer for question
  toggleFlag,        // Flag/unflag question
  submitExam,        // Submit exam
  resetExam          // Clear exam state
} = useExam();

---

🔌 API Integration

Services

Service	Methods
authService	loginStudent(), registerStudent(), loginInstructor()
courseService	getAllCourses(), getCourseById(), createCourse()
examService	generateExam(), submitExamAnswers(), getExamReview(), getStudentExams(), checkExamStatus()
studentService	getAllStudents(), getStudentById(), assignTrack()

Axios Instance

The axios instance (src/api/axios.js) includes:

• Base URL configuration
• Request interceptors for auth tokens
• Response interceptors for error handling
• Automatic token attachment

---

🎨 Styling

Tailwind CSS

This project uses Tailwind CSS 4.x with Vite integration:

// vite.config.js
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()]
})

Custom Animations

Custom animations are defined in App.css:

• Fade in/out transitions
• Slide animations
• Pulse effects for timers
• Skeleton loading animations

Color Palette

Color	Usage	Tailwind Class
Blue	Primary actions	bg-blue-600
Green	Success states	bg-green-500
Red	Error/Danger	bg-red-500
Amber	Warning states	bg-amber-500
Gray	Neutral/Text	bg-gray-100

---

🔐 Authentication Flow

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Landing    │────>│   Login/    │────>│  Dashboard  │
│   Page      │     │  Register   │     │ (by role)   │
└─────────────┘     └─────────────┘     └─────────────┘
                           │
                           │ Auth Token
                           ▼
                    ┌─────────────┐
                    │ localStorage│
                    └─────────────┘

---

📝 Exam Flow

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Generate   │────>│  Take Exam  │────>│   Submit    │
│    Exam     │     │  (15 min)   │     │   Answers   │
└─────────────┘     └─────────────┘     └─────────────┘
                           │                   │
                    Timer Expires              │
                           │                   ▼
                           └──────────>┌─────────────┐
                                       │   Results   │
                                       │    Page     │
                                       └─────────────┘

---

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Code Style Guidelines

• Use functional components with hooks
• Follow React naming conventions (PascalCase for components)
• Use Tailwind utility classes for styling
• Keep components small and focused
• Add PropTypes or TypeScript types
• Write meaningful commit messages

---

📚 Additional Documentation

• Documentation.md - Detailed component documentation

---

📄 License

This project is licensed under the ISC License.

---

👨‍💻 Author

CrossITI Team

---

**⭐ Star this repository if you found it helpful!** Made with ❤️ using React and Vite