DEV Community

Siddharth2k14
Siddharth2k14

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)