Book Image

Full-Stack React Projects - Second Edition

By : Shama Hoque

2 (1)

Book Image

Full-Stack React Projects - Second Edition

2 (1)

By: Shama Hoque

Overview of this book

Facebook's React combined with industry-tested, server-side technologies, such as Node, Express, and MongoDB, enables you to develop and deploy robust real-world full-stack web apps. This updated second edition focuses on the latest versions and conventions of the technologies in this stack, along with their new features such as Hooks in React and async/await in JavaScript. The book also explores advanced topics such as implementing real-time bidding, a web-based classroom app, and data visualization in an expense tracking app. Full-Stack React Projects will take you through the process of preparing the development environment for MERN stack-based web development, creating a basic skeleton app, and extending it to build six different web apps. You’ll build apps for social media, classrooms, media streaming, online marketplaces with real-time bidding, and web-based games with virtual reality features. Throughout the book, you’ll learn how MERN stack web development works, extend its capabilities for complex features, and gain actionable insights into creating MERN-based apps, along with exploring industry best practices to meet the ever-increasing demands of the real world. By the end of this React book, you’ll be able to build production-ready MERN full-stack apps using advanced tools and techniques in modern web development.

Preface

Who this book is for

What this book covers

To get the most out of this book

Getting Started with MERN

Getting Started with MERN

Free Chapter

Unleashing React Applications with MERN

Unleashing React Applications with MERN

What is new in the second edition?

Getting the most out of this book

Relevance of MERN

Range of MERN applications

Preparing the Development Environment

Preparing the Development Environment

Selecting development tools

Setting up MERN stack technologies

Checking your development setup

Building MERN from the Ground Up

Building MERN from the Ground Up

Building a Backend with MongoDB, Express, and Node

Building a Backend with MongoDB, Express, and Node

Overview of the skeleton application

Setting up the skeleton backend

Implementing the user model

Adding user CRUD APIs

Integrating user auth and protected routes

Checking the standalone backend

Adding a React Frontend to Complete MERN

Adding a React Frontend to Complete MERN

Defining the skeleton application frontend

Setting up for React development

Rendering a home page view

Integrating backend APIs

Adding auth in the frontend

Completing the User frontend

Implementing basic server-side rendering

Growing the Skeleton into a Social Media Application

Growing the Skeleton into a Social Media Application

Introducing MERN Social

Updating the user profile

Following users in MERN Social

Posting on MERN Social

Interacting with Posts

Developing Web Applications with MERN

Developing Web Applications with MERN

Building a Web-Based Classroom Application

Building a Web-Based Classroom Application

Introducing MERN Classroom

Updating the user with an educator role

Adding courses to the classroom

Updating courses with lessons

Publishing courses

Enrolling on courses

Tracking progress and enrollment stats

Exercising MERN Skills with an Online Marketplace

Exercising MERN Skills with an Online Marketplace

Introducing the MERN Marketplace app

Allowing users to be sellers

Adding shops to the marketplace

Adding products to shops

Searching for products with name and category

Extending the Marketplace for Orders and Payments

Extending the Marketplace for Orders and Payments

Introducing cart, payments, and orders in the MERN Marketplace

Implementing a shopping cart

Using Stripe for payments

Integrating the checkout process

Creating a new order

Listing orders by shop

Viewing single-order details

Adding Real-Time Bidding Capabilities to the Marketplace

Adding Real-Time Bidding Capabilities to the Marketplace

Introducing real-time bidding in the MERN Marketplace

Adding auctions to the marketplace

Displaying the auction view

Implementing real-time bidding with Socket.IO

Advancing to Complex MERN Applications

Advancing to Complex MERN Applications

Integrating Data Visualization with an Expense Tracking Application

Integrating Data Visualization with an Expense Tracking Application

Introducing MERN Expense Tracker

Adding expense records

Visualizing expense data over time

Building a Media Streaming Application

Building a Media Streaming Application

Introducing MERN Mediastream

Uploading and storing media

Retrieving and streaming media

Displaying, updating, and deleting media

Customizing the Media Player and Improving SEO

Customizing the Media Player and Improving SEO

Adding a custom media player to MERN Mediastream

Listing related media

The PlayMedia component

Customizing the media player

Autoplaying related media

Server-side rendering with data

Developing a Web-Based VR Game

Developing a Web-Based VR Game

Introducing the MERN VR Game

Getting started with React 360

Key concepts for developing the VR game

Defining game details

Building the game view in React 360

Bundling for production and integration with MERN

Making the VR Game Dynamic using MERN

Making the VR Game Dynamic using MERN

Introducing the dynamic MERN VR Game application

Defining a Game model

Implementing game CRUD APIs

Adding a form for creating and editing games

Adding the game list views

Playing the VR game

Updating the game code in React 360

Going Forward with MERN

Going Forward with MERN

Following Best Practices and Developing MERN Further

Following Best Practices and Developing MERN Further

Separation of concerns with modularity

Adding CSS styles

Selective server-side rendering with data

Using stateful versus pure functional components

Using Redux or Flux

Enhancing security

Writing test code

Optimizing the bundle size

Extending the applications

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

2 (1)

5 star

0

4 star

0

3 star

0

2 star

100%

1 star

0

Adding a custom media player to MERN Mediastream

The MERN Mediastream application developed in the previous chapter implemented a simple media player with default browser controls that played one video at a time. In this chapter, we will update the view that plays media with a customized ReactPlayer and a related media list that can be set to play automatically when the current video ends. The updated view with the custom player and related playlist will resemble the following screenshot:

The code for the complete MERN Mediastream application is available on GitHub at https://github.com/PacktPublishing/Full-Stack-React-Projects-Second-Edition/tree/master/Chapter11%20and%2012/mern-mediastream. You can clone this code and run the application as you go through the code explanations for the rest of this chapter.

The following component tree diagram shows all the custom components...