Full-Stack React Projects

Learn MERN stack development by building modern web apps using MongoDB, Express, React, and Node.js, 2nd Edition

Shama Hoque

• Verlag: Packt Publishing
• Jahr: 2020
• ISBN:
  9781839213113
• Thema: Computer Science
• Thema: Web Services & APIs

A practical, project-based guide to full-stack JavaScript web development combining the power of React with industry-tested server-side technologies

Key Features

• Build your career as a full-stack developer with this practical guide
• Understand how the different aspects of a MERN application come together through a series of practical projects
• Master the MERN stack by building robust social media, E-commerce store, and web-based VR game apps

Book Description

Facebook's React combined with industry-tested, server-side technologies, such as Node, Express, and MongoDB, enables you to develop and deploy robust real-world full-stack web apps. This updated second edition focuses on the latest versions and conventions of the technologies in this stack, along with their new features such as Hooks in React and async/await in JavaScript. The book also explores advanced topics such as implementing real-time bidding, a web-based classroom app, and data visualization in an expense tracking app.Full-Stack React Projects will take you through the process of preparing the development environment for MERN stack-based web development, creating a basic skeleton app, and extending it to build six different web apps. You'll build apps for social media, classrooms, media streaming, online marketplaces with real-time bidding, and web-based games with virtual reality features. Throughout the book, you'll learn how MERN stack web development works, extend its capabilities for complex features, and gain actionable insights into creating MERN-based apps, along with exploring industry best practices to meet the ever-increasing demands of the real world.By the end of this React book, you'll be able to build production-ready MERN full-stack apps using advanced tools and techniques in modern web development.

What you will learn

• Extend a basic MERN-based application to build a variety of applications
• Add real-time communication capabilities with Socket.IO
• Implement data visualization features for React applications using Victory
• Develop media streaming applications using MongoDB GridFS
• Improve SEO for your MERN apps by implementing server-side rendering with data
• Implement user authentication and authorization using JSON web tokens
• Set up and use React 360 to develop user interfaces with VR capabilities
• Make your MERN stack applications reliable and scalable with industry best practices

Who this book is for

This is one of the most useful web development books for JavaScript developers who may have worked with React but have minimal experience in full-stack development with Node, Express, and MongoDB.

]]>

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 query operations in order to gather stats. By the end of this chapter, you will be familiar with the techniques that are needed to easily integrate new full-stack features in any MERN-based application.

We will build out the online classroom application by covering the following topics in this chapter:

• Introducing MERN Classroom
• Adding an educator role to users
• Adding courses to the classroom
• Updating courses with lessons
• Publishing courses
• Enrolling in courses
• Tracking progress and enrollment stats

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 the MERN Classroom application will be developed by extending and modifying the existing React components in the MERN skeleton application. The component tree in the following diagram lays out all the custom React components that make up the MERN Classroom frontend, and also exposes the composition structure that we will use to build out the views in the rest of the chapter:

We will add new React components that are related to courses, lessons, and enrollments; and we will also modify existing components such as the EditProfile, Menu, and Home components as we build out the different features of the MERN Classroom application in the rest of the chapter. Most of these features in the Classroom application will depend on the user's ability to become an educator. In the next section, we will begin implementing the MERN Classroom application by updating the user in order to give them the option to choose an educator role.

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 a role to the user model

The existing user model in the MERN skeleton application will need an educator value that will be set to false by default in order to represent regular users, but that can be set to true to represent the users who are also educators. To add this new field to the user schema, we will add the following code.

mern-classroom/server/models/user.model.js:

educator: {
 type: Boolean,
 default: false
}

This educator value must be sent to the frontend, with the user details received once the user has successfully signed in, so that the view can be rendered accordingly to show information that is relevant to the educator. To make this change, we need to update the response that was sent back in the signin controller method as highlighted in the following code:

mern-classroom/server/controllers/auth.controller.js

...
l
 token,
 user: {
 _id: user._id,
 name: user.name,
 email: user.email,
 educator: user.educator
 }
 })
...
} 

By sending this educator field value back in the response, we can render the frontend views with role-specific authorization considerations.

But before getting to these conditionally rendered views, we first need to implement the option to select an educator role in the EditProfile view, as discussed in the next section.

Updating the EditProfile view

In order to become an educator in the MERN Classroom application, a signed-in user will need to update their profile. They will see a toggle in the EditProfile view, which will either activate or deactivate the educator feature. To implement this, first, we will update the EditProfile component in order to add a Material-UI Switch component in FormControlLabel, as shown in the following code.

mern-classroom/client/user/EditProfile.js:

<Typography variant="subtitle1" className={classes.subheading}>
 I am an Educator
</Typography>
<FormControlLabel
 control={
 <Switch classes={{
 checked: classes.checked,
 bar: classes.bar,
 }}
 checked={values.educator}
 onChange={handleCheck}
 />}
 label={values.educator? 'Yes' : 'No'}
/>

Any changes to the switch will be set to the value of the educator variable in the state by calling the handleCheck method, as defined in the following code.

mern-classroom/client/user/EditProfile.js:

const handleCheck = (event, checked) => {
 setValues({...values, 'educator': checked})
} 

The handleCheck method receives the checked Boolean value to indicate whether the switch has been selected or not, and this value is set to educator.

On form submit, the educator value is added to the details that were sent in the update to the server, as highlighted in the following code.

mern-classroom/client/user/EditProfile.js:

clickSubmit = () => {
 const jwt = auth.isAuthenticated() 
 const user = {
 name: this.state.name || undefined,
 email: this.state.email || undefined,
 password: this.state.password || undefined,
 educator: values.educator || undefined
 }
 update({
 userId: this.match.params.userId
 }, {
 t: jwt.token
 }, user).then((data) => {
 if (data.error) {
 this.setState({error: data.error})
 } else {
 auth.updateUser(data, ()=> {
 setValues({...val...