MERN Stack Online Quiz Portal Application

Set up the client side of the MERN stack quiz portal by creating a React app, organizing client and server folders, and installing React Router Dom, Axios, and Redux Toolkit.

Set up the front end with npm modules, import the entity components css, and explore the button component’s type prop while planning separate stylesheets for forms and models.

Develop four stylesheets for the MERN stack online quiz portal: alignments.css, theme.css, and text elements.css. Implement a theme with a primary color and a secondary color to control styling globally.

Design and implement authentication screens for login and registration, using a common folder structure (common, user, admin) and browser router routes for the front end.

Wraps login and registration forms into a cohesive screen, adds React Router link navigation between them, handles onFinish to log values, and tightens styling for a consistent user interface.

Set up a node.js and Express.js backend by initializing npm, creating package.json, and managing node_modules, then install Express.js, mongoose, dotenv, and nodemon to prepare for Heroku deployment.

Set up a MongoDB Atlas cluster, create a database and users collection, and connect the backend with mongoose using a .env URL and campus, validating the connection.

build an authentication module with login and registration apis using a mongoose user model, and implement password hashing with a salt in registration. cover routes and standard response structure.

Connects the front end to the back end through a proxy and a dedicated Axios instance. It implements a register user API call with proper headers and error handling.

Learn to implement a login endpoint using JWT, issuing a token encrypted with the user id and valid for one day. Store the token in local storage to authorize requests.

Demonstrates implementing authorization and protected routes with redux toolkit, token validation, and login flow, storing tokens in local storage and securing API requests with authorization headers.

Implement protected routes with middleware that validates JSON web tokens, calls get user info, and updates Redux with the authenticated user.

Design the default layout with a left sidebar and header, render the content area, and show the logged-in user name from Redux, with role-based menu and layout.css styling.

Develop a responsive side menu with user and admin roles, protected routes, and navigation to home, reports, and profile, including collapse and active route highlighting and logout handling.

This lecture demonstrates building the admin exam module and menu in a MERN stack quiz portal, including adding exams, creating questions, and routing for admin and user views.

Create an add exam form for the MERN stack quiz portal with exam name, duration, total marks, passing marks, a category select, and a row-based layout with a submit handler.

Build the exam model and add exam API in the MERN quiz portal, implementing a mongoose schema with question references and a post /exams/add route with auth.

Implement a spinner loader using Redux Toolkit, showing the loader during API requests and hiding it after responses, with loading state controlled by a loader slice.

List exams in a table and enable updating exams by adding questions. Fetch all exams and exam by id with axios and redux, handling loading and navigation to edit.

Master the edit exam flow in a MERN stack app: dynamic title, fetch by id, pre-populate details and questions in a two-tab form, and submit updates.

Learn how to implement delete operations for exams in a MERN stack app, covering backend API endpoints, frontend Axios calls, and UI integration with loading states and success messages.

Explore the questions module for the exam, including adding, editing, and deleting questions, and building the questions model and routes to link questions with exams.

Enable the add question modal in the front end to create questions with name, character option, and options, post to the add question endpoint, and refresh exam data after submission.

Display exam questions by populating referenced data from the exam model, render a questions table with options and the correct answer, and prepare for editing in the next lecture.