Full-Stack React Projects

Modern web development using React 16, Node, Express, and MongoDB

Shama Hoque

• Éditeur: Packt Publishing
• Année: 2018
• ISBN:
  9781788832946
• Édition: 1
• Sujet: Computer Science
• Sous-sujet: Web Development

Unleash the power of MERN stack by building diverse web applications using React, Node.js, Express, and MongoDB

Key Features

• Create dynamic web applications with the MERN stack
• Leverage the power of React in building interactive and complex user interfaces
• Unlock the potential of Node, Express, and MongoDB to build modern full-stack applications

Book Description

The benefits of using a full JavaScript stack for web development are undeniable, especially when robust and widely adopted technologies such as React, Node, and Express and are available. Combining the power of React with industry-tested, server-side technologies, such as Node, Express, and MongoDB, creates a diverse array of possibilities when developing real-world web applications.

This book guides you through preparing the development environment for MERN stack-based web development, to creating a basic skeleton application and extending it to build four different web applications. These applications include a social media, an online marketplace, a media streaming, and a web-based game application with virtual reality features.

While learning to set up the stack and developing a diverse range of applications with this book, you will grasp the inner workings of the MERN stack, extend its capabilities for complex features, and gain actionable knowledge of how to prepare MERN-based applications to meet the growing demands of real-world web applications.

What you will learn

• Set up your development environment and develop a MERN application
• Implement user authentication and authorization using JSON Web Tokens
• Build a social media application by extending the basic MERN application
• Create an online marketplace application with shopping cart and Stripe payments
• Develop a media streaming application using MongoDB GridFS
• Implement server-side rendering with data to improve SEO
• Set up and use React 360 to develop user interfaces with VR capabilities
• Learn industry best practices to make MERN stack applications reliable and scalable

Who this book is for

Full-Stack React Web Development Projects is for JavaScript developers who have some experience with React, but no previous experience with full-stack development involving Node, Express, and MongoDB, and who want practical guidelines to start building different types of real-world web applications with this stack.

Starting with a Simple Social Media Application

Social media is an integral part of the web these days, and many of the user-centric web applications we build end up requiring a social component down the line to drive user engagement.

For our first real-world MERN application, we will modify and extend the MERN skeleton application developed in the previous chapter to build a simple social media application.

In this chapter, we will go over the implementation of the following social media-flavored features:

• User profile with a description and a photo
• Users following each other
• Who to follow suggestions
• Posting messages with photos
• News feed with posts from followed users
• Listing posts by user
• Liking posts
• Commenting on posts

MERN Social

MERN Social is a social media application with rudimentary features inspired by existing social media platforms such as Facebook and Twitter. The main purpose of this application is to demonstrate how to use the MERN stack technologies to implement features that allow users to connect and interact over content.You can extend these implementations further, as desired, for more complex features:

Code for the complete MERN Social application is available on GitHub in the repository at github.com/shamahoque/mern-social. You can clone this code and run the application as you go through the code explanations in the rest of this chapter.

The views needed for the MERN Social application will be developed by extending and modifying the existing React components in the MERN skeleton application. We will also add new custom components to compose views, including a Newsfeed view where the user can create a new post and also browse a list of all the posts from people they follow on MERN Social. The following component tree shows all the custom React components that make up the MERN Social frontend and also exposes the composition structure we will use to build out the views in the rest of the chapter:

Updating the user profile

The skeleton application only has support for a user's name, email, and password. But in MERN Social we will allow users to add a description about themselves, and also upload a profile photo while editing the profile after signing up:

Adding an about description

In order to store the description entered in the about field by a user, we need to add an about field to the user model in server/models/user.model.js:

about: {
 type: String,
 trim: true
 }

Then, to get the description as input from the user, we add a multiline TextField to the EditProfile form and handle the value change the same way we did for the user's name input.

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

 <TextField
 id="multiline-flexible"
 label="About"
 multiline
 rows="2"
 value={this.state.about}
 onChange={this.handleChange('about')}
 />

Finally, to show the description text added to the about field on the user profile page, we can add it to the existing profile view.

mern-social/client/user/Profile.js:

<ListItem> <ListItemText primary={this.state.user.about}/> </ListItem>

With this modification to the user feature in the MERN skeleton code, users can now add and update a description about themselves to be displayed on their profiles.

Uploading a profile photo

Allowing a user to upload a profile photo will require that we store the uploaded image file, and retrieve it on request to load in the view. There are multiple ways of implementing this upload feature considering the different file storage options:

• Server filesystem: Upload and save files to a server filesystem and store the URL to MongoDB
• External file storage: Save files to external storage such as Amazon S3 and store the URL in MongoDB
• Store as data in MongoDB: Save files of a small size (less than 16 MB) to MongoDB as data of type Buffer

For MERN Social, we will assume that the photo files uploaded by the user will be of small sizes, and demonstrate how to store these files in MongoDB for the profile photo upload feature. In Chapter 8, Building a Media Streaming Application, we will discuss how to store larger files in MongoDB using GridFS.

Updating the user model to store a photo in MongoDB

In order to store the uploaded profile photo directly in the database, we will update the user model to add a photo field that stores the file as data of type Buffer, along with its contentType.

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

photo: {
 data: Buffer,
 contentType: String
}

Uploading a photo from the edit form

Users will be able to upload an image file from their local files when editing the profile. We will update the EditProfile component in client/user/EditProfile.js with an upload photo option, then attach the user selected file in the form data submitted to the server.

File input with Material-UI

We will utilize the HTML5 file input type to let the user select an image from their local files. The file input will return the filename in the change event when the user selects a file.

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

<input accept="image/*" type="file"
 onChange={this.handleChange('photo')} 
 style={{display:'none'}} 
 id="icon-button-file" />

To integrate this file input with Material-UI components, we apply display:none to hide the input element from view, then add a Material-UI button inside the label for this file input. This way, the view displays the Material-UI button instead of the HTML5 file input element.

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

<label htmlFor="icon-button-file">
 <Button variant="raised" color="default" component="span">
 Upload <FileUpload/>
 </Button>
</label>

With the Button's component prop set to span, the Button component renders as a span element inside the label element. A click on the Upload span or label is registered by the file input with the same ID as the label, and as a result, the file select dialog is opened. Once the user selects a file, we can set...