MERN Projects for Beginners: Create Five Social Web Apps Using MongoDB, Express.js, React, and Node

✍ Scribed by Nabendu Biswas

• Publisher: Apress
• Year: 2021
• Tongue: English
• Leaves: 293
• Edition: 1
• Category: Library

✦ Synopsis

Learn how to use the MERN stack (MongoDB, Express.js, React, and Node) to build five fully functioning web apps for dating, video sharing, messaging, and social media. While creating these web apps, you’ll learn key development concepts including how to use React hooks, Redux, MongoDB, Express, Heroku, Firebase, Material UI, and Google authentication. By expanding your portfolio with the projects you create, you will be well equipped as front-end developer.

You will first create a dating site with a swiping feature and chat functionality. You will then build a video sharing app with videos displaying vertically. Next, you will learn to build an awesome messaging web app. Users will be able to chat in real time, as well as log in to their account using Google authentication. You will also create a photo sharing app and social media web apps with the ability to post images with captions and log in using email and password authentication.

Most MERN tutorials out there today cover basic web apps but it is capable of so much more – learn how to use this stack to its full potential and build projects that can be converted into full scaled start-ups with additional features. 

What You'll Learn

• Work with React hooks and React router
• Examine powerful MongoDB services for easy to use and setup
• Create routes using Node and host on Heroku
• Study different authentication techniques
• Deploy all sites using simple Firebase hosting
• Use the powerful React ecosystem to add functionalities to your apps

Who This book Is For

Those who have just started their career in web development and have basic knowledge of the core web technologies: HTML, CSS, and JavaScript. Those with basic React development and feel ready to explore its capabilities further. 

✦ Table of Contents

About the Author
About the Technical Reviewer
Chapter 1: MERN Deployment Setup
The MERN Stack at a Glance
Firebase Hosting Initial Setup
MongoDB Setup
Creating a New Project
Database User and Network Access
Deploying the Back End to Heroku
Deploying the Front End to Firebase
Install Node.js and npm
Summary
Chapter 2: Building a Dating App with MERN
Firebase Hosting Initial Setup
React Basic Setup
Creating a Header Component
Creating the Dating Cards Component
Creating the Swipe Buttons Component
Initial Back-End Setup
MongoDB Setup
Initial Route Setup
Database User and Network Access
MongoDB Schema and Routes
Integrating the Back End with the Front End
Deploying the Back End to Heroku
Deploying the Front End to Firebase
Summary
Chapter 3: Building a Short Video App with MERN
Firebase Hosting Initial Setup
React Basic Setup
Creating a Video Component
Creating a Video Footer Component
Creating a Video Sidebar Component
Making Components Dynamic
Initial Back-End Setup
MongoDB Setup
Initial Route Setup
Database User and Network Access
MongoDB Schema and Routes
Integrating the Back End with the Front End
Deploying the Back End to Heroku
Deploying the Front End to Firebase
Summary
Chapter 4: Building a Messaging App with MERN
Firebase Hosting Initial Setup
React Basic Setup
Creating a Sidebar Component
Creating a Sidebar Chat Component
Creating a Chat Component
Creating a Chat Footer Component
Initial Back-End Setup
MongoDB Setup
Initial Route Setup
Database User and Network Access
MongoDB Schema and Routes
Configuring Pusher
Adding Pusher to the Back End
Adding Pusher to the Front End
Integrating the Back End with the Front End
Additional Setup
Creating a Login Component
Adding Google Authentication
Using Redux and Context API
Using Redux Data in Other Components
Deploying the Back End to Heroku
Deploying the Front End to Firebase
Summary
Chapter 5: Building a Photo-Based Social Network with MERN
Firebase Hosting Initial Setup
React Basic Setup
Creating a Header Component
Creating a Post Component
Making Components Dynamic
Firebase Authentication Setup
Creating a Modal for Signup
Sign up with Firebase
Sign in with Firebase
Adding Posts and Images
Initial Back-End Setup
MongoDB Setup
Initial Route Setup
Database User and Network Access
MongoDB Schema and Routes
Integrating the Back End with the Front End
Configuring Pusher
Adding Pusher to the Back End
Adding Pusher to the Front End
Hiding Secrets
Deploying the Back End to Heroku
Deploying the Front End to Firebase
Summary
Chapter 6: Build a Popular Social Network with MERN
Firebase Hosting Initial Setup
React Basic Setup
Adding a Styled Component
Creating a Header Component
Creating Sidebar Components
Creating a Feed Component
Adding a Widget
Creating a Messenger Component
Creating a Post Component
Google Authentication Setup
Creating a Login Component
Using Redux and Context API
Using Redux Data in Other Components
Initial Back End Setup
MongoDB Setup
Initial Route Setup
Database User and Network Access
Storing Images in MongoDB
MongoDB Schema and Routes
Integrating the Back End with the Front End
Configuring Pusher
Adding Pusher to the Back End
Adding Pusher to the Front End
Deploying the Back End to Heroku
Deploying the Front End to Firebase
Deploying the Front End to Firebase
Summary
Index