Sign In Start Free Trial

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%

Checking the standalone backend

There are a number of options when it comes to selecting tools to check backend APIs, ranging from the command-line tool curl (https://github.com/curl/curl) to Advanced REST Client (https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo)—a Chrome extension app with an interactive user interface.

To check the APIs implemented in this chapter, first have the server running from the command line, and use either of these tools to request the routes. If you are running the code on your local machine, the root URL is http://localhost:3000/.

Using ARC, we will showcase the expected behavior for five use cases of checking the implemented API endpoints.

Creating a new user

...

Search

Your notes and bookmarks