Full-Stack React Projects

Table of contents

1. Title Page
2. Copyright and Credits
   1. Full-Stack React Projects
3. Packt Upsell
   1. Why subscribe?
   2. PacktPub.com
4. Contributors
   1. About the author
   2. About the reviewer
   3. Packt is searching for authors like you
5. Preface
   1. Who this book is for
   2. What this book covers
   3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
   4. Get in touch
      1. Reviews
6. Unleashing React Applications with MERN
   1. MERN stack
      1. Node
      2. Express
      3. MongoDB
      4. React
   2. Relevance of MERN
      1. Consistency across the technology stack
      2. Less time to learn, develop, deploy, and extend
      3. Widely adopted in the industry
      4. Community support and growth
   3. Range of MERN applications
      1. MERN applications developed in this book
         1. Social media platform
         2. Online marketplace
         3. Media streaming application
         4. VR game for the web
   4. Book structure
      1. Getting started with MERN
      2. Building MERN from the ground up – a skeleton application
      3. Developing basic web applications with MERN
      4. Advancing to complex MERN applications
      5. Going forward with MERN
   5. Getting the most out of this book
   6. Summary
7. Preparing the Development Environment
   1. Selecting development tools
      1. Workspace options
         1. Local and cloud development
      2. IDE or text editors
      3. Chrome Developer Tools
      4. Git
         1. Installation
         2. Remote Git hosting services
   2. Setting up MERN stack technologies
      1. MongoDB
         1. Installation
         2. Running the mongo shell
      2. Node
         1. Installation
            1. Upgrading npm versions
         2. Node version management with nvm
      3. npm modules for MERN
         1. Key modules
         2. devDependency modules
   3. Checking your development setup
      1. Initializing package.json and installing npm modules
      2. Configuring Babel, Webpack, and Nodemon
         1. Babel
         2. Webpack
            1. Client-side Webpack configuration for development
            2. Server-side Webpack configuration
            3. Client-side Webpack configuration for production 
         3. Nodemon
      3. Frontend views with React
      4. Server with Express and Node
         1. Express app
         2. Bundle React app during development
         3. Serving static files from the dist folder
         4. Rendering templates at the root 
      5. Connecting the server to MongoDB
      6. npm run scripts
      7. Developing and debugging in real time
   4. Summary
8. Building a Backend with MongoDB, Express, and Node
   1. Skeleton application overview
      1. Feature breakdown
      2. Focus of this chapter – the backend
         1. User model
         2. API endpoints for user CRUD
         3. Auth with JSON Web Tokens
            1. How JWT works
   2. Implementing the skeleton backend
      1. Folder and file structure
      2. Setting up the project
         1. Initializing package.json
         2. Development dependencies
            1. Babel
            2. Webpack
            3. Nodemon
         3. Config variables
         4. Running scripts
      3. Preparing the server
         1. Configuring Express
         2. Starting the server
         3. Setting up Mongoose and connecting to MongoDB
         4. Serving an HTML template at a root URL
      4. User model
         1. User schema definition
            1. Name
            2. Email
            3. Created and updated timestamps
            4. Hashed password and salt
         2. Password for auth
            1. As a virtual field
            2. Encryption and authentication
            3. Password field validation
         3. Mongoose error handling
      5. User CRUD API 
         1. User routes
         2. User controller
         3. Creating a new user
         4. Listing all users
         5. Loading a user by ID to read, update, or delete
            1. Loading
            2. Reading
            3. Updating
            4. Deleting
      6. User auth and protected routes
         1. Auth routes
         2. Auth controller
         3. Sign-in
         4. Sign-out
         5. Protecting routes with express-jwt
            1. Requiring sign-in
            2. Authorizing signed in users
            3. Protecting user routes
            4. Auth error handling for express-jwt
   3. Checking the standalone backend
      1. Creating a new user
      2. Fetching the user list
      3. Trying to fetch a single user
      4. Signing in
      5. Fetching a single user successfully
   4. Summary
9. Adding a React Frontend to Complete MERN
   1. Skeleton frontend
   2. Folder and file structure
   3. Setting up for React development
      1. Configuring Babel and Webpack
         1. Babel
         2. Webpack
      2. Loading Webpack middleware for development
      3. Serving static files with Express
      4. Updating the template to load a bundled script
      5. Adding React dependencies
         1. React
         2. React Router
         3. Material-UI
   4. Implementing React views
      1. Rendering a home page
         1. Entry point at main.js
         2. Root React component
            1. Customizing the Material-UI theme
            2. Wrapping the root component with MUI theme and BrowserRouter
            3. Marking the root component as hot-exported
         3. Adding a home route to MainRouter
         4. Home component
            1. Imports
            2. Style declarations
            3. Component definition
            4. PropTypes validation
            5. Export component
         5. Bundling image assets
         6. Running and opening in the browser
      2. Backend API integration
         1. Fetch for User CRUD
            1. Creating a user
            2. Listing users
            3. Reading a user profile
            4. Updating a user's data
            5. Deleting a user
         2. Fetch for auth API
            1. Sign-in
            2. Sign-out
      3. Auth in the frontend
         1. Managing auth state
         2. PrivateRoute component
      4. User and auth components
         1. Users component
         2. Signup component 
         3. Signin component
         4. Profile component
         5. EditProfile component
         6. DeleteUser component
         7. Menu component
   5. Basic server-side rendering
      1. Modules for server-side rendering
      2. Preparing Material-UI styles for SSR
      3. Generating markup
      4. Sending a template with markup and CSS
      5. Updating template.js
      6. Updating MainRouter
      7. Hydrate instead of render
   6. Summary
10. Starting with a Simple Social Media Application
    1. MERN Social
    2. Updating the user profile
       1. Adding an about description
       2. Uploading a profile photo
          1. Updating the user model to store a photo in MongoDB
          2. Uploading a photo from the edit form
             1. File input with Material-UI
             2. Form submission with the file attached
          3. Processing a request containing a file upload
       3. Retrieving a profile photo
          1. Profile photo URL
          2. Showing a photo in a view
    3. Following users in MERN Social
       1. Follow and unfollow
          1. Updating the user model
          2. Updating the userByID controller method
          3. API to follow and unfollow
          4. Accessing follow and unfollow APIs in views
          5. Follow and unfollow buttons
             1. FollowProfileButton component
             2. Update Profile component
       2. Listing followings and followers
          1. FollowGrid component
       3. Finding people to follow
          1. Fetching users not followed
          2. FindPeople component
    4. Posts
       1. Mongoose schema model for Post
       2. Newsfeed component
       3. Listing posts
          1. List in Newsfeed
             1. Newsfeed API for posts
             2. Fetching Newsfeed posts in the view
          2. Listing by user in Profile
             1. API for posts by a user
             2. Fetching user posts in the view
       4. Creating a new post
          1. Creating post API
          2. Retrieving a post's photo
          3. Fetching the create post API in the view
          4. NewPost component
       5. Post component
          1. Layout
             1. Header
             2. Content
             3. Actions
             4. Comments
          2. Deleting a post
       6. Likes
          1. Like API
          2. Unlike API
          3. Checking if liked and counting likes
          4. Handling like clicks
       7. Comments
          1. Adding a comment
             1. Comment API
             2. Writing something in the view
          2. Listing comments
          3. Deleting a comment
             1. Uncomment API
             2. Removing a comment from view
          4. Comment count update
    5. Summary
11. Exercising New MERN Skills with an Online Marketplace
    1. MERN Marketplace
    2. Users as sellers
       1. Updating the user model
       2. Updating the Edit Profile view
       3. Updating the menu
    3. Shops in the Marketplace
       1. Shop model
       2. Create a new shop
          1. Create shop API
          2. Fetch the create API in the view
          3. NewShop component
       3. List shops
          1. List all shops
             1. Shops list API
             2. Fetch all shops for the view
             3. Shops component
          2. List shops by owner
             1. Shops by owner API
             2. Fetch all shops owned by a user for the view
             3. MyShops component
       4. Display a shop
          1. Read a shop API
          2. Fetch the shop in the view
          3. Shop component 
       5. Edit a shop
          1. Edit shop API
          2. Fetch the edit API in the view
          3. EditShop component
       6. Delete a shop
          1. Delete shop API
          2. Fetch the delete API in the view
          3. DeleteShop component
    4. Products
       1. Product model
       2. Create a new product
          1. Create product API
          2. Fetching the create API in the view
          3. The NewProduct component
       3. List products
          1. List by shop
             1. Products by shop API
             2. Products component for buyers
             3. MyProducts component for shop owners
          2. List product suggestions
             1. Latest products
             2. Related products
             3. Suggestions component
       4. Display a product
          1. Read a product API
          2. Product component
       5. Edit and delete a product
          1. Edit
          2. Delete
    5. Product search with category
       1. Categories API
       2. Search products API
          1. Fetch search results for the view
       3. Search component
       4. Categories component
    6. Summary
12. Extending the Marketplace for Orders and Payments
    1. The MERN Marketplace with a cart, payments, and orders
    2. Shopping cart
       1. Adding to cart
       2. Cart icon on the menu
       3. Cart view
          1. The CartItems component
             1. Retrieving cart details
             2. Modifying quantity
             3. Removing item
             4. Showing total price
             5. Option to check out
    3. Using Stripe for payments
       1. Stripe
       2. Stripe-connected account for each seller
          1. Updating user model
          2. Button to connect with Stripe
          3. The StripeConnect component
          4. Stripe auth update API
       3. Stripe Card Elements for checkout
       4. Stripe Customer to record card details
          1. Updating user model
          2. Updating user controller
             1. Creating a new Stripe Customer
             2. Updating an existing Stripe Customer
       5. Creating a charge for each product processed
    4. Checkout
       1. Initializing checkout details
          1. Customer information
          2. Delivery address
       2. The PlaceOrder component
          1. Stripe CardElement component
          2. Placing an order
          3. Empty cart
          4. Redirecting to Order view
    5. Creating new order
       1. Order model
          1. Ordered by and for customer
          2. Delivery address
          3. Payment reference
          4. Products ordered
             1. The CartItem schema
       2. Create order API
          1. Decrease product stock quantity
          2. Create order controller method
    6. Orders by shop
       1. List by shop API
       2. The ShopOrders component
          1. List orders
          2. The ProductOrderEdit component
       3. APIs for products ordered
          1. Get status values
          2. Update order status
          3. Cancel product order
          4. Process charge for product
    7. View order details
    8. Summary
13. Building a Media Streaming Application
    1. MERN Mediastream
    2. Uploading and storing media
       1. Media model
       2. MongoDB GridFS to store large files
       3. Creating a media API
          1. Route to create media
          2. Controller method to handle create request
          3. Fetch create API in the view
       4. New media form view
          1. Adding media menu button
          2. React route for NewMedia view
          3. NewMedia component
    3. Retrieve and stream media
       1. Get video API
       2. React media player to render the video
    4. Media list
       1. MediaList component
       2. List popular media
       3. List media by users
    5. Display, update, and delete media
       1. Display media
          1. Read media API
          2. Media component
       2. Update media details
          1. Media update API
          2. Media edit form
       3. Deleting media
          1. The Delete media API
          2. The DeleteMedia component
    6. Summary
14. Customizing the Media Player and Improving SEO
    1. MERN Mediastream with a custom media player
    2. The play media page
       1. Component structure
    3. Related media list
       1. Related list API
       2. The RelatedMedia component
    4. The PlayMedia component
    5. Media player
       1. Updating the Media component
       2. Initializing the media player
       3. Custom media controls
          1. Play, pause, and replay
          2. Play next
          3. Loop on ended
          4. Volume control
          5. Progress control
          6. Fullscreen
          7. Played duration
    6. Autoplaying related media
       1. Toggling autoplay
       2. Handle autoplay across components
       3. Update state when video ends in MediaPlayer
    7. Server-side rendering with data
       1. Route config
       2. Updating SSR code for the Express server
          1. Using route config to load data
          2. Isomorphic-fetch
             1. Absolute URL
          3. Injecting data into React app
       3. Applying server-injected data in client code
          1. Passing data props to PlayMedia from MainRouter
          2. Rendering received data in PlayMedia
       4. Checking the implementation of SSR with data
          1. Test in Chrome
             1. Loading a page with JS enabled
             2. Disabling JS from settings
             3. PlayMedia view with JS blocked
    8. Summary
15. Developing a Web-Based VR Game
    1. MERN VR Game
       1. Game features
       2. Focus of this chapter
    2. React 360
       1. Getting started with React 360
    3. Key concepts for developing the VR game
       1. Equirectangular panoramic images
       2. 3D position – coordinates and transforms
          1. 3D coordinate system
          2. Transform
       3. React 360 components
          1. Core components
             1. View
             2. Text
          2. Components for 3D VR experience
             1. Entity
             2. VrButton
       4. React 360 API
          1. Environment
          2. Native Modules
             1. AudioModule
             2. Location
          3. StyleSheet
          4. VrHeadModel
          5. Assets
       5. React 360 input events
    4. Game details
       1. Game data structure
          1. Details of VR objects
             1. OBJ and MTL links
             2. Translation values
             3. Rotation values
             4. Scale value
             5. Color
       2. Static data versus dynamic data
          1. Sample data
    5. Building the game view in React 360
       1. Update client.js and mount to Location
       2. Defining styles with StyleSheet
       3. World background
       4. Adding 3D VR objects
       5. Interacting with VR objects
          1. Rotation 
             1. Animation with requestAnimationFrame
          2. Clicking the 3D objects
             1. Collecting the correct object on click
       6. Game completed state
    6. Bundling for production and integration with MERN
       1. Bundling React 360 files
       2. Integrating with MERN application
          1. Add the React 360 production files
          2. Updating references in index.html
       3. Trying out the integration
    7. Summary
16. Making the VR Game Dynamic Using MERN
    1. Dynamic MERN VR Game
    2. Game model
       1. Game schema
       2. VRObject schema
       3. Array length validation in the game schema
    3. Game APIs
       1. The create API
          1. Route
          2. Controller 
          3. Fetch
       2. List API
          1. Route
          2. Controller 
          3. Fetch
       3. List by maker API
          1. Route
          2. Controller 
          3. Fetch
       4. Read API
          1. Route
          2. Controller 
          3. Fetch
       5. Edit API
          1. Route
          2. Controller 
          3. Fetch
       6. Delete API
          1. Route
          2. Controller
          3. Fetch
    4. Creating and editing games
       1. Making a new game
          1. Updating the menu
          2. NewGame component
       2. Editing the game
          1. EditGame component
       3. The GameForm component
          1. Inputing simple game details
             1. Form title
             2. Game world image
             3. Game name
             4. Clue text
             5. Handle input
          2. Modifying arrays of VR objects
             1. Iterating and rendering the object details form
             2. Adding a new object to the array
             3. Removing an object from the array
             4. Handling the object detail change
       4. VRObjectForm component
          1. 3D object file input
          2. Translate value input
          3. Rotate value input
          4. Scale value input
          5. Object color input
          6. Delete object button
          7. Handling the input change
    5. Game list views
       1. All games
       2. Games by a maker
       3. GameDetail component
          1. Game details
          2. Play Game button
          3. Edit and delete buttons
    6. Deleting a game
       1. DeleteGame component
    7. Playing the VR game
       1. API to render the VR game view
    8. Updating the game code in React 360
       1. Getting the game ID from a link
       2. Fetching the game data with the read API
       3. Bundling and integrating the updated code
    9. Summary
17. Following Best Practices and Developing MERN Further
    1. Separation of concerns with modularity
       1. Revisiting the application folder structure
          1. Server-side code
          2. Client-side code
    2. Adding CSS styles
       1. External style sheets 
       2. Inline styles
       3. JSS
    3. Selective server-side rendering with data
       1. When is SSR with data relevant?
    4. Using ES6 class for stateful vs pure functional components
       1. React components with ES6 class
       2. React components as pure functions
       3. Designing the UI with stateful components and stateless functional components
    5. Using Redux or Flux 
    6. Enhancing security
       1. JSON web tokens – client-side or server-side storage
       2. Securing password storage
    7. Writing test code
       1. Testing with Jest
       2. Adding a test to the MERN Social application
          1. Installing the packages
          2. Defining the script to run tests
          3. Adding a tests folder
          4. Test case
          5. Adding the test
          6. Generating a snapshot of the correct Post view
          7. Running and checking the test
    8. Optimizing the bundle size
       1. Code splitting
          1. Dynamic import()
    9. Extending the applications
       1. Extending the server code
          1. Adding a model
          2. Implementing the APIs
             1. Adding controllers
             2. Adding routes
       2. Extending the client code
          1. Adding the API fetch methods
          2. Adding components
          3. Loading new components
             1. Updating frontend routes
             2. Integrating with existing components
    10. Summary
18. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think