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

by Nabendu Biswas

Overview

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.

Product Details

ISBN-13:	9781484271377
Publisher:	Apress
Publication date:	09/18/2021
Edition description:	1st ed.
Pages:	285
Sales rank:	937,423
Product dimensions:	7.01(w) x 10.00(h) x (d)

About the Author

Nabendu Biswas is a full stack JavaScript developer who has been working in the IT industry for the past 16 years and has worked for some of the world’s top development firms and investment banks. He is a passionate tech blogger who publishes on dev.to and medium.com and on thewebdev.tech. He is an all-round nerd, passionate about everything JavaScript, React and Gatsby. You can find him on Twitter @nabendu82.

Table of Contents

Chapter One: Setting Up Our Environment

Chapter Two: Dating App

· Firebase hosting initial setup

· React basic setup

· Adding Swipe functionality

· Setting up MongoDB database

· Creating NodeJS schema and routes

· Integrating backend with React

· Deploying backend in heroku

· Hosting through firebase

Chapter Three : Video Sharing App

· Firebase hosting initial setup

· React basic setup

· Adding Short videos to site

· Adding snap feature to video

· Setting up MongoDB database

· Creating NodeJS schema and routes

· Integrating backend with React

· Deploying backend in heroku

· Hosting through firebase

Chapter Four: Messaging App

· Firebase hosting initial setup

· React basic setup

· Creating Sidebar component showing rooms

· Creating the Chat functionality

· Setting up MongoDB database

· Creating NodeJS schema and routes

· Adding real-time chat with Pusher

· Integrating backend with React

· Adding Google authentication

· Deploying backend in heroku

· Hosting through firebase

Chapter Five: Photo-based Social Network

· Firebase hosting initial setup

· React basic setup

· Showing images with caption on site

· Setting up MongoDB database

· Creating NodeJS schema and routes

· Adding real-time posts with Pusher

· Integrating backend with React

· Adding email/password authentication

· Adding Signup and Sign-in to site

· Adding ability to add post

· Adding ability to comment on post

· Deploying backend in heroku

· Hosting through firebase

Chapter Six: More Complex Social Network

· Firebase hosting initial setup

· React basic setup and adding styled components

· Showing basic structure of the site

· Adding Google authentication

· Setting up MongoDB database

· Creating NodeJS schema and routes

· Adding file upload with Multer

· Integrating backend with React

· Adding ability to add post

· Adding real-time posts with Pusher

· Deploying backend in heroku

· Hosting through firebase