Full-Stack React, TypeScript, and Node Build scalable and cloud-ready web applications using modern React, TypeScript, and… (David Choi, Cihan Yakar)（Z-Library）

Page 1

(This page has no text content)

Page 2

Full-Stack React, TypeScript, and Node Second Edition Build scalable and cloud-ready web applications using modern React, TypeScript, and Docker David Choi Cihan Yakar

Page 3

Full-Stack React, TypeScript, and Node Second Edition Copyright © 2026 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 authors, 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. Portfolio Director: Ashwin Nair Relationship Lead: Bhavya Rao Project Manager: Parvathy Nair Content Engineer: Roshan Ravi Kumar Technical Editor: Arjun Varma Copy Editor: Roshan Ravi Kumar Indexer: Rekha Nair Proofreader: Roshan Ravi Kumar Production Designer: Shantanu Zagade Growth Lead: Anamika Singh First published: December 2020 Second edition: June 2026 Production reference: 1180626 Published by Packt Publishing Ltd. Grosvenor House 11 St Paul's Square Birmingham B3 1RB, UK. ISBN 978-1-80323-577-6 www.packtpub.com

Page 4

Contributors About the authors David Choi is a developer with over 14 years of experience building enterprise-class applications across a variety of frameworks and languages. His professional work has focused on the finance industry, with companies including JPMorgan, CSFB, and Franklin Templeton. He shares development content on YouTube through the David Choi channel and on X as @jsoneaday. Cihan Yakar is a full-stack developer with over 20 years of experience building web and enterprise applications, with a primary focus on .NET and strong expertise in TypeScript, React, and Node.js. A three-time Microsoft Most Valuable Professional (MVP), he is a regular speaker at both international and local conferences on .NET, React, and AI.

Page 5

About the reviewers Daniel Irvine is a freelance software developer based in London, UK. He is the author of Mastering React Test-Driven Development (Packt), Svelte with Test-Driven Development (Packt), and Build Your Own Test Framework (Apress). He specializes in simplifying complex codebases. Andrew Baisden is a full-stack software engineer specializing in TypeScript, React, and Node.js, with a focus on modern web architecture and scalable application design. He builds production-grade applications using frameworks such as Next.js and Vite and has experience with PostgreSQL, Prisma, and cloud deployment platforms, including AWS and Vercel. Andrew works extensively with testing tools such as Vitest and Playwright and is passionate about developer experience, clean architecture, and modern AI-driven tooling.

Page 6

Table of Contents Preface xix Free benefits with your book ............................................................................. xxv Chapter 1: Understanding TypeScript 1 Technical requirements ........................................................................................ 2 What is TypeScript? .............................................................................................. 2 Why is TypeScript necessary? ............................................................................... 3 Dynamic versus static typing • 6 Object-oriented programming ............................................................................. 12 Encapsulation • 13 Abstraction • 15 Inheritance • 17 Polymorphism • 19 Summary ........................................................................................................... 20 Chapter 2: Exploring TypeScript 21 Technical requirements ....................................................................................... 21 What are types? .................................................................................................. 22 How do types work? • 22 Exploring TypeScript types ................................................................................. 25 The any type • 25 The unknown type • 25 Intersection and union types • 29 Literal types • 31 Type aliases • 32 Function return types • 33 Functions as types • 34

Page 7

The never type • 35 Understanding classes and interfaces .................................................................. 36 Classes • 36 Access modifiers • 38 TypeScript configuration • 40 Getters and setters • 43 Static properties and methods • 46 Interfaces • 48 Understanding inheritance .................................................................................. 51 Abstract classes • 55 Interface inheritance • 57 Understanding polymorphism ............................................................................ 60 Learning generics ............................................................................................... 62 Utility types ....................................................................................................... 65 ReturnType • 66 Pick • 67 Omit • 69 Summary ........................................................................................................... 69 Chapter 3: Building Better Apps with ES6+ Features 71 Technical requirements ...................................................................................... 72 Learning about ES6 variable declaration and JavaScript scoping .......................... 72 Learning about arrow functions • 75 Understanding the this keyword • 75 Arrow function syntax and body styles • 79 Understanding JavaScript equality ...................................................................... 80 Spread, Object.assign, and Array.concat • 85 Destructuring • 88 Rest • 89 Optional chaining • 90 Nullish coalescing and logical OR • 92 Learning array functions .................................................................................... 93 Table of Contents vi

Page 8

find function • 93 filter function • 94 map function • 95 Reduce function • 96 Some and every • 97 Learning about async/await ............................................................................... 98 Learning about ES6 modules ............................................................................ 104 Summary ......................................................................................................... 106 Chapter 4: Learning Single Page Application Concepts with React 109 Technical requirements .................................................................................... 109 Understanding the classic server-rendered model ............................................. 109 Understanding SPA benefits and attributes ......................................................... 111 Understanding how React helps build SPAs ........................................................ 112 Attributes of a React application ........................................................................ 113 Summary .......................................................................................................... 123 Chapter 5: React Development with Hooks 125 Technical requirements ..................................................................................... 125 Learning React functional components .............................................................. 126 Learning React Hooks ........................................................................................ 129 Suspense and use • 137 UseDeferredValue and useTransition hooks • 141 Forms and hooks • 152 React compiler .................................................................................................. 164 Summary .......................................................................................................... 166 Chapter 6: Learning Redux, Context, and React Router 169 Technical requirements ..................................................................................... 169 Learning Redux ................................................................................................. 170 Reducers and actions • 171 Context • 181 vii Table of Contents

Page 9

Learning React Router ...................................................................................... 186 Summary .......................................................................................................... 199 Chapter 7: Testing with Vitest and React Testing Library 201 Technical requirements .................................................................................... 201 Understanding React client-side testing ............................................................ 203 React Testing Library • 211 Learning mocking ............................................................................................. 214 Chrome debugger ............................................................................................. 236 Summary ......................................................................................................... 240 Chapter 8: Understanding Node.js 243 Technical requirements .................................................................................... 243 Understanding Node ........................................................................................ 243 V8 engine • 246 Native modules • 246 Libuv and the event loop • 247 Learning Node's capabilities ............................................................................. 250 Installing Node • 250 Creating a simple Node server • 255 Request and Response • 257 Request URL • 257 Request object • 258 Response object • 258 Status code • 258 Headers • 259 Routing • 260 Learning debugging • 263 Summary ......................................................................................................... 272 Chapter 9: Learning Express 273 Technical requirements ..................................................................................... 273 Table of Contents viii

Page 10

Understanding how Express improves Node development .................................. 273 Learning Express capabilities ............................................................................. 275 Creating a Web API with Express ....................................................................... 282 Testing Node .................................................................................................... 285 Supertest ......................................................................................................... 293 Summary ......................................................................................................... 300 Chapter 10: Database and Persistence with PostgreSQL + Prisma 301 Technical requirements .................................................................................... 302 Understanding databases and why they matter ................................................. 302 Understanding the persistence problem • 302 What is a relational database? • 303 What is an ORM and why use one? • 304 Learning PostgreSQL ........................................................................................ 305 PostgreSQL data types and features • 306 Installing PostgreSQL • 307 A quick taste of SQL • 308 Understanding Prisma ORM .............................................................................. 310 What is Prisma? • 310 Prisma 7 architecture • 310 How Prisma fits into our stack • 312 Setting up our project ........................................................................................ 314 The starting point • 314 Initializing Prisma • 318 Creating prisma.config.ts (new in Prisma 7) • 319 Designing a data model with Prisma Schema .................................................... 320 Anatomy of a Prisma Schema file • 320 Building the user model • 321 Running our first migration • 322 Adding the Post model (one-to-many) • 323 Adding Profile and Category models • 325 Alternative: UUIDv7 as a primary key • 328 ix Table of Contents

Page 11

Working with migrations ................................................................................. 328 What are migrations? • 329 Making schema changes • 329 Key migration commands • 330 Customizing migrations • 330 Performing CRUD operations with Prisma Client ............................................... 331 Setting up Prisma Client with instance caching • 331 Updating the Express Server • 332 Building the user routes with Prisma • 333 Building the POST routes • 336 Adding relation-aware user routes • 340 Adding category support to posts • 343 Understanding relations and advanced queries ................................................. 345 Advanced filtering • 345 Learning transactions and error handling ......................................................... 347 Building an error-handling middleware • 348 Sequential transactions • 352 Interactive transactions • 353 Database seeding • 355 Raw SQL and TypedSQL • 357 Testing database code ....................................................................................... 359 Testing strategy • 359 Setting up the test infrastructure • 359 Unit tests with mocked Prisma • 361 Integration tests with a real database • 362 Summary ......................................................................................................... 364 Chapter 11: Authentication and Authorization 367 Technical requirements .................................................................................... 367 Understanding authentication and authorization ............................................. 368 Security gap in our API • 368 Authentication versus authorization • 368 Table of Contents x

Page 12

Common authentication approaches • 370 Learning how JWT tokens work ......................................................................... 372 Structure of a JWT • 372 How verification works • 375 Access tokens and refresh tokens • 375 Why jose instead of jsonwebtoken? • 376 Securing passwords with Argon2 ....................................................................... 377 Why hash passwords? • 377 Why Argon2 over bcrypt? • 378 Using Argon2 in practice • 379 Password validation rules • 380 Updating our data model for authentication ..................................................... 383 Adding password and role to the User model • 383 The RefreshToken model • 384 Prisma global omit for password • 384 Running the migration • 386 Building registration and login endpoints ......................................................... 386 Token utility functions • 387 The auth service • 388 The auth routes • 391 Handling duplicate emails • 392 Protecting routes with authentication middleware ........................................... 393 Extending the Express Request type • 393 The authenticate middleware • 393 Applying the middleware • 395 Protecting ownership • 395 Implementing role-based access control ........................................................... 396 The authorization middleware • 396 Applying role-based rules • 396 Managing token refresh and logout ................................................................... 398 Setting up cookies • 398 The refresh endpoint • 398 xi Table of Contents

Page 13

The logout endpoint • 401 Log out all sessions • 401 Cleaning up expired tokens • 402 Hardening security ........................................................................................... 403 Helmet for security headers • 403 Rate limiting • 404 Token storage strategies • 405 SameSite cookies and why they are not enough • 407 The complete middleware stack • 407 Additional security notes • 408 Testing authentication flows ............................................................................ 410 Test helpers • 410 Unit tests for the auth service • 411 Integration tests for auth endpoints • 412 Summary .......................................................................................................... 414 Chapter 12: Building the Full-Stack Application 417 Technical requirements .................................................................................... 418 Connecting the frontend to the backend ........................................................... 418 The CORS error • 419 Configuring CORS on the backend • 420 The Vite development proxy • 420 Environment variables • 421 Building a type-safe API client ........................................................................... 421 The base client • 422 Token management in memory • 424 Typed endpoint functions • 425 Managing authentication state with Redux ....................................................... 427 The auth slice • 427 Async thunks • 428 The slice reducers • 429 Store configuration • 431 Table of Contents xii

Page 14

Routing and protected routes ............................................................................. 431 Route structure • 431 The ProtectedRoute component • 433 The AdminRoute component • 434 Redirect after login • 434 Building the UI components ............................................................................. 435 The login form • 436 The registration form • 437 The posts list • 438 Create post form • 439 Navigation with conditional rendering • 440 Handling token refresh and race conditions ....................................................... 441 The problem • 441 The solution • 442 Integration with the API client • 443 Optimistic updates and real-time feedback ....................................................... 443 Optimistic post deletion • 443 Error boundaries for API failures • 444 Testing the client .............................................................................................. 445 Unit testing the auth slice • 446 Component testing with React Testing Library • 447 Mocking the API layer • 449 Production considerations ................................................................................ 450 Building for production • 450 Environment configuration • 450 CORS for production • 450 Security checklist • 451 Deployment architecture • 451 Summary ......................................................................................................... 452 Chapter 13: Deploying Full-Stack Applications 455 Technical requirements .................................................................................... 456 xiii Table of Contents

Page 15

Understanding the production mindset ............................................................ 456 Development vs. production • 456 What does "deployment" actually involve? • 457 The modern deployment landscape • 458 Preparing our application for production .......................................................... 459 Environment configuration • 459 Health check endpoints • 461 Graceful shutdown • 462 Production logging • 464 Building for production • 466 Containerizing with Docker and Podman .......................................................... 468 What are containers and why use them? • 468 Docker vs. Podman • 469 Dockerizing the Express API • 470 Dockerizing the React frontend • 474 Debugging failed builds • 477 Essential container commands • 478 Orchestrating with Docker Compose ................................................................ 478 Running the stack • 481 Running Prisma migrations in Docker • 482 Development vs. production Compose files • 485 Automating with CI/CD (GitHub Actions) ......................................................... 486 GitHub Actions fundamentals • 486 Building our CI pipeline • 486 Branch protection • 490 Deploying to the Cloud ...................................................................................... 491 Choosing a platform • 491 Deploying to Railway • 492 Deploying to Render (alternative) • 493 Deploying with Docker to a VPS (advanced) • 493 Production database management .................................................................... 495 Running migrations in production • 495 Table of Contents xiv

Page 16

Connection pooling • 495 Backups • 496 Seeding production data • 496 Production security checklist ............................................................................ 497 Environment and secrets • 497 HTTP security headers • 497 Rate limiting • 497 CORS in production • 499 Putting security middleware together • 500 Dependency security • 501 Additional security considerations • 501 Scaling with Kubernetes and beyond ................................................................ 502 When Docker Compose is not enough • 502 Kubernetes core concepts • 503 From Docker Compose to Kubernetes • 503 When to use Kubernetes • 506 Infrastructure as Code (IaC) • 506 A glimpse of Microsoft Aspire • 508 Post-Deployment operations ............................................................................ 509 Common production issues • 509 Updating your deployed application • 510 Cost awareness • 511 Summary .......................................................................................................... 513 Chapter 14: Monitoring and Observability 515 Technical requirements ..................................................................................... 516 Understanding Monitoring vs. Observability ...................................................... 516 Monitoring • 516 Observability • 516 The three pillars of Observability ....................................................................... 517 Logs • 517 Metrics: how much and how fast? • 519 xv Table of Contents

Page 17

Traces • 519 The power of correlation • 520 Introducing OpenTelemetry ............................................................................. 520 What is OpenTelemetry? • 520 How OTel works • 521 The OTel ecosystem for Node.js • 521 Adding OpenTelemetry to our project ................................................................ 523 Installing the packages • 523 Creating the instrumentation file • 523 Loading instrumentation before the application runs • 526 Adding the observability stack to Docker Compose • 528 Exploring Traces in Grafana .............................................................................. 530 Finding your first trace • 530 Reading the Trace Waterfall • 531 Spotting a bottleneck with fault injection • 532 Trace context across services • 533 Production considerations ................................................................................ 534 Sampling: do not trace everything • 534 Filtering noise at the Collector level • 536 Performance overhead • 536 Running the Collector separately • 537 Choosing a backend for production • 537 Frontend observability • 538 Adding a custom span • 539 Checking basic metrics • 540 Setting up alerts in Grafana • 541 Verifying the setup • 542 Summary ......................................................................................................... 544 Chapter 15: AI-Assisted Development with LLM Coding Agents 547 Technical requirements .................................................................................... 548 The AI-Assisted development landscape ............................................................ 548 Table of Contents xvi

Page 18

From autocomplete to autonomous agents • 548 Why Claude Code? • 549 Non-determinism, model choice, and stale knowledge • 550 Vibe coding vs. specification-driven development • 551 Setting up Claude Code for a Full-Stack project .................................................. 551 Installing and initializing • 551 Writing an effective CLAUDE.md • 552 Configuring MCP servers • 553 Setting up hooks for code quality • 554 The Specification-First workflow ....................................................................... 555 Why specification matters more than prompting tricks • 555 Writing the project specifications • 556 Breaking the project into prompt sequences • 557 The review-and-test checkpoint • 558 Plan mode and course corrections • 558 Rebuilding the backend foundation .................................................................. 559 Quick review: what we built in Chapters 8–10 • 559 Prompt 1: Research current versions • 559 Prompt 2: Project scaffolding • 560 Prompt 3: Routes and middleware • 561 Prompt 4: Prisma setup and data models • 562 Prompt 5: Advanced queries, seeding, and TypedSQL • 564 When the AI gets it wrong • 565 Rebuilding authentication ................................................................................ 565 Quick review: what we built in Chapter 11 • 565 Prompt 6: Auth infrastructure • 566 Prompt 7: Auth routes and middleware • 567 The critical review checkpoint • 568 Rebuilding the Frontend ................................................................................... 569 Quick review: what we built in Chapter 12 • 569 Prompt 8: Frontend scaffolding and API client • 570 Prompt 9: UI components and routing • 571 xvii Table of Contents

Page 19

Multi-file changes and context management • 572 Production readiness ......................................................................................... 573 Quick review: what we built in Chapters 13 and 14 • 573 Prompt 10: Containerization • 573 Prompt 11: CI/CD and health checks • 574 Prompt 12: OpenTelemetry instrumentation • 575 Prompt 13: Review and refactor • 577 Advanced Caude Code patterns .......................................................................... 577 Skills and plugins • 577 Hooks for automated quality gates • 577 Multi-agent orchestration • 578 Agent SDK • 578 Lessons learned: where AI shines and where it falls short .................................. 579 The security review checklist • 580 The specification is your most important artifact • 581 Summary .......................................................................................................... 581 Chapter 16: Unlock Your Exclusive Benefits 583 Unlock this Book's Free Benefits in 3 Easy Steps ................................................. 584 Other Books You May Enjoy 588 Index 591 Table of Contents xviii

Page 20

Preface When you set out to build a web application, the number of choices in front of you is almost endless. Which one/stack is the best? There is no honest answer to a question that broad. Pick almost any single quality you care about—faster, smaller, easier to pick up—and you can find something that beats React on that one axis without looking very hard. What React gets right is balance. If you already know JavaScript and HTML, getting started is not a big leap. Used correctly, its performance is more than satisfying and showing you what "used correctly" actually means is one of the things this book sets out to do. There is no shortage of examples to learn from either: open-source projects, libraries, articles, and videos covering almost anything you might want to build. The rest of the stack is chosen the same way. The backend, the database, the smaller tools you reach along the way—each one earns its place by how well it balances what it gives you against the effort it asks for. PostgreSQL is here for exactly that reason, not because it wins every benchmark. Your own projects will have their own constraints, and where a different tool would suit you better, I try to point you toward it instead of pretending the choice in these pages is the only one. The book moves the way a real project does. We start small and keep building, one layer on top of the last, until what began as a few lines of TypeScript becomes a full application you can deploy. The final chapter steps back and looks at where this is all going. By then you will have built the whole thing yourself, and that is the point. Once you understand how the pieces fit together, you can work alongside an AI coding agent and stay in charge of it, instead of handing it a problem you could not have solved on your own.