Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Modern Full-Stack React Projects

You're reading from   Modern Full-Stack React Projects Build, maintain, and deploy modern web apps using MongoDB, Express, React, and Node.js

Arrow left icon
Product type Paperback
Published in Jun 2024
Publisher Packt
ISBN-13 9781837637959
Length 506 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Daniel Bugl Daniel Bugl
Author Profile Icon Daniel Bugl
Daniel Bugl
Arrow right icon
View More author details
Toc

Table of Contents (28) Chapters Close

Preface 1. Part 1:Getting Started with Full-Stack Development
2. Chapter 1: Preparing for Full-Stack Development FREE CHAPTER 3. Chapter 2: Getting to Know Node.js and MongoDB 4. Part 2:Building and Deploying Our First Full-Stack Application with a REST API
5. Chapter 3: Implementing a Backend Using Express, Mongoose ODM, and Jest 6. Chapter 4: Integrating a Frontend Using React and TanStack Query 7. Chapter 5: Deploying the Application with Docker and CI/CD 8. Part 3:Practicing Development of Full-Stack Web Applications
9. Chapter 6: Adding Authentication with JWT 10. Chapter 7: Improving the Load Time Using Server-Side Rendering 11. Chapter 8: Making Sure Customers Find You with Search Engine Optimization 12. Chapter 9: Implementing End-to-End Tests Using Playwright 13. Chapter 10: Aggregating and Visualizing Statistics Using MongoDB and Victory 14. Chapter 11: Building a Backend with a GraphQL API 15. Chapter 12: Interfacing with GraphQL on the Frontend Using Apollo Client 16. Part 4:Exploring an Event-Based Full-Stack Architecture
17. Chapter 13: Building an Event-Based Backend Using Express and Socket.IO 18. Chapter 14: Creating a Frontend to Consume and Send Events 19. Chapter 15: Adding Persistence to Socket.IO Using MongoDB 20. Part 5:Advancing to Enterprise-Ready Full-Stack Applications
21. Chapter 16: Getting Started with Next.js 22. Chapter 17: Introducing React Server Components 23. Chapter 18: Advanced Next.js Concepts and Optimizations 24. Chapter 19: Deploying a Next.js App 25. Chapter 20: Diving Deeper into Full-Stack Development 26. Index 27. Other Books You May Enjoy

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.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image