Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Full-Stack React Projects - Second Edition

By : Shama Hoque

3.2 (20)

Full-Stack React Projects

3.2 (20)

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

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

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?

Book structure

Getting the most out of this book

The MERN stack

Relevance of MERN

Range of MERN applications

Summary

Preparing the Development Environment

Preparing the Development Environment

Selecting development tools

Setting up MERN stack technologies

Checking your development setup

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

Building a Media Streaming Application

Building a Media Streaming Application

Introducing MERN Mediastream

Uploading and storing media

Retrieving and streaming media

Listing media

Displaying, updating, and deleting media

Summary

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

Summary

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

Summary

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

Summary

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

Summary

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Completing the User frontend

The React components that will be described in this section complete the interactive features we defined for the skeleton by allowing users to view, create, and modify user data stored in the database with respect to auth restrictions. The components we will implement are as follows:

Users: To fetch and list all users from the database to the view
Signup: To display a form that allows new users to sign up
Signin: To display a form that allows existing users to sign in
Profile: To display details for a specific user after retrieving from the database
EditProfile: To display details for a specific user and allow authorized user to update these details

DeleteUser: To allow an authorized user to delete their account from the application
Menu: To add a common navigation bar to each view in the application

For each of these components, we will go...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Full-Stack React Projects

Search

Your notes and bookmarks