MERN Stack Dev Journey Project Course

Develop a course sections controller that fetches all sections, retrieves one by id, updates sections, and deletes with checks for enrolled students and removal from the course's sections array.

Create and manage course sections routes using the course section router, enabling listing, creating, updating, fetching all or single sections, and deleting with instructor authentication and bearer token protection.

Create a progress controller to let a user apply to a course by finding user, validating course, checking enrollment, adding course to progress, and pushing the user to the course.

Learn how to start a course section by updating a user's course progress with a sections array of section IDs and status, from not started to in progress.

Explore building a course-specific student ranking by listing users, validating the course ID, populating progress and sections, calculating total and completed sections, and assigning first, second, and third positions.

The lecture shows how to locate a user’s course progress, update a section status (not started, in progress, or completed), save changes, and return a confirmation.

Convert the profile controller to a public profile and remove authentication. Fetch course id from params and user id from query to display a student's progress.

Create an authenticated user profile that displays progress data by populating nested course and section details, including ongoing, completed, and not started statuses, with optional course filtering.

Build a private profile controller in a MERN app to provide per-course progress. Loop through user progress to report completed, ongoing, and not started statuses.

Implement row access middlewares for admin, student, and instructor roles to protect course routes and enforce permissions for create, update, delete, and progress actions.

Focus on building front end with vite or create react app, using Tailwind CSS, Redux Toolkit, TanStack Query, Formik, and React Router DOM to manage state, data fetching, and navigation.

Configure React Router Dom in app.jsx by installing the package, importing browser router, route, and routes, and setting up a home page route that renders a home component.

Configure react query by creating a query client and wrapping the app with the query client provider in index.tsx, then install and enable the dev tools to monitor queries.

Configure Redux Toolkit to manage authentication with an auth slice and a centralized store, using reducers, create slice, create async func, and dispatching actions for login.

Learn to build a login form in React with Formik and Yup validations, using initial values, onSubmit, and get field props, displaying email and password errors with touched and errors.

Use react query use mutation to post login data via axios, build an api service, handle cors and errors, and show login success or invalid email or password.

Persist login by saving the token to local storage after a successful login and restore it on app load to keep the Redux Toolkit store in sync across refreshes.

Learn to display login alert messages for loading, error, and success using a reusable select message template, with React icons, and backend-supplied messages during login mutations.

Reuse login logic to implement user registration in a MERN front end, adding a username field and registering via an API, then redirect to login page after a 3-second delay.

Learn to render public, student, and instructor nav bars in a MERN stack app by using redux store data, user info, and local storage to determine the logged-in role.

An instructor adds a new course using reusable login and registration patterns, wiring a course form, mutation, and private api calls.

Pass the authentication token in the authorization header as bearer to prove login, and retrieve it from the Redux store to include in the course creation mutation for authorization.

Fetch all public courses using React Query's useQuery, set up a get courses service, configure the base API and endpoints, handle loading and errors, and render the course data.

Build and fix the mern stack course details flow, including nested author population, a get single course API, and a dynamic frontend view for instructors.

Learn to add course sections by building a front-end form, wiring a mutation to post section data (course id and section name) with the token, and display sections.

Fetch all course sections created by an instructor and display them for a specific course, using the instructor course sections view and the get all sections API with token support.

Delete a course section by id through the delete endpoint using a token, with mutation and use query to refresh the list after removal.

Update a course section by sending a put request to the update course section api with the section id and new name, using a frontend form and mutation.

Learn to update a course by pre-populating a reusable add-course form with data fetched by course ID, then submit changes via a put request using a mutation flow.

Fix login and registration endpoints and enable token authentication, then display student positions by course using the ranking endpoint to show progress percentages, completed sections, and usernames.

Explore course details, enroll as a student, apply to courses, and track progress in the MERN stack dev journey project course.

Apply to a course by posting to the progress apply endpoint with the course id and user token, updating the front end and handling responses such as already enrolled.

Fetch all course sections for a given course by its id, display the course details and sections, and allow the user to start a chosen section.

Begin a section by calling the start section API with the course ID, section ID, and user token via a start section mutation to track progress.

Learn to update and filter a student's course progress via a modified private profile endpoint, fetch user profiles, filter by course ID, and summarize completed, ongoing, and not started sections.

Demonstrates building the front end progress update workflow: fetch a single course with auth, populate sections and course title from the profile API, and enable status updates for each section.

Build a frontend progress update component for the MERN stack dev journey course, using useState. Update status with a handler and sync with backend via the update section progress API.

Power the student dashboard by refactoring the backend to populate all courses, their sections, and user progress, and return total courses with per-course completed, ongoing, and not started stats.

Build the student dashboard frontend by creating a dedicated component, wiring api services with a token, and rendering course data with a course card and progress display.

learn to implement a logout action in a MERN app by dispatching a logout, removing the user from local storage, and updating the redux store to reflect a signed-out user.

Learn to protect front-end routes by creating a higher-order off route component for react-router-dom, check user data from the redux store, and navigate to login when not authenticated.

Improve the project by binding the logout action on the instructor navbar and implement role-based redirects after login, routing students to the student dashboard and instructors to the instructor dashboard.