Building a Web-Based Classroom Application

As the world is moving to the internet, so are our tools for learning and acquiring knowledge in different disciplines. Right now on the web, there is a plethora of online platforms that offer both educators and students options to teach and learn different topics remotely, without the necessity to be physically co-located in a classroom.

In this chapter, we will build a simple online classroom application, by extending the MERN stack skeleton application. This classroom application will support multiple user roles, the addition of course content and lessons, student enrollments, progress tracking, and course enrollment statistics. While building out this application, we will uncover more capabilities of this stack, such as how to implement role-based access to resources and actions, how to combine multiple schemas, and how to run different...

Introducing MERN Classroom

MERN Classroom is a simple online classroom application, which allows educators to add courses that are made up of various lessons, while students can enroll on these courses. Additionally, the application will allow students to track their progress throughout the course, whereas instructors can monitor how many students have enrolled in/on a course, and how many have completed each course. The completed application, with all these features, will end up with a home page as shown in the following screenshot:

The code for the complete MERN Classroom application is available on GitHub in the repository at https://github.com/PacktPublishing/Full-Stack-React-Projects-Second-Edition/tree/master/Chapter06/mern-classroom. You can clone this code and run the application as you go through the code explanations for the rest of this chapter.

The views needed for...

Updating the user with an educator role

Users who sign up to the MERN Classroom application will have the choice to become an educator on the platform by selecting this option in the EditProfile form component. This option in the form will look as follows—showing when the user isn't an educator, versus when they choose to be an educator:

When a user chooses to be an educator, in contrast to being a regular user, they will be allowed to create and manage their own courses. As pictured in the following screenshot, MERN Classroom will display a TEACH option in the navigation menu for educators only, that is, it won't be shown to regular users:

In the following sections, we will add this educator feature, by first updating the user model, then the EditProfile view, and finally by adding a TEACH link to the menu that will only be visible to educators.

...

Adding courses to the classroom

Educators in the MERN Classroom can create courses and add lessons to each course. In this section, we will walk through the implementations of the course-related features, such as adding new courses, listing courses by a specific instructor, and displaying the details of a single course. To store the course data and enable course management, we will start by implementing a Mongoose schema for courses, then backend APIs to create and list the courses, along with frontend views for both authorized educators and for regular users interacting with courses in the application.

Defining a Course model

The Course schema—defined in server/models/course.model.js—will have simple fields...

Updating courses with lessons

Each course in the MERN Classroom will contain a list of lessons that make up the course content and what the students need to cover when they enroll. We will keep the lesson structure simple for this application, putting more emphasis on the implementation of managing lessons and allowing students to go through lessons in order to complete a course. In the following sections, we will focus on the implementation of managing lessons for a course, and we will also look at how to update an existing course—either to edit details or to delete the course. First, we will look into how to store lesson details, then we will implement the full-stack features to allow instructors to add lessons, update lessons, update details of the course, and delete a course.

...

Publishing courses

In the MERN Classroom, only courses that are published will be available to other users on the platform for enrollment. Once an instructor has created the course and updated it with lessons, they will have the option to publish it. Published courses will be listed on the home page, and all visitors will be able to view them. In the rest of this section, we will look into the implementation of allowing instructors to publish a course and listing these published courses in the frontend.

Implementing the publish option

Instructors for each course will be given the option to publish their course after they have added at least one lesson to the course. Publishing a course will also mean that the course can no...

Enrolling on courses

All visitors to the MERN Classroom application will have the option to sign in and then enroll on any of the published courses. Enrolling on a course would give them access to the lesson details and would allow them to go through the lessons systematically to complete the course. In order to implement this feature, in this section, we will first define an Enrollment model to store enrollment details in the database. Then, we will add the backend API to create new enrollments when end users interact with the Enroll component that will be added to the frontend. Finally, we will implement the view that enables a student to see and interact with the content from the course on which they are enrolled.

Defining an Enrollment model

...

Tracking progress and enrollment stats

In a classroom application such as MERN Classroom, it can be valuable to let students visualize their progress in enrolled courses, and let instructors see how many students enrolled and completed their courses.

In this application, once a student is enrolled on a course, they will be able to go through each lesson in it, and mark it complete until all the lessons are done, and the whole course is complete. The application will leave visual cues to let a student know the state of their enrollments in courses. For instructors, once they publish a course, we will show the total number of students who enrolled on the course, and the total number of students who completed the course.

In the following sections, we will implement these capabilities, starting with letting users complete lessons and track their progress in a course, then listing...

Summary

In this chapter, we developed a simple online classroom application called MERN Classroom, by extending the skeleton application. We incorporated functionality that allowed users to have multiple roles, including educator and student; to add and publish courses with lessons as an instructor; to enroll on courses and complete lessons as a student; and to keep track of course completion progress and enrollment statistics.

While implementing these features, we practiced how to extend the full-stack component slices that make up the frontend–backend-synced application. We added new features by simply implementing data schemas and models, adding new backend APIs, and integrating these with new React components in the frontend to complete the full-stack slice. By building this application up gradually from smaller units of implementation to complex and combined features...