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.

Related Content you might be interested in

Current Title:

Small book image
Full-Stack React Projects - Second Edition
Shama Hoque
Apr, 2020 | 716 pages
No titles found
Table of Contents (22 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
1
Getting Started with MERN
Getting Started with MERN
Free Chapter
2
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
3
Preparing the Development Environment
Preparing the Development Environment
Selecting development tools
Setting up MERN stack technologies
Checking your development setup
Summary
4
Building MERN from the Ground Up
Building MERN from the Ground Up
5
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
6
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
7
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
8
Developing Web Applications with MERN
Developing Web Applications with MERN
9
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
10
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
11
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
12
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
13
Advancing to Complex MERN Applications
Advancing to Complex MERN Applications
14
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
15
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
16
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
17
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
18
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
19
Going Forward with MERN
Going Forward with MERN
20
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
21
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...

Previous Section
End of Section 7
Next Section