Online Exam Portal

Siddharth2k14 — Wed, 06 Aug 2025 21:47:14 +0000

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

About Online Exam Portal project -> The ExamMaster

Siddharth2k14 — Sun, 06 Jul 2025 19:34:41 +0000

🚀 Building My Online Exam Portal: A Developer’s Journey (Work in Progress!) 🎓
Over the last few weeks, I’ve been deeply engaged in building an Online Exam Portal — a platform crafted to simplify exam creation, participation, and result tracking for students and admins.
💡 The Vision:
To create a full-stack application where:
🧑‍🎓 Students can take objective & subjective exams, see instant results, and track their history
🧑‍💼 Admins can create exams, view submissions, and manage everything in a streamlined dashboard
🛠️ The Tech Stack Evolution:
Choosing the right stack was the hardest part.
Initially, I explored Firebase and Supabase for their real-time capabilities and plug-and-play setup. However, I quickly hit walls:
🔐 Authentication quirks and limitations in customization
📦 Difficulty modeling data for scalable exam structures
📉 Too much reliance on vendor-specific architecture
This led to multiple revisions and eventually a complete pivot toward a more flexible and developer-controlled stack:
Frontend: React.js + Vite ⚛️
Backend: Node.js + Express.js 🚂
Database: MongoDB (left Firebase & Supabase behind!) 🍃
State Management: Redux Toolkit 💾
UI Library: Material UI (for sleek, responsive design) 🎨
🔑 Core Features So Far:
✅ Secure authentication with role-based access (student/admin)
✅ Objective & Subjective exam creation
✅ Real-time exam participation and scoring
✅ Detailed performance insights and analytics
✅ Exam history tracking (locally and persistently)
⚠️ Challenges I Faced:
Tech Stack Paralysis: Picking between ease (Firebase) vs. flexibility (MongoDB & custom backend)
Auth Integration: Handling secure, custom login flows was harder than anticipated
Data Migration: Shifting from Supabase/Firebase to MongoDB was painful, but 100% worth it
State Syncing: Redux taught me a lot about clean state management across complex UI flows
⏳ Still a Work in Progress!
I’m refining UI/UX, adding advanced features (like scheduling & result analysis), and aiming for a polished MVP soon.
This has been an advantageous learning experience, and I’m excited to keep pushing forward!
🔗 https://github.com/Siddharth2k14/online-exam-portal
Let’s connect if you’re building something similar, interested in collaborating, or just want to nerd out over dev stuff 😄

DEV Community: Siddharth2k14