Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Full-Stack React Projects

By : Shama Hoque

2.9 (10)

Full-Stack React Projects

2.9 (10)

By: Shama Hoque

Overview of this book

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.

Preface

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Unleashing React Applications with MERN

Unleashing React Applications with MERN

MERN stack

Relevance of MERN

Range of MERN applications

Book structure

Getting the most out of this book

Summary

Preparing the Development Environment

Preparing the Development Environment

Selecting development tools

Setting up MERN stack technologies

Checking your development setup

Summary

Building a Backend with MongoDB, Express, and Node

Building a Backend with MongoDB, Express, and Node

Skeleton application overview

Implementing the skeleton backend

Checking the standalone backend

Summary

Adding a React Frontend to Complete MERN

Adding a React Frontend to Complete MERN

Skeleton frontend

Folder and file structure

Setting up for React development

Implementing React views

Basic server-side rendering

Summary

Starting with a Simple Social Media Application

Starting with a Simple Social Media Application

MERN Social

Updating the user profile

Following users in MERN Social

Posts

Summary

Exercising New MERN Skills with an Online Marketplace

Exercising New MERN Skills with an Online Marketplace

MERN Marketplace

Users as sellers

Shops in the Marketplace

Products

Product search with category

Summary

Extending the Marketplace for Orders and Payments

Extending the Marketplace for Orders and Payments

The MERN Marketplace with a cart, payments, and orders

Shopping cart

Using Stripe for payments

Checkout

Creating new order

Orders by shop

View order details

Summary

Building a Media Streaming Application

Building a Media Streaming Application

MERN Mediastream

Uploading and storing media

Retrieve and stream media

Media list

Display, update, and delete media

Summary

Customizing the Media Player and Improving SEO

Customizing the Media Player and Improving SEO

MERN Mediastream with a custom media player

The play media page

Related media list

The PlayMedia component

Media player

Autoplaying related media

Server-side rendering with data

Summary

Developing a Web-Based VR Game

Developing a Web-Based VR Game

MERN VR Game

React 360

Key concepts for developing the VR game

Game details

Building the game view in React 360

Bundling for production and integration with MERN

Summary

Making the VR Game Dynamic Using MERN

Making the VR Game Dynamic Using MERN

Dynamic MERN VR Game

Game model

Game APIs

Creating and editing games

Game list views

Deleting a game

Playing the VR game

Updating the game code in React 360

Summary

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 ES6 class for stateful vs pure functional components

Using Redux or Flux

Enhancing security

Writing test code

Optimizing the bundle size

Extending the applications

Summary

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

2.9 (10)

5 star

30%

4 star

20%

3 star

0

2 star

10%

1 star

40%

Building a Media Streaming Application

Uploading and streaming media content, specifically video content, has been a growing part of internet culture for some time now. From individuals sharing personal video content to the entertainment industry disseminating commercial content on online streaming services, we all rely on web applications that enable smooth uploading and streaming. Capabilities within the MERN stack technologies can be used to build and integrate these core streaming features into any MERN-based web application.

In this chapter, we will cover the following topics to implement basic media uploading and streaming by extending the MERN skeleton application:

Uploading videos to MongoDB GridFS
Storing and retrieving media details
Streaming from GridFS to a basic media player

Search

Your notes and bookmarks