Cover image for Full-Stack React Projects - Second Edition

Full-Stack React Projects - Second Edition

Author Shama Hoque
Release Date: 2020/04/01
Topic:
0%
713
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

A practical, project-based guide to full-stack JavaScript web development combining the power of React with industry-tested server-side technologies

Key Features

  • Build your career as a full-stack developer with this practical guide
  • Understand how the different aspects of a MERN application come together through a series of practical projects
  • Master the MERN stack by building robust social media, E-commerce store, and web-based VR game apps

Book Description

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.

What you will learn

  • Extend a basic MERN-based application to build a variety of applications
  • Add real-time communication capabilities with Socket.IO
  • Implement data visualization features for React applications using Victory
  • Develop media streaming applications using MongoDB GridFS
  • Improve SEO for your MERN apps by implementing server-side rendering with data
  • Implement user authentication and authorization using JSON web tokens
  • Set up and use React 360 to develop user interfaces with VR capabilities
  • Make your MERN stack applications reliable and scalable with industry best practices

Who this book is for

This is one of the most useful web development books for JavaScript developers who may have worked with React but have minimal experience in full-stack development with Node, Express, and MongoDB.

Table of Contents

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