MERN PROJECTS FOR BEGINNERS : create five social web apps using mongodb, express.js, react, and... node

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. 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