Full-Stack React Projects: Learn MERN stack development by building modern web apps using MongoDB, Express, React, and Node.js, 2nd Edition. Code

Cover
Title Page
Copyright and Credits
Dedication
About Packt
Contributors
Table of Contents
Preface
Section 1: Getting Started with MERN
Chapter 1: Unleashing React Applications with MERN
	What is new in the second edition?
	Book structure
		Getting started with MERN
		Building MERN applications from the ground up 
		Developing web applications with MERN
		Advancing to complex MERN applications
		Going forward with MERN
	Getting the most out of this book
	The MERN stack
		Node
		Express
		MongoDB
		React
	Relevance of MERN
		Consistency across the technology stack
		Takes 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
			Web-based classroom application
			Online marketplace
			Expense tracking application
			Media streaming application
			VR game for the web
	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
		MongoDB
			Installation
			Running the mongo shell
		Node.js
			Installation
			Node version management with nvm
		Yarn package manager
		Modules for MERN
			Key modules
			devDependency modules
	Checking your development setup
		Initializing package.json and installing Node.js 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
			Bundling React app during development
			Serving static files from the dist folder
			Rendering templates at the root 
		Connecting the server to MongoDB
		Run scripts
		Developing and debugging in real time
	Summary
Section 2: Building MERN from the Ground Up
Chapter 3: Building a Backend with MongoDB, Express, and Node
	Overview of the skeleton application
		Feature breakdown
		Defining the backend components
			User model
			API endpoints for user CRUD
			Auth with JSON Web Tokens
				How JWT works
	Setting up the skeleton backend
		Folder and file structure
		Initializing the project
			Adding package.json
			Development dependencies
				Babel
				Webpack
				Nodemon
			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
	Implementing the user model
		User schema definition
			Name
			Email
			Created and updated timestamps
			Hashed password and salt
		Password for auth
			Handling the password string as a virtual field
			Encryption and authentication
			Password field validation
		Mongoose error handling
	Adding user CRUD APIs 
		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
	Integrating user auth and protected routes
		Auth routes
		Auth controller
		Sign-in
		Signout
		Protecting routes with express-jwt
			Protecting user routes
			Requiring sign-in
			Authorizing signed in users
			Auth error handling for express-jwt
	Checking the standalone backend
		Creating a new user
		Fetching the user list
		Trying to fetch a single user
		Signing in
		Fetching a single user successfully
	Summary
Chapter 4: Adding a React Frontend to Complete MERN
	Defining the skeleton application frontend
		Folder and file structure
	Setting up for React development
		Configuring Babel and Webpack
			Babel
			Webpack
			Loading Webpack middleware for development
		Loading bundled frontend code
			Serving static files with Express
			Updating the template to load a bundled script
		Adding React dependencies
			React
			React Router
			Material-UI
	Rendering a home page view 
		Entry point at main.js
		Root React component
			Customizing the Material-UI theme
			Wrapping the root component with ThemeProvider and BrowserRouter
			Marking the root component as hot-exported
		Adding a home route to MainRouter
		The Home component
			Imports
			Style declarations
			Component definition
		Bundling image assets
		Running and opening in the browser
	Integrating backend APIs
		Fetch for user CRUD
			Creating a user
			Listing users
			Reading a user profile
			Updating a user\'s data
			Deleting a user
		Fetch for the auth API
			Sign-in
			Sign-out
	Adding auth in the frontend
		Managing auth state
			Saving credentials
			Retrieving credentials
			Deleting credentials
		The PrivateRoute component
	Completing the User frontend 
		The Users component
		The Signup component 
		The Signin component
		The Profile component
		The EditProfile component
		The DeleteUser component
			Validating props with PropTypes 
		The  Menu component
	Implementing basic server-side rendering
		Modules for server-side rendering
		Generating CSS and markup
		Sending a template with markup and CSS
		Updating template.js
		Updating App.js
		Hydrate instead of render
	Summary
Chapter 5: Growing the Skeleton into a Social Media Application
	Introducing 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
		Following and unfollowing
			Updating the user model
			Updating the userByID controller method
			Adding APIs to follow and unfollow
			Accessing the follow and unfollow APIs in views
			Follow and unfollow buttons
				The FollowProfileButton component
				Updating the Profile component
		Listing followings and followers
			Making a FollowGrid component
		Finding people to follow
			Fetching users not followed
			The FindPeople component
	Posting on MERN Social
		Mongoose schema model for Post
		The Newsfeed component
		Listing posts
			Listing posts in Newsfeed
				Newsfeed API for posts
				Fetching Newsfeed posts in the view
			Listing posts by user in Profile
				API for posts by a user
				Fetching user posts in the view
		Creating a new post
			Creating the post API
			Retrieving a post\'s photo
			Fetching the create post API in the view
			Making the NewPost component
		The Post component
			Layout
				Header
				Content
				Actions
				Comments
			Deleting a post
	Interacting with Posts
		Likes
			The Like API
			The Unlike API
			Checking if a post has been liked and counting likes
			Handling like clicks
		Comments
			Adding a comment
				The Comment API
				Writing something in the view
			Listing comments
			Deleting a comment
				The Uncomment API
				Removing a comment from the view
			Comment count update
	Summary
Section 3: Developing Web Applications with MERN
Chapter 6: Building a Web-Based Classroom Application
	Introducing MERN Classroom
	Updating the user with an educator role
		Adding a role to the user model
		Updating the EditProfile view
		Rendering an option to teach 
	Adding courses to the classroom
		Defining a Course model
		Creating a new course
			The create course API
			Fetching the create API in the view
			The NewCourse component
		Listing courses by educator
			The list course API
			Fetching the list API in the view
			The MyCourses component
		Display a course
			A read course API
			The Course component
	Updating courses with lessons
		Storing lessons
		Adding new lessons
			Adding a lesson API
			The NewLesson component
			Displaying lessons
		Editing a course 
			Updating the course API
			The EditCourse component 
			Updating lessons
				Editing lesson details
				Moving the lessons to rearrange the order
				Deleting a lesson
		Deleting a course
			The delete course API
			The DeleteCourse component
	Publishing courses
		Implementing the publish option
			Publish button states
			Confirm to publish
		Listing published courses
			The published courses API
			The Courses component
	Enrolling on courses 
		Defining an Enrollment model
		The create Enrollment API
		The Enroll component
		The Enrolled Course view
			The read enrollment API
			The Enrollment component
	Tracking progress and enrollment stats
		Completing lessons
			Lessons completed API
			Completed lessons from the view
		Listing all enrollments for a user
			The list of enrollments API
			The Enrollments component
		Enrollment stats
			The enrollment stats API
			Displaying enrollment stats for a published course
	Summary
Chapter 7: Exercising MERN Skills with an Online Marketplace
	Introducing the MERN Marketplace app
	Allowing users to be sellers
		Updating the user model
		Updating the Edit Profile view
		Updating the menu
	Adding shops to the marketplace
		Defining a Shop model
		Creating a new shop
			The create shop API
			Fetching the create API in the view
			The NewShop component
		Listing shops
			Listing all shops
				The shops list API
				Fetch all shops for the view
				The Shops component
			Listing shops by owner
				The shops by owner API
				Fetch all shops owned by a user for the view
				The MyShops component
		Displaying a shop
			The read a shop API
			The Shop component 
		Editing a shop
			The edit shop API
			The EditShop component
		Deleting a shop
			The delete shop API
			The DeleteShop component
	Adding products to shops
		Defining a Product model
		Creating a new product
			The create product API
			The NewProduct component
		Listing products
			Listing by shop
				The products by shop API
				Products component for buyers
				MyProducts component for shop owners
			Listing product suggestions
				Latest products
				Related products
				The Suggestions component
		Displaying a product
			Read a product API
			Product component
		Editing and deleting a product
			Edit
			Delete
	Searching for products with name and category
		The categories API
		The search products API
			Fetch search results for the view
		The Search component
		The Categories component
	Summary
Chapter 8: Extending the Marketplace for Orders and Payments
	Introducing cart, payments, and orders in the MERN Marketplace
	Implementing a shopping cart
		Adding to the cart
		Cart icon in the menu
		The cart view
			The CartItems component
				Retrieving cart details
				Modifying quantity
				Removing items
				Showing the total price
				Option to check out
	Using Stripe for payments
		Stripe-connected account for each seller
			Updating the user model
			Button to connect with Stripe
			The StripeConnect component
			The stripe auth update API
		Stripe Card Elements for checkout
		Stripe Customer for recording card details
			Updating the user model
			Updating the user controller
				Creating a new Stripe Customer
				Updating an existing Stripe Customer
		Creating a charge for each product that\'s processed
	Integrating the checkout process
		Initializing checkout details
			Customer information
			Delivery address
		Placing an order
			Using Stripe Card Elements
			The CardElement component
			Adding a button to place an order
			Empty cart
			Redirecting to the order view
	Creating a new order
		Defining an Order model
			The Order schema
		The CartItem schema
		Create order API
			Decrease product stock quantity
			Create controller method
	Listing orders by shop
		The list by shop API
		The ShopOrders component
			List orders
			The ProductOrderEdit component
				Handling actions to cancel a product order
				Handling the action to process charge for a product
				Handling the action to update the status of a product
		APIs for products ordered
			Get status values
			Update order status
			Cancel product order
			Process charge for a product
	Viewing single-order details
	Summary
Chapter 9: Adding Real-Time Bidding Capabilities to the Marketplace
	Introducing real-time bidding in the MERN Marketplace
	Adding auctions to the marketplace
		Defining an Auction model
		Creating a new auction
			The create auction API
			Fetching the create API in the view
			The NewAuction component
		Listing auctions 
			The open Auctions API
			The Auctions by bidder API
			The Auctions by seller API
			The Auctions component
		Editing and deleting auctions
			Updating the list view
			Edit and delete auction APIs 
	Displaying the auction view
		The read auction API
		The Auction component
		Adding the Timer component
	Implementing real-time bidding with Socket.IO
		Integrating Socket.IO
		Placing bids
			Adding a form to enter a bid
			Receiving a bid on the server
		Displaying the changing bidding history
			Updating the view state with a new bid
			Rendering the bidding history
	Summary
Section 4: Advancing to Complex MERN Applications
Chapter 10: Integrating Data Visualization with an Expense Tracking Application
	Introducing MERN Expense Tracker
	Adding expense records
		Defining an Expense model 
		Creating a new expense record
			The create expense API
			The NewExpense component
		Listing expenses
			The expenses by user API
			The Expenses component
				Searching by date range
				Rendering expenses
		Modifying an expense record
			Rendering the edit form and delete option
			Editing and deleting an expense in the backend
	Visualizing expense data over time
		Summarizing recent expenses
			Previewing expenses in the current month
				The current month preview API
				Rendering the preview of current expenses
			Tracking current expenses by category
				The current expenses by category API
				Rendering an overview of expenses per category 
		Displaying expense data charts
			A month\'s expenses in a scatter plot
				The scatter plot data API
				The MonthlyScatter component
			Total expenses per month in a year
				The yearly expenses API
				The YearlyBar component
			Average expenses per category in a pie chart
				The average expenses by category API
				The CategoryPie component
	Summary
Chapter 11: Building a Media Streaming Application
	Introducing MERN Mediastream
	Uploading and storing media
		Defining a Media model
		Using MongoDB GridFS to store large files
		Creating a new media post
			The create media API
			The NewMedia component
	Retrieving and streaming media
		The video API
		Using a React media player to render the video
	Listing media
		The MediaList component
		Listing popular media
		Listing media by users
	Displaying, updating, and deleting media
		Displaying media
			The read media API
			The Media component
		Updating media details
			The media update API
			The media edit form
		Deleting media
			The delete media API
			The DeleteMedia component
	Summary
Chapter 12: Customizing the Media Player and Improving SEO
	Adding a custom media player to MERN Mediastream  
		The play media page
			The component structure
	Listing related media 
		The related media list API
		The RelatedMedia component
	The PlayMedia component
	Customizing the media player
		Updating the Media component
		Initializing the media player
		Custom media controls
			Play, pause, and replay
			Play next
			Loop when a video ends
			Volume control
			Progress control
			Fullscreen
			Played duration
	Autoplaying related media
		Toggling autoplay
		Handling autoplay across components
		Updating the state when a video ends in MediaPlayer
	Server-side rendering with data
		Adding a route configuration file
		Updating SSR code for the Express server
			Using route configuration to load data
			Isomorphic-fetch
				Absolute URLs
			Injecting data into the React app
		Applying server-injected data to client code
			Passing data props to PlayMedia from MainRouter
			Rendering received data in PlayMedia
		Checking the implementation of SSR with data
			Testing in Chrome
				Loading a page with JavaScript enabled
				Disabling JavaScript from settings
				PlayMedia view with JavaScript blocked
	Summary
Chapter 13: Developing a Web-Based VR Game
	Introducing the MERN VR Game
		Game features
	Getting started with React 360
		Setting up a React 360 project
	Key concepts for developing the VR game
		Equirectangular panoramic images
		3D position – coordinates and transforms
			3D coordinate system
			Transforming 3D objects
		React 360 components
			Core components
				View
				Text
			Components for the 3D VR experience
				Entity
				VrButton
		The React 360 API
			Environment
			Native modules
				AudioModule
				Location
			StyleSheet
			VrHeadModel
			Loading assets
		React 360 input events
	Defining game details
		Game data structure
			Details of VR objects
		Static data versus dynamic data
	Building the game view in React 360
		Updating client.js and mounting to Location
		Defining styles with StyleSheet
		World background
		Adding 3D VR objects
		Interacting with VR objects
			Rotating a VR object
				Animation with requestAnimationFrame
			Clicking on the 3D objects
				Collecting the correct object on click
		Game completed state
	Bundling for production and integration with MERN
		Bundling React 360 files
		Integrating with a MERN application
			Adding the React 360 production files
			Updating references in index.html
			Trying out the integration
	Summary
Chapter 14: Making the VR Game Dynamic using MERN
	Introducing the dynamic MERN VR Game application
	Defining a Game model
		Exploring the game schema
		Specifying the VR object schema
		Validating array length in the game schema
	Implementing game CRUD APIs
		Creating a new game
		Listing all games
		Listing games by the maker
		Loading a game
		Editing a game
		Deleting a game 
	Adding a form for creating and editing games
		Making a new game
			Updating the menu
			The NewGame component
		Editing the game
			The EditGame component
		Implementing the GameForm component
			Inputting simple game details
			Modifying arrays of VR objects
				Iterating and rendering the object details form
				Adding a new object to the array
				Removing an object from the array
				Handling the object detail change
		The VRObjectForm component
	Adding the game list views
		Rendering lists of games
		The GameDetail component
	Playing the VR game
		Implementing the API to render the VR game view
	Updating the game code in React 360
		Getting the game ID from a link
		Fetching the game data with the load game API
		Bundling and integrating the updated code
	Summary
Section 15: Going Forward with MERN
Chapter 15: Following Best Practices and Developing MERN Further
	Separation of concerns with modularity
		Revisiting the application folder structure
			Server-side code
			Client-side code
	Adding CSS styles
		External style sheets 
		Inline styles
		JavaScript Style Sheets (JSS)
	Selective server-side rendering with data
		When is server-side rendering with data relevant?
	Using stateful versus pure functional components
		Stateful React components with ES6 classes or Hooks
		Stateless React components as pure functions
		Designing the UI with stateful components and stateless functional components
	Using Redux or Flux 
	Enhancing security
		JSON web tokens – client-side or server-side storage
		Securing password storage
	Writing test code
		Testing tools for full-stack JavaScript projects
			Static analysis with ESLint
			End-to-end testing with Cypress
			Comprehensive testing with Jest
		Adding a test to the MERN Social application
			Installing the packages
			Defining the script to run tests
			Adding a tests folder
			Adding the test
			Generating a snapshot of the correct Post view
			Running and checking the test
	Optimizing the bundle size
		Code splitting
			Dynamic import()
	Extending the applications
		Extending the server code
			Adding a model
			Implementing the APIs
				Adding controllers
				Adding routes
		Extending the client code
			Adding the API fetch methods
			Adding components
			Loading new components
	Summary
Other Books You May Enjoy
Index