Online Exam Portal

This project serves as the frontend interface for the Online Exam Portal, providing a seamless and intuitive experience for both students and administrators.

Purpose

The primary goal of this client application is to offer a robust and user-friendly platform for managing and participating in online examinations. It facilitates:

• Student Experience: Easy access to available exams, secure exam participation, and clear review of results and history.


• Administrator Experience: Efficient creation, management, and scheduling of exams, along with performance analytics.

Core Technologies

This client application is built using modern web technologies:

• React: A declarative JavaScript library for building user interfaces.


• React Router: For handling navigation and routing within the single-page application.


• Redux Toolkit: For efficient state management, particularly for authentication and exam data.


• Material UI (MUI): A popular React UI framework for building aesthetically pleasing and responsive components.


• Axios: A promise-based HTTP client for making requests to the backend API.


• ESLint & Prettier: For code linting and formatting, ensuring code quality and consistency.

Project Structure

The project follows a well-organized directory structure to promote maintainability and scalability:

online-exam-portal-client/

├── public/

│   └── index.html             # Main HTML entry point

├── src/

│   ├── assets/                # Static assets like images, markdown files

│   ├── components/            # Reusable UI components (e.g., NavBar, Auth forms, Exam cards)

│   │   ├── AdminPage/

│   │   ├── Authentication/

│   │   ├── Exam Creation/

│   │   ├── Manage Exams/

│   │   ├── NavBar/

│   │   ├── SideBar/

│   │   ├── StudentPage/

│   │   └── ...

│   ├── pages/                 # Top-level page components (e.g., Home, About, AdminDashboard, StudentDashboard)

│   │   ├── admin/

│   │   └── student/

│   ├── redux/                 # Redux store configuration and slices (auth, exams, questions)

│   │   ├── authSlice.js

│   │   ├── examSlice.js

│   │   ├── questionSlice.js

│   │   └── store.js

│   ├── App.css                # Global styles for the App component

│   ├── App.jsx                # Main application component with routing

│   ├── index.css              # Global CSS resets and base styles

│   ├── main.jsx               # Entry point for React application

│   ├── ThemeContext.jsx       # Context for managing theme (light/dark mode)

│   └── ...

├── eslint.config.js           # ESLint configuration

├── index.html                 # Public HTML file

├── manifest.json              # Web app manifest

├── vite.config.js             # Vite build tool configuration (if used)

└── package.json               # Project dependencies and scripts

Key Features & Components

Authentication

• Login (src/components/Authentication/Login/Login.jsx): Handles user authentication via email and password. Supports role-based redirection to student or admin dashboards.


• Signup (src/components/Authentication/Signup/Signup.jsx): Allows new users to register with name, email, and password.


• Forget Password (src/components/Authentication/Forget Password/ForgetPassword.jsx): Provides a mechanism for users to reset their passwords.

Navigation

• NavBar (src/components/NavBar/NavBar.jsx): A persistent navigation bar providing access to Home, About, Contact, Login/Signup, and Logout functionality. It adapts its display based on user authentication status and screen size.


• SideBar (src/components/SideBar/SideBar.jsx): A contextual sidebar that appears on dashboard pages (Admin and Student). It dynamically displays relevant navigation options based on the user's role and the current section.

Admin Functionality

• AdminPage (src/components/AdminPage/AdminPage.jsx): The main container for admin-specific views, managed by the SideBar.


• Exam Creation (src/components/Exam Creation/ExamCreation.jsx): Allows administrators to initiate the creation of new exams, specifying the title and type (Objective/Subjective).


• Objective Exam Creation (src/components/Objective Exam Creation/ObjectiveExamCreation.jsx): Facilitates the creation of objective (MCQ) questions, including options and correct answer selection.


• Subjective Exam Creation (src/components/Subjective Exam Creation/SubjectiveExamCreation.jsx): Enables the creation of subjective questions with corresponding answers.


• Manage Exams (src/components/Manage Exams/ManageExam.jsx): Provides a view of all created exams, with options to view details or delete them.


• View Exam (src/components/Manage Exams/ViewExam.jsx): Displays the detailed structure of a selected exam, including all questions and options/answers.

Student Functionality

• StudentPage (src/components/StudentPage/StudentPage.jsx): The main container for student-specific views, managed by the SideBar.


• Exams Page (src/components/ExamsPage/ExamsPage.jsx): Lists available exams for students, with filtering options for subject and type.


• Start Exam (src/components/StartExam/StartExam.jsx): The interface for students to take an exam, displaying questions one by one and handling objective (MCQ) and subjective answer inputs.


• View Exam (src/components/ViewExam/ViewExam.jsx): Allows students to review their past exam attempts, showing their answers alongside the correct ones.


• Result (src/components/Result/Result.jsx): Displays a summary of the student's performance across all taken exams, including scores, percentages, and visual charts.

Shared Functionality

• Account Settings (src/components/Account Settings/AccountSettings.jsx): Displays the logged-in user's profile information.


• Change Password (src/components/Change Password/ChangePassword.jsx): Allows users to update their password.

State Management (Redux)

The src/redux directory houses the Redux store and individual slice reducers for managing application state:

• authSlice.js: Manages authentication state, including user information, token, role, loading status, and errors. It handles login and signup asynchronous operations.


• examSlice.js: Manages the state of exams being created by administrators, including exam titles and associated questions.


• questionSlice.js: Manages a temporary list of questions during the exam creation process.


• subjectiveExamSlice.js: Specifically manages the state for subjective questions during exam creation.

Integration Point: The authSlice is crucial for determining user roles and controlling access to protected routes via PrivateRoute.jsx.

Routing

The application uses react-router-dom for client-side routing. Key routes are defined in src/App.jsx:

• Public Routes: /, /signup, /login, /about, /contact, /forgetPassword.


• Protected Admin Routes: /admin/dashboard, /exam-creation/objective, /exam-creation/subjective, /manage-exams/:examTitle. These routes are protected by PrivateRoute and require the 'admin' role.


• Protected Student Routes: /student/dashboard, /start-exam/:examTitle, /exam/:examTitle/review. These routes are protected by PrivateRoute and require the 'student' role.


• Shared Protected Routes: /change-password. Accessible by both 'admin' and 'student'.

PrivateRoute.jsx is a custom component that checks for a valid token and role before rendering the child routes, redirecting to /login or / if unauthorized.

Best Practices & Usage Patterns

• Component Reusability: Components are designed to be modular and reusable across different parts of the application (e.g., NavBar, Footer, Card components).


• Lazy Loading: For performance optimization, route-based code splitting is implemented using React.lazy and Suspense for components that are not immediately needed (e.g., dashboard pages, exam creation forms).


• Theme Context: The ThemeContext.jsx provides a way to manage and toggle between light and dark modes globally, affecting the application's appearance.


• Error Handling: API errors and form validation errors are handled gracefully with user feedback mechanisms like Snackbars and Alerts.


• State Management: Redux Toolkit is used for global state, while local component state (useState) is used for UI-specific states.


• LocalStorage: Used for persisting authentication tokens and exam history to provide a seamless experience across sessions.

Common Pitfalls & Gotchas

• API Endpoint Consistency: Ensure that API endpoints used in the client (https://online-exam-portal-server.onrender.com/api/...) are correctly matched with the backend implementation.


• Role Management: The client relies on the backend to correctly assign and return user roles. Incorrect role assignments on the backend can lead to access issues.


• State Synchronization: Be mindful of synchronizing state between Redux, local component state, and localStorage, especially during authentication and exam history management.


• Form Validation: Implement comprehensive client-side validation to provide immediate feedback to users, but always rely on server-side validation for security.


• Conditional Rendering: Ensure that components and UI elements are rendered correctly based on user roles and authentication status.

This documentation provides a foundational understanding of the online-exam-portal-client repository. For detailed implementation specifics, refer to my github repo https://github.com/Siddharth2k14/online-exam-portal-client/tree/ce234bfeea91856277480f6af3077e7cc066eb62