Modern Full-Stack React Projects: Build, maintain, and deploy modern web apps using MongoDB, Express, React, and Node.js

Modern Full-Stack React Projects

Copyright © 2024 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Kushal Dave

Book Project Manager: Aishwarya Mohan

Senior Editor: Rakhi Patel

Technical Editor: K Bimala Singha

Copy Editor: Safis Editing

Indexer: Pratik Shirodkar

Production Designer: Prashant Ghare

DevRel Marketing Coordinators: Anamika Singh and Nivedita Pandey

First published: June 2024

Production reference: 1090524

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK

ISBN 978-1-83763-795-9

www.packtpub.com

To my family and friends, for supporting me during the creation of this book.

To my parents, who have supported me throughout my whole life.

To my co-founder, Georg Schelkshorn, and my business partner, Matthias Zronek, who always challenge me and continually inspire my growth. Thank you for taking care of business while I was writing this book.

To my amazing girlfriend, Junxian Wang, for improving my life in many ways, for making me more productive, and for always taking care of me. I love you so much.

Without all of you, this book would not have been possible.

– Daniel Bugl

Contributors

About the author

Daniel Bugl is a full-stack developer, product designer, and entrepreneur focusing on web technologies. He has a Bachelor of Science degree in business informatics and information systems and a Master of Science degree in data science from the Vienna University of Technology (TU Wien). He is a contributor to many open source projects and a member of the React community. He also founded and runs his own hardware/software start-up, TouchLay, which helps other companies present their products and services. At his company, he constantly works with web technologies, particularly making use of React and Next.js. In the past couple of years, he has, together with Georg Schelkshorn and Matthias Zronek, worked as a technical advisor and full-stack developer for large enterprises and the public sector, among other things working on citizen services for the Austrian government.

I want to thank the people involved in the production of this book; my co-founder, Georg Schelkshorn; my business partner, Matthias Zronek; my family and friends; and my girlfriend, Junxian Wang.

About the reviewers

Matthias Zronek is a senior software engineer and technical advisor with more than 20 years of professional experience. He loves coding and is passionate about every new programming language he learns. His current focus is on the development of full-stack web frameworks to enable frontend teams to create scalable and sustainable web applications using React and TypeScript. In his free time, he writes highly optimized applications for PC benchmarking in C++ or tries to reverse-engineer interesting binaries. If he is not in front of a (disassembled) computer, he spends time with his loving wife, their newborn son, and their fascinatingly weird cat.

Georg Schelkshorn is a full-stack React enthusiast with excitement for DevOps and crafting user-friendly interfaces. Alongside Daniel Bugl, he co-manages TouchLay, a company specializing in interactive hardware and software solutions as well as advising enterprises on successfully implementing modern web projects. Through many challenging projects, he has gained deep knowledge of what makes a full-stack React project work at scale. Georg loves diving into new areas of learning and hopes you’ll enjoy exploring this book’s learning journey.

Kirill Ezhemenskii is a visionary CTO who leads a healthcare company with cutting-edge software solutions. He is a master of functional programming and a guru of modern web and mobile development. He leverages the power of React, Next.js, GraphQL, and TypeScript to create stunning and performant applications that run on any platform. He is also a generous mentor who shares his expertise and passion for React Native with aspiring developers.

Foreword

I met Daniel for the first time 14 years ago. He is a close friend of my wife’s family, so he was often invited to family gatherings. Back then, Daniel was already a bright young mind with a curiosity for everything. One day, he excitedly asked me to visit his lab – simply a room in the family’s basement back then – to show me his latest project. Together with my wife’s cousin, he had built a touch table out of a wooden box. It was an early prototype, but already fully functional. Daniel was only 13 years old at that time. The years passed and I saw him diving into web development, creating a successful business and adopting React as early as 2015.

Today, Daniel is the same age as I was back then and I am honored to review his third book. I have also been very fortunate to work closely with Daniel for the past five years on corporate React projects. This book reflects his well-structured approach to the challenges of enterprise web applications. He carefully extracts the essence of complex concepts and presents them so clearly, that even the most difficult chapters in this book will feel manageable. The provided source code prevents you from getting sidetracked by unnecessary details.

Daniel starts your journey by handing you the basic tools you need to create a modern full-stack React project from scratch. Every step is guided and thoroughly explained. Later on, as chapters get more and more challenging, the focus will shift away from the basics, giving your newly learned skills the chance to fill the gaps. That’s why it is important to work through the basics as well, so you can focus on the advanced topic at hand.

Five years ago, I was where you, the reader, are right now. I was eager to learn full-stack React but didn’t know where to start. I had the chance to learn from Daniel directly. With this book, you finally have that chance as well.

Matthias Zronek Senior Software Engineer and Technical Advisor

Table of Contents

Preface

Part 1: Getting Started withFull-Stack Development

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15

Adding Persistence to Socket.IO Using MongoDB

Technical requirements

Storing and replaying messages using MongoDB

Creating the Mongoose schema

Creating the service functions

Storing and replaying messages

Visually distinguishing replayed messages

Refactoring the app to be more extensible

Defining service functions

Refactoring the Socket.IO server to use the service functions

Refactoring the client-side code

Implementing commands to join and switch rooms

Summary

Part 5: Advancing to Enterprise-Ready Full-Stack Applications

16

Getting Started with Next.js

Technical requirements

What is Next.js?

Setting up Next.js

Introducing the App Router

Defining the folder structure

Creating static components and pages

Defining components

Defining pages

Adding links between pages

Summary

17

Introducing React Server Components

Technical requirements

What are RSCs?

Adding a data layer to our Next.js app

Setting up the database connection

Creating the database models

Defining data layer functions

Using RSCs to fetch data from the database

Fetching a list of posts

Fetching a single post

Using Server Actions to sign up, log in, and create new posts

Implementing the signup page

Implementing the login page and JWT handling

Checking if the user is logged in

Implementing logout

Implementing post creation

Summary

18

Advanced Next.js Concepts and Optimizations

Technical requirements

Defining API routes in Next.js

Creating an API route for listing blog posts

Caching in Next.js

Exploring static rendering in API routes

Making the route dynamic

Caching functions in the data layer

Revalidating the cache via Server Actions

Revalidating the cache via a Webhook

Revalidating the cache periodically

Opting out of caching

SEO with Next.js

Adding dynamic titles and meta tags

Creating a robots.txt file

Creating meaningful URLs (slugs)

Creating a sitemap

Optimized image and font loading in Next.js

The Font component

The Image component

Summary

19

Deploying a Next.js App

Technical requirements

Deploying a Next.js app with Vercel

Setting environment variables in Vercel

Creating a custom deployment setup for Next.js apps

Summary

20

Diving Deeper into Full-Stack Development

Overview of other full-stack frameworks

Next.js

Remix

Gatsby

Overview of UI libraries

Material UI (MUI)

Tailwind CSS

React Aria

NextUI

Overview of advanced state management solutions

Recoil

Jotai

Redux

MobX

xstate

Zustand

Pointers on maintaining large-scale projects

Using TypeScript

Setting up a Monorepo

Optimizing the bundle size

Summary

Index

Other Books You May Enjoy

Preface

Hi there – I am Daniel, an entrepreneur, technical advisor, and full-stack developer with a focus on technologies in the React ecosystem.

In my time as a technical advisor and developer for enterprises and the public sector, I have noticed that more and more companies look to reduce the gap between frontend and backend developers. Their business requirements often result in the need for a so-called backend for frontend, where data is fetched from different backend systems and prepared in a way that can be easily displayed in the frontend.

As an entrepreneur, I also have experience with starting new projects with smaller teams, where it is essential that every developer on your team can do everything, not just the frontend or the backend. In such cases, it often makes sense to develop the backend and frontend in the same language, which is often JavaScript (or TypeScript), because there is a big ecosystem and a large number of developers available.

In both cases, becoming a full-stack developer is getting increasingly more important. I have been coaching developers to learn more about full-stack development for a long time and have noticed that there are common issues and misunderstandings that most developers encounter when learning full-stack development. In this book, I want to summarize all my learnings and teachings about full-stack development, giving you pointers on where and how to learn more about the ever-growing ecosystem of full-stack development in JavaScript.

Nowadays, many companies use a stack consisting of MongoDB, Express, React, and Node.js, called the MERN stack. In this book, I will teach you how to build modern full-stack React applications by using these technologies. I will teach these technologies from the ground up, using as few libraries as possible, so that you can learn the essential concepts. This will allow you to adapt to new technologies for years to come, even when the specific tools used in this book become outdated. Additionally, I will teach about the deployment of apps and DevOps, as I found that this sector is often neglected and there are not enough developers who know about it. In the last part of the book, I will introduce Next.js as a full-stack framework and give an outlook on new developments in this sector, such as React Server Components and Server Actions.

I hope you enjoy reading this book. If you have any questions or feedback, feel free to reach out to me!

Who this book is for

This book is for developers who already have experience with React and want to learn how to create, integrate, and deploy various backend systems to become a full-stack developer. You should already have a good understanding of JavaScript and React, but do not need to have any prior knowledge of the development, creation, integration, and deployment of backend systems. If you face one of the following challenges, this book will be perfect for you:

You know how to make a frontend with React but have no idea how to properly integrate it with a backend

You want to create a full-stack project from scratch but do not know how to

You want to learn more about the deployment of apps and DevOps

You want to learn more about modern React development, such as React Server Components, Server Actions, and Next.js

This book will provide you with real-world projects and includes all the steps needed to become a full-stack developer, including but not limited to backend development, frontend development, testing (unit tests and end-to-end tests), and deployment.

What this book covers

Chapter 1

, Preparing for Full-stack Development, gives a brief overview of the contents of the book and teaches you how to set up a project that will be used as a basis for the development of your full-stack projects.

Chapter 2

, Getting to Know Node.js and MongoDB, provides information on how to write and run scripts with Node.js. Then, it explains how to use Docker to set up a database service. It also introduces MongoDB, a document database, and how to access the MongoDB database via Node.js.

Chapter 3

, Implementing a Backend Using Express, puts into practice what you learned in Chapter 2

by creating a backend service. Express is used to provide a REST API, Mongoose ODM to interface with MongoDB, and Jest to write unit tests for the backend code.

Chapter 4

, Integrating a Frontend Using React and TanStack Query, provides instructions on how to create a frontend that interfaces with the previously created backend service. It uses Vite to set up a React project, in which we create a basic user interface. Then, it teaches you how to use TanStack Query, a data-fetching library, to handle backend state and integrate the backend API with the frontend.

Chapter 5

, Deploying the Application with Docker and CI/CD, deep-dives into DevOps by teaching you about Docker and how to package an app with it. Then, it provides instructions on how to deploy an app to a cloud provider and how to configure CI/CD to automate the deployment.

Chapter 6

, Adding Authentication with JWT, teaches you about JSON Web Tokens, a way to add authentication to web applications. It also provides instructions on how to set up multiple routes using React Router.

Chapter 7

, Improving the Load Time Using Server-Side Rendering, covers benchmarking an application and teaches you about Web Vitals. Then, it gives instructions on how to implement a way to render React components on a server from scratch and how to pre-fetch data on the server.

Chapter 8

, Making Sure Customers Find You with Search Engine Optimization, focuses on how to optimize an app to be found by search engines, such as Google or Bing. Additionally, it provides information on how to create meta tags for easier integration with various social media sites.

Chapter 9

, Implementing End-to-End Tests Using Playwright, introduces Playwright as a tool for writing end-to-end tests, which automatically performs actions in an app to find out whether your code still runs as designed after making changes. It also covers how to run Playwright in CI using GitHub Actions.

Chapter 10

, Aggregating and Visualizing Statistics Using MongoDB and Victory, provides instructions on how to collect events in an app. Then, it teaches you how to aggregate data with MongoDB to generate summary statistics, such as the number of views or session duration. Finally, it covers creating graphs to visualize those aggregated statistics using the Victory library.

Chapter 11

, Building a Backend with a GraphQL API, introduces GraphQL as an alternative to REST APIs, and you will learn when it is useful to use and how to implement it in a backend.

Chapter 12

, Interfacing with GraphQL on the Frontend Using Apollo Client, teaches you how to use Apollo Client on the frontend to interface with the previously implemented GraphQL backend.

Chapter 13

, Building an Event-Based Backend Using Express and Socket.IO, introduces an event-based architecture, which is useful for apps that deal with real-time data, such as collaborative applications (Google Docs or an online whiteboard) or financial applications (Kraken crypto exchange). It teaches you about WebSockets and how to use Socket.IO to implement an event-based backend.

Chapter 14

, Creating a Frontend to Consume and Send Events, implements a frontend for the previously created event-based backend and interfaces with it using Socket.IO.

Chapter 15

, Adding Persistence to Socket.IO Using MongoDB, teaches you how to properly integrate a database into an event-based app to persist (and later replay) events.

Chapter 16

, Getting Started with Next.js, introduces Next.js as an enterprise-ready full-stack web application framework for React. It highlights the differences between using a framework and a simple bundler such as Vite. It also teaches you about the Next.js App Router, a new paradigm for defining routes and pages.

Chapter 17

, Introducing React Server Components, teaches you about a new concept in React, Server Components, allowing you to directly integrate React apps with a database without needing a REST or GraphQL API. Additionally, it teaches you about Server Actions, which allow you to call functions on the server via the frontend.

Chapter 18

, Advanced Next.js Concepts and Optimizations, dives deeper into the Next.js framework, providing information on how caching works in Next.js and how it can be used to optimize applications. It also teaches you about defining API routes in Next.js and how to add metadata for search engine optimization. Lastly, it teaches you how to optimally load images and fonts in Next.js.

Chapter 19

, Deploying a Next.js App, teaches you two ways to deploy a Next.js app. The easiest way is using the Vercel platform, with which we can quickly get our app up and running. However, it also teaches you how to create a custom deployment setup using Docker.

Chapter 20

, Diving Deeper into Full-stack Development, briefly covers various advanced topics that have not been covered in this book yet. It starts with an overview of other full-stack frameworks and then summarizes concepts such as maintaining large-scale projects, optimizing the bundle size, an overview of UI libraries, and advanced state management solutions.

To get the most out of this book

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Modern-Full-Stack-React-Projects

. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/

. Check them out!

Code in Action

The Code in Action videos for this book can be viewed at https://packt.link/VINfo

.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: First, you need to create a robots.txt file to allow search engines whether they are allowed to crawl parts of your website, and which parts they are allowed to crawl.

A block of code is set as follows:

export const getPostById = async (postId) => {

  const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/posts/${postId}`)

  return await res.json()

}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

      {fullPost ? (

{title}

      ) : (                    

{title}

Any command-line input or output is written as follows:

$ npm install node-emoji

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: Connect to the database, then expand the Playgrounds section (if it is not expanded already) and click on the Create New Playground button.

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected]

and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata

and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected]

with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com

.

Share Your Thoughts

Once you’ve read Modern Full-Stack React Projects, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page

for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/978-1-83763-795-9

Submit your proof of purchase

That’s it! We’ll send your free PDF and other benefits to your email directly

Part 1:Getting Started with Full-Stack Development

In this part, you will learn how to set up a project and tools for full-stack development. You will also get to know and make the first steps with Node.js, Docker, and MongoDB. After this part, you will have a basic project setup that can be used for further projects developed throughout this book.

This part includes the following chapters:

Chapter 1

, Preparing For Full-Stack Development

Chapter 2

, Getting to Know Node.js and MongoDB

1

Preparing for Full-Stack Development

In this chapter, I am first going to give a brief overview of the contents of the book and explain why the skills taught in this book are important in a modern development environment. Then, we will jump into action and set up a project that will be used as a basis for the development of our full-stack projects. At the end of this chapter, you will have an integrated development environment (IDE) and project set up and ready for full-stack development and will understand which tools can be used for setting up such projects.

In this chapter, we are going to cover the following main topics:

Motivation to become a full-stack developer

What is new in the third edition?

Getting the most out of this book

Setting up the development environment

Technical requirements

This chapter will guide you through setting up all the necessary technologies needed for developing full-stack web applications throughout this book. Before we start, please install the following, if you do not already have them installed:

Node.js v20.10.0

Git v2.43.0

Visual Studio Code v1.84.2

Those versions are the ones used in the book. While installing a newer version should not be an issue, please note that certain steps might work differently on a newer version. If you are having an issue with the code and steps provided in this book, please try using the mentioned versions.

You can find the code for this chapter on GitHub: https://github.com/PacktPublishing/Modern-Full-Stack-React-Projects/tree/main/ch1

.

The CiA video for this chapter can be found at: https://youtu.be/dyf3nECvKAE

.

Important

If you cloned the full repository for the book, Husky may not find the .git directory when running npm install. In that case, just run git init in the root of the corresponding chapter folder.

Motivation to become a full-stack developer

Understanding full-stack development is becoming increasingly important, as companies seek to increase the cooperation – and reduce the gap – between the frontend and the backend. The frontend is becoming more deeply integrated with the backend, using technologies such as server-side rendering. Throughout this book, we are going to learn about the development, integration, testing, and deployment of full-stack projects.

What is new in this release of Full-Stack React Projects?

Unlike previous releases of Full-Stack React Projects, this new release focuses more on the integration of the frontend with the backend than the previous two editions, and thus intentionally does not focus so much on creating a user interface (UI) or using UI libraries, such as Material UI (MUI), on the frontend. This edition gives the essential knowledge for integrating and deploying full-stack web applications. The deployment of apps was missing completely from previous editions, and testing was only briefly introduced. This edition focuses more on these essential parts of full-stack development such that, after reading this book, you will be able to develop, integrate, test, and deploy a full-stack web application.

Getting the most out of this book

To keep the book short and to the point, we are going to use specific technologies and tools. The concepts, however, apply to