Modern Full-Stack React Projects : Build, Maintain, and Deploy Modern Web Apps Using MongoDB, Express, React, and Node. js

Modern Full-Stack React Projects Build, Maintain, and Deploy Modern Web Apps Using MongoDB, Express, React, and Node. js

Polish your web development skills by working on real-world projects for different use-cases of full-stack web development Key Features Understand how the different aspects of a MERN application come together through a series of practical projects Set up frontend and backend projects that can be int...

Full description

Bibliographic Details
Other Authors: Bugl, Daniel, author (author), Zronek, Matthias, author
Format: eBook
Language:Inglés
Published: Birmingham, England : Packt Publishing [2024]
Edition:First edition
Subjects:
Application software > Development.
Application program interfaces (Computer software)
Web applications.
See on Biblioteca Universitat Ramon Llull:https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009828020706719
Table of Contents:
  • Cover
  • Title Page
  • Copyright and Credits
  • Dedication
  • Contributors
  • Foreword
  • Table of Contents
  • Preface
  • Part 1: Getting Started with Full-Stack Development
  • Chapter 1: Preparing for Full-Stack Development
  • Technical requirements
  • Motivation to become a full-stack developer
  • What is new in this release of Full-Stack React Projects?
  • Getting the most out of this book
  • Setting up the development environment
  • Installing VS Code and extensions
  • Setting up a project with Vite
  • Setting up ESLint and Prettier to enforce best practices and code style
  • Setting up Husky to make sure we commit proper code
  • Summary
  • Chapter 2 Getting to Know Node.js and MongoDB
  • Technical requirements
  • Writing and running scripts with Node.js
  • Similarities and differences between JavaScript in the browser and in Node.js
  • Creating our first Node.js script
  • Handling files in Node.js
  • Concurrency with JavaScript in the browser and Node.js
  • Creating our first web server
  • Extending the web server to serve our JSON file
  • Introducing Docker, a platform for containers
  • The Docker platform
  • Installing Docker
  • Creating a container
  • Accessing Docker via VS Code
  • Introducing MongoDB, a document database
  • Setting up a MongoDB server
  • Running commands directly on the database
  • Accessing the database via VS Code
  • Accessing the MongoDB database via Node.js
  • Summary
  • Part 2: Building and Deploying Our First Full-Stack Application with a REST API
  • Chapter 3: Implementing a Backend Using Express, Mongoose ODM, and Jest
  • Technical requirements
  • Designing a backend service
  • Creating the folder structure for our backend service
  • Creating database schemas using Mongoose
  • Defining a model for blog posts
  • Using the blog post model
  • Defining creation and last update dates in the blog post.
  • Developing and testing service functions
  • Setting up the test environment
  • Writing our first service function: createPost
  • Defining test cases for the createPost service function
  • Defining a function to list posts
  • Defining test cases for list posts
  • Defining the get single post, update and delete post functions
  • Using the Jest VS Code extension
  • Providing a REST API using Express
  • Defining our API routes
  • Setting up Express
  • Using dotenv for setting environment variables
  • Using nodemon for easier development
  • Creating our API routes with Express
  • Summary
  • Chapter 4: Integrating a Frontend Using React and TanStack Query
  • Technical requirements
  • Principles of React
  • Setting up a full-stack React project
  • Creating the user interface for our application
  • Component structure
  • Implementing static React components
  • Integrating the backend service using TanStack Query
  • Setting up TanStack Query for React
  • Fetching blog posts
  • Implementing filters and sorting
  • Creating new posts
  • Summary
  • Chapter 5: Deploying the Application with Docker and CI/CD
  • Technical requirements
  • Creating Docker images
  • Creating the backend Dockerfile
  • Creating a .dockerignore file
  • Building the Docker image
  • Creating and running a container from our image
  • Creating the frontend Dockerfile
  • Creating the .dockerignore file for the frontend
  • Building the frontend Docker image
  • Creating and running the frontend container
  • Managing multiple images using Docker Compose
  • Cleaning up unused containers
  • Deploying our full-stack application to the cloud
  • Creating a MongoDB Atlas database
  • Creating an account on Google Cloud
  • Deploying our Docker images to a Docker registry
  • Deploying the backend Docker image to Cloud Run
  • Deploying the frontend Docker image to Cloud Run.
  • Configuring CI to automate testing
  • Adding CI for the frontend
  • Adding CI for the backend
  • Configuring CD to automate the deployment
  • Getting Docker Hub credentials
  • Getting Google Cloud credentials
  • Defining the deployment workflow
  • Summary
  • Part 3: Practicing Development of Full-Stack Web Applications
  • Chapter 6: Adding Authentication with JWT
  • Technical requirements
  • What is JWT?
  • JWT header
  • JWT payload
  • JWT signature
  • Creating a JWT
  • Using JWT
  • Storing JWT
  • Implementing login, signup, and authenticated routes in the backend using JWTs
  • Creating the user model
  • Creating the signup service
  • Creating the signup route
  • Creating the login service
  • Creating the login route
  • Defining authenticated routes
  • Accessing the currently logged-in user
  • Integrating login and signup in the frontend using React Router and JWT
  • Using React Router to implement multiple routes
  • Creating the signup page
  • Linking to other routes using the Link component
  • Creating the login page and storing the JWT
  • Using the stored JWT and implementing a simple logout
  • Fetching the usernames
  • Sending the JWT header when creating posts
  • Advanced token handling
  • Summary
  • Chapter 7: Improving the Load Time Using Server-Side Rendering
  • Technical requirements
  • Benchmarking the load time of our application
  • Rendering React components on the server
  • Setting up the server
  • Defining the server-side entry point
  • Defining the client-side entry point
  • Updating index.html and package.json
  • Making React Router work with server-side rendering
  • Server-side data fetching
  • Using initial data
  • Using hydration
  • Advanced server-side rendering
  • Summary
  • Chapter 8: Making Sure Customers Find You with Search Engine Optimization
  • Technical requirements
  • Optimizing an application for search engines.
  • Creating a robots.txt file
  • Creating separate pages for posts
  • Creating meaningful URLs (slugs)
  • Adding dynamic titles
  • Adding other meta tags
  • Creating a sitemap
  • Improving social media embeds
  • Open Graph meta tags
  • Using the OG article meta tags
  • Summary
  • Chapter 9: Implementing End-to-End Tests Using Playwright
  • Technical requirements
  • Setting up Playwright for end-to-end testing
  • Installing Playwright
  • Preparing the backend for end-to-end testing
  • Writing and running end-to-end tests
  • Using the VS Code extension
  • Reusable test setups using fixtures
  • Overview of built-in fixtures
  • Writing our own fixture
  • Using custom fixtures
  • Viewing test reports and running in CI
  • Viewing an HTML report
  • Running Playwright tests in CI
  • Summary
  • Chapter 10: Aggregating and Visualizing Statistics Using MongoDB and Victory
  • Technical requirements
  • Collecting and simulating events
  • Creating the event model
  • Defining a service function and route to track events
  • Collecting events on the frontend
  • Simulating events
  • Aggregating data with MongoDB
  • Getting the total number of views per post
  • Getting the number of daily views per post
  • Calculating the average session duration
  • Implementing data aggregation in the backend
  • Defining aggregation service functions
  • Defining the routes
  • Integrating and visualizing data on the frontend using Victory
  • Integrating the aggregation API
  • Visualizing data using Victory
  • Summary
  • Chapter 11: Building a Backend with a GraphQL API
  • Technical requirements
  • What is GraphQL?
  • Mutations
  • Implementing a GraphQL API in a backend
  • Implementing fields that query posts
  • Defining the Post type
  • Defining the User type
  • Trying out deeply nested queries
  • Implementing input types
  • Implementing GraphQL authentication and mutations.
  • Adding authentication to GraphQL
  • Implementing mutations
  • Using mutations
  • Overview of advanced GraphQL concepts
  • Fragments
  • Introspection
  • Summary
  • Chapter 12: Interfacing with GraphQL on the Frontend Using Apollo Client
  • Technical requirements
  • Setting up Apollo Client and making our first query
  • Querying posts from the frontend using GraphQL
  • Resolving author usernames in a single query
  • Using variables in GraphQL queries
  • Using fragments to reuse parts of queries
  • Using mutations on the frontend
  • Migrating login to GraphQL
  • Migrating create post to GraphQL
  • Summary
  • Part 4: Exploring an Event-Based Full-Stack Architecture
  • Chapter 13: Building an Event-Based Backend Using Express and Socket.IO
  • Technical requirements
  • What are event-based applications?
  • What are WebSockets?
  • What is Socket.IO?
  • Connecting to Socket.IO
  • Emitting and receiving events
  • Setting up Socket.IO
  • Setting up a simple Socket.IO client
  • Creating a backend for a chat app using Socket.IO
  • Emitting events to send chat messages from the client to the server
  • Broadcasting chat messages from the server to all clients
  • Joining rooms to send messages in
  • Using acknowledgments to get information about a user
  • Adding authentication by integrating JWT with Socket.IO
  • Summary
  • Chapter 14: Creating a Frontend to Consume and Send Events
  • Technical requirements
  • Integrating the Socket.IO client with React
  • Cleaning up the project
  • Creating a Socket.IO context
  • Hooking up the context and displaying the status
  • Disconnecting socket on logout
  • Implementing chat functionality
  • Implementing the chat components
  • Implementing a useChat hook
  • Implementing the ChatRoom component
  • Implementing chat commands with acknowledgments
  • Summary
  • Chapter 15: Adding Persistence to Socket.IO Using MongoDB.
  • Technical requirements.

Similar Items