Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Title Page
Copyright and Credits
Full-Stack React Projects
Packt Upsell
Why subscribe?
PacktPub.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Reviews
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
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
Installation
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
Summary
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
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
User model
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
Creating a new user
Fetching the user list
Trying to fetch a single user
Signing in
Fetching a single user successfully
Summary
Adding a React Frontend to Complete MERN
Skeleton frontend
Folder and file structure
Setting up for React development
Configuring Babel and Webpack
Babel
Webpack
Loading Webpack middleware for development
Serving static files with Express
Updating the template to load a bundled script
Adding React dependencies
React
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
Sign-in
Sign-out
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
Summary
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
Comments
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
Summary
Exercising New MERN Skills with an Online Marketplace
MERN Marketplace
Users as sellers
Updating the user model
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
Summary
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 model
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
Delivery address
Payment reference
Products ordered
The CartItem schema
Create order API
Decrease product stock quantity
Create order controller method
Orders by shop
List by shop API
The ShopOrders component
List orders
The ProductOrderEdit component
APIs for products ordered
Get status values
Update order status
Cancel product order
Process charge for product
View order details
Summary
Building a Media Streaming Application
MERN Mediastream
Uploading and storing media
Media model
MongoDB GridFS to store large files
Creating a media API
Route to create media
Controller method to handle create request
Fetch create API in the view
New media form view
Adding media menu button
React route for NewMedia view
NewMedia component
Retrieve and stream media
Get video API
React media player to render the video
Media list
MediaList component
List popular media
List media by users
Display, update, and delete media
Display media
Read media API
Media component
Update media details
Media update API
Media edit form
Deleting media
The Delete media API
The DeleteMedia component
Summary
Customizing the Media Player and Improving SEO
MERN Mediastream with a custom media player
The play media page
Component structure
Related media list
Related list API
The RelatedMedia component
The PlayMedia component
Media player
Updating the Media component
Initializing the media player
Custom media controls
Play, pause, and replay
Play next
Loop on ended
Volume control
Progress control
Fullscreen
Played duration
Autoplaying related media
Toggling autoplay
Handle autoplay across components
Update state when video ends in MediaPlayer
Server-side rendering with data
Route config
Updating SSR code for the Express server
Using route config to load data
Isomorphic-fetch
Absolute URL
Injecting data into React app
Applying server-injected data in client code
Passing data props to PlayMedia from MainRouter
Rendering received data in PlayMedia
Checking the implementation of SSR with data
Test in Chrome
Loading a page with JS enabled
Disabling JS from settings
PlayMedia view with JS blocked
Summary
Developing a Web-Based VR Game
MERN VR Game
Game features
Focus of this chapter
React 360
Getting started with React 360
Key concepts for developing the VR game
Equirectangular panoramic images
3D position – coordinates and transforms
3D coordinate system
Transform
React 360 components
Core components
View
Text
Components for 3D VR experience
Entity
VrButton
React 360 API
Environment
Native Modules
AudioModule
Location
StyleSheet
VrHeadModel
Assets
React 360 input events
Game details
Game data structure
Details of VR objects
OBJ and MTL links
Translation values
Rotation values
Scale value
Color
Static data versus dynamic data
Sample data
Building the game view in React 360
Update client.js and mount to Location
Defining styles with StyleSheet
World background
Adding 3D VR objects
Interacting with VR objects
Rotation
Animation with requestAnimationFrame
Clicking 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 MERN application
Add the React 360 production files
Updating references in index.html
Trying out the integration
Summary
Making the VR Game Dynamic Using MERN
Dynamic MERN VR Game
Game model
Game schema
VRObject schema
Array length validation in the game schema
Game APIs
The create API
Route
Controller
Fetch
List API
Route
Controller
Fetch
List by maker API
Route
Controller
Fetch
Read API
Route
Controller
Fetch
Edit API
Route
Controller
Fetch
Delete API
Route
Controller
Fetch
Creating and editing games
Making a new game
Updating the menu
NewGame component
Editing the game
EditGame component
The GameForm component
Inputing simple game details
Form title
Game world image
Game name
Clue text
Handle input
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
VRObjectForm component
3D object file input
Translate value input
Rotate value input
Scale value input
Object color input
Delete object button
Handling the input change
Game list views
All games
Games by a maker
GameDetail component
Game details
Play Game button
Edit and delete buttons
Deleting a game
DeleteGame component
Playing the VR game
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 read API
Bundling and integrating the updated code
Summary
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
JSS
Selective server-side rendering with data
When is SSR with data relevant?
Using ES6 class for stateful vs pure functional components
React components with ES6 class
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 with Jest
Adding a test to the MERN Social application
Installing the packages
Defining the script to run tests
Adding a tests folder
Test case
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
Updating frontend routes
Integrating with existing components
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
← Prev
Back
Next →
← Prev
Back
Next →