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

Format:

Book

Author/Creator:

Bugl, Daniel, author.

Zronek, Matthias, author.

Language:

English

Subjects (All):

Application software--Development.

Application software.

Application program interfaces (Computer software).

Web applications.

Physical Description:

1 online resource (0 pages)

Edition:

First edition.

Place of Publication:

Birmingham, England : Packt Publishing, [2024]

System Details:

Mode of access: World Wide Web.

Biography/History:

Bugl Daniel: Daniel Bugl is a CEO, Software Architect and Full Stack Developer for his company TouchLay, developing a platform for interactive presentations. He also consults large multinational enterprises on the development and integration of React frontends with various backend systems, including the integration of legacy systems, and helps out with the setup and development of such projects. He has a bachelor's degree in business informatics and a master's degree in data science.

Summary:

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 integrated and maintained together Enhance your proficiency in building scalable and sustainable React projects Purchase of the print or Kindle book includes a free PDF eBook Book Description Understanding full-stack development is vital as companies aim to bridge the gap between frontend and backend development. Recent trends show deeper integration between the two, opening numerous possibilities for building real-world web applications, through server-side technologies like Node.js, Express, and MongoDB. Written by the author of Learning Redux and Learn React Hooks, and CEO of TouchLay, Modern Full-Stack React Projects will guide you through the entire process of advancing from a frontend developer to a full-stack developer. Starting with how to set up robust projects that can be maintained for a long time, you'll then progress toward developing a backend system and integrating it with the frontend. Throughout the book, you'll learn how to build, test, and deploy a blog application and a chat application. You'll also explore MongoDB, Express, React, Node.js (MERN) stack, best practices for frontend and backend development, different full-stack architectures, unit and end-to-end testing, and deployment of full-stack web applications. Once you get to grips with the essential concepts, you'll progress to learn how to use Next.js, an enterprise-grade full-stack web framework for React. By the end, you'll be well-versed in the MERN stack and all set to create performant and scalable full-stack web applications. What you will learn Implement a backend using Express and MongoDB, and unit-test it with Jest Deploy full-stack web apps using Docker, set up CI/CD and end-to-end tests using Playwright Add authentication using JSON Web Tokens (JWT) Create a GraphQL backend and integrate it with a frontend using Apollo Client Build a chat app based on event-driven architecture using Socket.IO Facilitate Search Engine Optimization (SEO) and implement server-side rendering Use Next.js, an enterprise-ready full-stack framework, with React Server Components and Server Actions Who this book is for This book is for frontend developers, JavaScript engineers, and React developers who possess a solid understanding of JavaScript and React concepts. Specifically designed for those with limited experience in the development, creation, integration, and deployment of backend and full-stack systems, this book will equip you with the necessary skills to create high-quality web applications.

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

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

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

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

Chapter 4: Integrating a Frontend Using React and TanStack Query

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

Chapter 5: Deploying the Application with Docker and CI/CD

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

Part 3: Practicing Development of Full-Stack Web Applications

Chapter 6: Adding Authentication with JWT

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

Chapter 7: Improving the Load Time Using Server-Side Rendering

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

Chapter 8: Making Sure Customers Find You with Search Engine Optimization

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

Chapter 9: Implementing End-to-End Tests Using Playwright

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

Chapter 10: Aggregating and Visualizing Statistics Using MongoDB and Victory

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

Chapter 11: Building a Backend with a GraphQL API

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

Chapter 12: Interfacing with GraphQL on the Frontend Using Apollo Client

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

Part 4: Exploring an Event-Based Full-Stack Architecture

Chapter 13: Building an Event-Based Backend Using Express and Socket.IO

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

Chapter 14: Creating a Frontend to Consume and Send Events

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

Chapter 15: Adding Persistence to Socket.IO Using MongoDB.

Technical requirements.

Notes:

Includes index.

Includes bibliographical references and index.

Description based on publisher supplied metadata and other sources.

Description based on print version record.

ISBN:

9781837632756

1837632758

OCLC:

1433270119