Full-Stack React projects : modern web development using React 16, Node, Express, and MongoDB / Shama Hoque.

Format:

Book

Author/Creator:

Hoque, Shama, author.

Language:

English

Subjects (All):

JavaScript (Computer program language).

Application software--Development.

Application software.

Physical Description:

1 online resource (1 volume) : illustrations

Edition:

1st edition

Other Title:

Modern web development using React 16, Node, Express, and MongoDB

Place of Publication:

Birmingham ; Mumbai : Packt, 2018.

System Details:

text file

Biography/History:

Hoque Shama: Shama Hoque has 8 years of experience as a software developer and mentor, with a Master's in Software Engineering from Carnegie Mellon University. From Java programming to full-stack development with JavaScript, the applications she has worked on include national Olympiad registration websites, universally accessible widgets, video conferencing apps, and medical 3D reconstruction software. Currently, she makes web-based prototypes for R&D start-ups in California, while training aspiring software engineers and teaching web development to CS undergrads in Bangladesh.

Summary:

Unleash the power of MERN stack by building diverse web applications using React, Node.js, Express, and MongoDB About This Book Create dynamic web applications with the MERN stack Leverage the power of React in building interactive and complex user interfaces Unlock the potential of Node, Express, and MongoDB to build modern full-stack applications Who This Book Is For Full-Stack React Web Development Projects is for JavaScript developers who have some experience with React, but no previous experience with full-stack development involving Node, Express, and MongoDB, and who want practical guidelines to start building different types of real-world web applications with this stack. What You Will Learn Set up your development environment and develop a MERN application Implement user authentication and authorization using JSON Web Tokens Build a social media application by extending the basic MERN application Create an online marketplace application with shopping cart and Stripe payments Develop a media streaming application using MongoDB GridFS Implement server-side rendering with data to improve SEO Set up and use React 360 to develop user interfaces with VR capabilities Learn industry best practices to make MERN stack applications reliable and scalable In Detail 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. Style and approach This book provides practical guidelines on setting up and building MERN stack based applications, while providing f...

Contents:

Cover

Title Page

Copyright and Credits

Packt Upsell

Contributors

Table of Contents

Preface

Chapter 1: Unleashing React Applications with MERN

MERN stack

Node

Express

MongoDB

React

Relevance of MERN

Consistency across the technology stack

Less time to learn, develop, deploy, and extend

Widely adopted in the industry

Community support and growth

Range of MERN applications

MERN applications developed in this book

Social media platform

Online marketplace

Media streaming application

VR game for the web

Book structure

Getting started with MERN

Building MERN from the ground up - a skeleton application

Developing basic web applications with MERN

Advancing to complex MERN applications

Going forward with MERN

Getting the most out of this book

Summary

Chapter 2: Preparing the Development Environment

Selecting development tools

Workspace options

Local and cloud development

IDE or text editors

Chrome Developer Tools

Git

Installation

Remote Git hosting services

Setting up MERN stack technologies

Running the mongo shell

Upgrading npm versions

Node version management with nvm

npm modules for MERN

Key modules

devDependency modules

Checking your development setup

Initializing package.json and installing npm modules

Configuring Babel, Webpack, and Nodemon

Babel

Webpack

Client-side Webpack configuration for development

Server-side Webpack configuration

Client-side Webpack configuration for production

Nodemon

Frontend views with React

Server with Express and Node

Express app

Bundle React app during development

Serving static files from the dist folder

Rendering templates at the root

Connecting the server to MongoDB.

npm run scripts

Developing and debugging in real time

Chapter 3: Building a Backend with MongoDB, Express, and Node

Skeleton application overview

Feature breakdown

Focus of this chapter - the backend

User model

API endpoints for user CRUD

Auth with JSON Web Tokens

How JWT works

Implementing the skeleton backend

Folder and file structure

Setting up the project

Initializing package.json

Development dependencies

Config variables

Running scripts

Preparing the server

Configuring Express

Starting the server

Setting up Mongoose and connecting to MongoDB

Serving an HTML template at a root URL

User schema definition

Name

Email

Created and updated timestamps

Hashed password and salt

Password for auth

As a virtual field

Encryption and authentication

Password field validation

Mongoose error handling

User CRUD API

User routes

User controller

Creating a new user

Listing all users

Loading a user by ID to read, update, or delete

Loading

Reading

Updating

Deleting

User auth and protected routes

Auth routes

Auth controller

Sign-in

Sign-out

Protecting routes with express-jwt

Requiring sign-in

Authorizing signed in users

Protecting user routes

Auth error handling for express-jwt

Checking the standalone backend

Fetching the user list

Trying to fetch a single user

Signing in

Fetching a single user successfully

Chapter 4: Adding a React Frontend to Complete MERN

Skeleton frontend

Setting up for React development

Configuring Babel and Webpack

Loading Webpack middleware for development

Serving static files with Express.

Updating the template to load a bundled script

Adding React dependencies

React Router

Material-UI

Implementing React views

Rendering a home page

Entry point at main.js

Root React component

Customizing the Material-UI theme

Wrapping the root component with MUI theme and BrowserRouter

Marking the root component as hot-exported

Adding a home route to MainRouter

Home component

Imports

Style declarations

Component definition

PropTypes validation

Export component

Bundling image assets

Running and opening in the browser

Backend API integration

Fetch for User CRUD

Creating a user

Listing users

Reading a user profile

Updating a user's data

Deleting a user

Fetch for auth API

Auth in the frontend

Managing auth state

PrivateRoute component

User and auth components

Users component

Signup component

Signin component

Profile component

EditProfile component

DeleteUser component

Menu component

Basic server-side rendering

Modules for server-side rendering

Preparing Material-UI styles for SSR

Generating markup

Sending a template with markup and CSS

Updating template.js

Updating MainRouter

Hydrate instead of render

Chapter 5: Starting with a Simple Social Media Application

MERN Social

Updating the user profile

Adding an about description

Uploading a profile photo

Updating the user model to store a photo in MongoDB

Uploading a photo from the edit form

File input with Material-UI

Form submission with the file attached

Processing a request containing a file upload

Retrieving a profile photo

Profile photo URL

Showing a photo in a view

Following users in MERN Social

Follow and unfollow

Updating the user model

Updating the userByID controller method.

API to follow and unfollow

Accessing follow and unfollow APIs in views

Follow and unfollow buttons

FollowProfileButton component

Update Profile component

Listing followings and followers

FollowGrid component

Finding people to follow

Fetching users not followed

FindPeople component

Posts

Mongoose schema model for Post

Newsfeed component

Listing posts

List in Newsfeed

Newsfeed API for posts

Fetching Newsfeed posts in the view

Listing by user in Profile

API for posts by a user

Fetching user posts in the view

Creating a new post

Creating post API

Retrieving a post's photo

Fetching the create post API in the view

NewPost component

Post component

Layout

Header

Content

Actions

Comments

Deleting a post

Likes

Like API

Unlike API

Checking if liked and counting likes

Handling like clicks

Adding a comment

Comment API

Writing something in the view

Listing comments

Deleting a comment

Uncomment API

Removing a comment from view

Comment count update

Chapter 6: Exercising New MERN Skills with an Online Marketplace

MERN Marketplace

Users as sellers

Updating the Edit Profile view

Updating the menu

Shops in the Marketplace

Shop model

Create a new shop

Create shop API

Fetch the create API in the view

NewShop component

List shops

List all shops

Shops list API

Fetch all shops for the view

Shops component

List shops by owner

Shops by owner API

Fetch all shops owned by a user for the view

MyShops component

Display a shop

Read a shop API

Fetch the shop in the view

Shop component

Edit a shop

Edit shop API

Fetch the edit API in the view

EditShop component

Delete a shop

Delete shop API.

Fetch the delete API in the view

DeleteShop component

Products

Product model

Create a new product

Create product API

Fetching the create API in the view

The NewProduct component

List products

List by shop

Products by shop API

Products component for buyers

MyProducts component for shop owners

List product suggestions

Latest products

Related products

Suggestions component

Display a product

Read a product API

Product component

Edit and delete a product

Edit

Delete

Product search with category

Categories API

Search products API

Fetch search results for the view

Search component

Categories component

Chapter 7: Extending the Marketplace for Orders and Payments

The MERN Marketplace with a cart, payments, and orders

Shopping cart

Adding to cart

Cart icon on the menu

Cart view

The CartItems component

Retrieving cart details

Modifying quantity

Removing item

Showing total price

Option to check out

Using Stripe for payments

Stripe

Stripe-connected account for each seller

Updating user model

Button to connect with Stripe

The StripeConnect component

Stripe auth update API

Stripe Card Elements for checkout

Stripe Customer to record card details

Updating user controller

Creating a new Stripe Customer

Updating an existing Stripe Customer

Creating a charge for each product processed

Checkout

Initializing checkout details

Customer information

Delivery address

The PlaceOrder component

Stripe CardElement component

Placing an order

Empty cart

Redirecting to Order view

Creating new order

Order model

Ordered by and for customer

Payment reference

Products ordered

The CartItem schema

Create order API.

Decrease product stock quantity.

Notes:

Description based on print version record.

ISBN:

9781788832946

1788832949

OCLC:

1041858470