Full-Stack React Projects

▶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

▶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

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

▶What this book covers
⦁ Chapter 1, Unleashing React Applications with MERN, introduces the MERN stack technologies and the applications developed in this book. We will discuss the context and relevance of developing web applications with React, Node, Express, and MongoDB.

⦁ Chapter 2, Preparing the Development Environment, helps set up the MERN stack technologies for development. We will explore essential development tools, install Node, MongoDB, Express, React, and other required libraries, and then run code to check the setup.

⦁ Chapter 3, Building a Backend with MongoDB, Express, and Node, implements the backend of a skeleton MERN application. We will build a standalone server-side application with MongoDB, Express, and Node, which stores user details and has APIs for user authentication and CRUD operations.

⦁ Chapter 4, Adding a React Frontend to Complete MERN, completes the MERN skeleton application by integrating a React frontend. We will implement a working frontend with React views for interacting with the user CRUD and auth APIs on the server.

⦁ Chapter 5, Starting with a Simple Social Media Application, builds a social media application by extending the skeleton application. We will explore the capabilities of the MERN stack by implementing social media features, such as post sharing, liking, and commenting; following friends; and an aggregated newsfeed.

⦁ Chapter 6, Exercising New MERN Skills with an Online Marketplace, implements basic features in an online marketplace application. We will implement buying- and sellingrelated features with support for seller accounts, product listings, and product search by category.

⦁ Chapter 7, Extending the Marketplace for Orders and Payments, builds the marketplace application further with a shopping cart, order management, and payments processing. We will add a shopping cart feature and allow users to place orders with the items in their carts. We will also integrate Stripe to collect and process payments.

⦁ Chapter 8, Building a Media Streaming Application, implements media uploading and streaming using MongoDB GridFS. We will start building a basic media streaming application, allowing registered users to upload video files that will be stored on MongoDB and streamed back so that viewers can play each video in a simple React media player.

⦁ Chapter 9, Customizing the Media Player and Improving SEO, upgrades the media viewing capabilities with a custom media player and autoplay media list. We will implement customized controls on the default React media player, add a playlist that can be autoplayed, and improve SEO for the media details by adding selective server-side rendering with data for just the media detail view.

⦁ Chapter 10, Developing a Web-Based VR Game, uses React 360 to develop a 3D virtual reality infused game for the web. We will explore the 3D and VR capabilities of React 360 and build a simple web-based VR game.

⦁ Chapter 11, Making the VR Game Dynamic using MERN, builds a dynamic VR game application by extending the MERN skeleton application and integrating React 360. We will implement a game data model that allows users to create their own VR games and incorporate the dynamic game data with the game developed using React 360.

⦁ Chapter 12, Following Best Practices and Developing MERN Further, reflects on the lessons learned in previous chapters and suggests improvements for further MERN-based application development. We will expand on some of the best practices already applied, such as modularity in the app structure, other practices that should be applied, such as writing test code, and possible improvements, such as optimizing bundle size.