Modern Full-Stack React Projects

Table of contents

1. Modern Full-Stack React Projects
2. Contributors
3. About the author
4. About the reviewers
5. Foreword
6. Preface
   1. Who this book is for
   2. What this book covers
   3. To get the most out of this book
   4. Download the example code files
   5. Code in Action
   6. Conventions used
   7. Get in touch
   8. Share Your Thoughts
   9. Download a free PDF copy of this book
7. Part 1:Getting Started with Full-Stack Development
8. Chapter 1: Preparing for Full-Stack Development
   1. Technical requirements
   2. Motivation to become a full-stack developer
   3. What is new in this release of Full-Stack React Projects?
   4. Getting the most out of this book
   5. Setting up the development environment
      1. Installing VS Code and extensions
      2. Setting up a project with Vite
      3. Setting up ESLint and Prettier to enforce best practices and code style
      4. Setting up Husky to make sure we commit proper code
   6. Summary
9. Chapter 2: Getting to Know Node.js and MongoDB
   1. Technical requirements
   2. Writing and running scripts with Node.js
      1. Similarities and differences between JavaScript in the browser and in Node.js
      2. Creating our first Node.js script
      3. Handling files in Node.js
      4. Concurrency with JavaScript in the browser and Node.js
      5. Creating our first web server
      6. Extending the web server to serve our JSON file
   3. Introducing Docker, a platform for containers
      1. The Docker platform
      2. Installing Docker
      3. Creating a container
      4. Accessing Docker via VS Code
   4. Introducing MongoDB, a document database
      1. Setting up a MongoDB server
      2. Running commands directly on the database
      3. Accessing the database via VS Code
   5. Accessing the MongoDB database via Node.js
   6. Summary
10. Part 2:Building and Deploying Our First Full-Stack Application with a REST API
11. Chapter 3: Implementing a Backend Using Express, Mongoose ODM, and Jest
    1. Technical requirements
    2. Designing a backend service
       1. Creating the folder structure for our backend service
    3. Creating database schemas using Mongoose
       1. Defining a model for blog posts
       2. Using the blog post model
       3. Defining creation and last update dates in the blog post
    4. Developing and testing service functions
       1. Setting up the test environment
       2. Writing our first service function: createPost
       3. Defining test cases for the createPost service function
       4. Defining a function to list posts
       5. Defining test cases for list posts
       6. Defining the get single post, update and delete post functions
       7. Using the Jest VS Code extension
    5. Providing a REST API using Express
       1. Defining our API routes
       2. Setting up Express
       3. Using dotenv for setting environment variables
       4. Using nodemon for easier development
       5. Creating our API routes with Express
    6. Summary
12. Chapter 4: Integrating a Frontend Using React and TanStack Query
    1. Technical requirements
    2. Principles of React
    3. Setting up a full-stack React project
    4. Creating the user interface for our application
       1. Component structure
       2. Implementing static React components
    5. Integrating the backend service using TanStack Query
       1. Setting up TanStack Query for React
       2. Fetching blog posts
       3. Implementing filters and sorting
       4. Creating new posts
    6. Summary
13. Chapter 5: Deploying the Application with Docker and CI/CD
    1. Technical requirements
    2. Creating Docker images
       1. Creating the backend Dockerfile
       2. Creating a .dockerignore file
       3. Building the Docker image
       4. Creating and running a container from our image
       5. Creating the frontend Dockerfile
       6. Creating the .dockerignore file for the frontend
       7. Building the frontend Docker image
       8. Creating and running the frontend container
       9. Managing multiple images using Docker Compose
       10. Cleaning up unused containers
    3. Deploying our full-stack application to the cloud
       1. Creating a MongoDB Atlas database
       2. Creating an account on Google Cloud
       3. Deploying our Docker images to a Docker registry
       4. Deploying the backend Docker image to Cloud Run
       5. Deploying the frontend Docker image to Cloud Run
    4. Configuring CI to automate testing
       1. Adding CI for the frontend
       2. Adding CI for the backend
    5. Configuring CD to automate the deployment
       1. Getting Docker Hub credentials
       2. Getting Google Cloud credentials
       3. Defining the deployment workflow
    6. Summary
14. Part 3:Practicing Development of Full-Stack Web Applications
15. Chapter 6: Adding Authentication with JWT
    1. Technical requirements
    2. What is JWT?
       1. JWT header
       2. JWT payload
       3. JWT signature
       4. Creating a JWT
       5. Using JWT
       6. Storing JWT
    3. Implementing login, signup, and authenticated routes in the backend using JWTs
       1. Creating the user model
       2. Creating the signup service
       3. Creating the signup route
       4. Creating the login service
       5. Creating the login route
       6. Defining authenticated routes
       7. Accessing the currently logged-in user
    4. Integrating login and signup in the frontend using React Router and JWT
       1. Using React Router to implement multiple routes
       2. Creating the signup page
       3. Linking to other routes using the Link component
       4. Creating the login page and storing the JWT
       5. Using the stored JWT and implementing a simple logout
       6. Fetching the usernames
       7. Sending the JWT header when creating posts
    5. Advanced token handling
    6. Summary
16. Chapter 7: Improving the Load Time Using Server-Side Rendering
    1. Technical requirements
    2. Benchmarking the load time of our application
    3. Rendering React components on the server
       1. Setting up the server
       2. Defining the server-side entry point
       3. Defining the client-side entry point
       4. Updating index.html and package.json
       5. Making React Router work with server-side rendering
    4. Server-side data fetching
       1. Using initial data
       2. Using hydration
    5. Advanced server-side rendering
    6. Summary
17. Chapter 8: Making Sure Customers Find You with Search Engine Optimization
    1. Technical requirements
    2. Optimizing an application for search engines
       1. Creating a robots.txt file
       2. Creating separate pages for posts
       3. Creating meaningful URLs (slugs)
       4. Adding dynamic titles
       5. Adding other meta tags
       6. Creating a sitemap
    3. Improving social media embeds
       1. Open Graph meta tags
       2. Using the OG article meta tags
    4. Summary
18. Chapter 9: Implementing End-to-End Tests Using Playwright
    1. Technical requirements
    2. Setting up Playwright for end-to-end testing
       1. Installing Playwright
       2. Preparing the backend for end-to-end testing
    3. Writing and running end-to-end tests
       1. Using the VS Code extension
    4. Reusable test setups using fixtures
       1. Overview of built-in fixtures
       2. Writing our own fixture
       3. Using custom fixtures
    5. Viewing test reports and running in CI
       1. Viewing an HTML report
       2. Running Playwright tests in CI
    6. Summary
19. Chapter 10: Aggregating and Visualizing Statistics Using MongoDB and Victory
    1. Technical requirements
    2. Collecting and simulating events
       1. Creating the event model
       2. Defining a service function and route to track events
       3. Collecting events on the frontend
       4. Simulating events
    3. Aggregating data with MongoDB
       1. Getting the total number of views per post
       2. Getting the number of daily views per post
       3. Calculating the average session duration
    4. Implementing data aggregation in the backend
       1. Defining aggregation service functions
       2. Defining the routes
    5. Integrating and visualizing data on the frontend using Victory
       1. Integrating the aggregation API
       2. Visualizing data using Victory
    6. Summary
20. Chapter 11: Building a Backend with a GraphQL API
    1. Technical requirements
    2. What is GraphQL?
       1. Mutations
    3. Implementing a GraphQL API in a backend
       1. Implementing fields that query posts
       2. Defining the Post type
       3. Defining the User type
       4. Trying out deeply nested queries
       5. Implementing input types
    4. Implementing GraphQL authentication and mutations
       1. Adding authentication to GraphQL
       2. Implementing mutations
       3. Using mutations
    5. Overview of advanced GraphQL concepts
       1. Fragments
       2. Introspection
    6. Summary
21. Chapter 12: Interfacing with GraphQL on the Frontend Using Apollo Client
    1. Technical requirements
    2. Setting up Apollo Client and making our first query
       1. Querying posts from the frontend using GraphQL
       2. Resolving author usernames in a single query
    3. Using variables in GraphQL queries
       1. Using fragments to reuse parts of queries
    4. Using mutations on the frontend
       1. Migrating login to GraphQL
       2. Migrating create post to GraphQL
    5. Summary
22. Part 4:Exploring an Event-Based Full-Stack Architecture
23. Chapter 13: Building an Event-Based Backend Using Express and Socket.IO
    1. Technical requirements
    2. What are event-based applications?
       1. What are WebSockets?
       2. What is Socket.IO?
       3. Connecting to Socket.IO
       4. Emitting and receiving events
    3. Setting up Socket.IO
       1. Setting up a simple Socket.IO client
    4. Creating a backend for a chat app using Socket.IO
       1. Emitting events to send chat messages from the client to the server
       2. Broadcasting chat messages from the server to all clients
       3. Joining rooms to send messages in
       4. Using acknowledgments to get information about a user
    5. Adding authentication by integrating JWT with Socket.IO
    6. Summary
24. Chapter 14: Creating a Frontend to Consume and Send Events
    1. Technical requirements
    2. Integrating the Socket.IO client with React
       1. Cleaning up the project
       2. Creating a Socket.IO context
       3. Hooking up the context and displaying the status
       4. Disconnecting socket on logout
    3. Implementing chat functionality
       1. Implementing the chat components
       2. Implementing a useChat hook
       3. Implementing the ChatRoom component
    4. Implementing chat commands with acknowledgments
    5. Summary
25. Chapter 15: Adding Persistence to Socket.IO Using MongoDB
    1. Technical requirements
    2. Storing and replaying messages using MongoDB
       1. Creating the Mongoose schema
       2. Creating the service functions
       3. Storing and replaying messages
       4. Visually distinguishing replayed messages
    3. Refactoring the app to be more extensible
       1. Defining service functions
       2. Refactoring the Socket.IO server to use the service functions
       3. Refactoring the client-side code
    4. Implementing commands to join and switch rooms
    5. Summary
26. Part 5:Advancing to Enterprise-Ready Full-Stack Applications
27. Chapter 16: Getting Started with Next.js
    1. Technical requirements
    2. What is Next.js?
    3. Setting up Next.js
    4. Introducing the App Router
       1. Defining the folder structure
    5. Creating static components and pages
       1. Defining components
       2. Defining pages
       3. Adding links between pages
    6. Summary
28. Chapter 17: Introducing React Server Components
    1. Technical requirements
    2. What are RSCs?
    3. Adding a data layer to our Next.js app
       1. Setting up the database connection
       2. Creating the database models
       3. Defining data layer functions
    4. Using RSCs to fetch data from the database
       1. Fetching a list of posts
       2. Fetching a single post
    5. Using Server Actions to sign up, log in, and create new posts
       1. Implementing the signup page
       2. Implementing the login page and JWT handling
       3. Checking if the user is logged in
       4. Implementing logout
       5. Implementing post creation
    6. Summary
29. Chapter 18: Advanced Next.js Concepts and Optimizations
    1. Technical requirements
    2. Defining API routes in Next.js
       1. Creating an API route for listing blog posts
    3. Caching in Next.js
       1. Exploring static rendering in API routes
       2. Making the route dynamic
       3. Caching functions in the data layer
       4. Revalidating the cache via Server Actions
       5. Revalidating the cache via a Webhook
       6. Revalidating the cache periodically
       7. Opting out of caching
    4. SEO with Next.js
       1. Adding dynamic titles and meta tags
       2. Creating a robots.txt file
       3. Creating meaningful URLs (slugs)
       4. Creating a sitemap
    5. Optimized image and font loading in Next.js
       1. The Font component
       2. The Image component
    6. Summary
30. Chapter 19: Deploying a Next.js App
    1. Technical requirements
    2. Deploying a Next.js app with Vercel
       1. Setting environment variables in Vercel
    3. Creating a custom deployment setup for Next.js apps
    4. Summary
31. Chapter 20: Diving Deeper into Full-Stack Development
    1. Overview of other full-stack frameworks
       1. Next.js
       2. Remix
       3. Gatsby
    2. Overview of UI libraries
       1. Material UI (MUI)
       2. Tailwind CSS
       3. React Aria
       4. NextUI
    3. Overview of advanced state management solutions
       1. Recoil
       2. Jotai
       3. Redux
       4. MobX
       5. xstate
       6. Zustand
    4. Pointers on maintaining large-scale projects
       1. Using TypeScript
       2. Setting up a Monorepo
       3. Optimizing the bundle size
    5. Summary
32. Index
    1. Why subscribe?
33. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts
    3. Download a free PDF copy of this book