WorkshopsEngineering in production
Real-World React: Designing Frontend Architectures That Survive Production
Design React and Next.js systems that handle dependency failures, degrade gracefully, recover safely, and remain operable in production.
What we'll do
Most React workshops focus on building features. This one focuses on what happens when those features meet production.
Real applications depend on APIs that become slow or unavailable, data that goes stale, releases that fail, optional features that take down critical journeys, and errors that only appear under real traffic. This workshop explores how to design frontend systems that keep the user's task working when those failures happen.
Using React and Next.js as our shared reference point, we work through practical resilience patterns including timeouts and cancellation, retries with backoff and jitter, circuit breakers, failure isolation with error boundaries, graceful degradation, caching and revalidation, and strategies for distinguishing critical from optional dependencies.
We then connect those patterns to production delivery: feature flags, observability, controlled failure testing, safe rollouts, rollback decisions, and DORA metrics. The focus throughout is not just whether the application technically survives, but what the user experiences while parts of the system are failing or recovering.
The workshop combines architecture discussions with hands-on exercises built around realistic production scenarios. Most concepts apply beyond React and Next.js and are useful when designing any frontend that depends on distributed systems.
This is not an exhaustive masterclass. It is a practical framework for reasoning about production architecture, understanding tradeoffs, and building systems that can fail without taking the entire user experience with them.
You leave able to
- A practical framework for reasoning about frontend architecture under real production constraints
- Hands-on experience implementing circuit breakers and designing useful fallbacks
- An understanding of retry policies, exponential backoff, jitter and retry amplification
- Techniques for handling slow dependencies with deadlines, timeouts and cancellation
- Patterns for isolating failures with React error boundaries and graceful degradation
- A way to classify critical and optional data dependencies so partial failures do not unnecessarily break entire experiences
- Practical approaches to caching, revalidation, Suspense, dynamic imports and ISR as resilience tools
- Experience testing resilience by deliberately introducing latency, failures and degraded dependencies
- A model for safer releases using feature flags, observability, staged recovery and rollback decisions
- An understanding of how DORA metrics connect delivery velocity with production stability and recovery
Agenda
3-8 hours
- Introduction and workshop setup
- Warm up and production failure stories
- Performance and pragmatism discussion
- Real-world architecture explorations
- Software resilience patterns overview
- Circuit breakers, Exercise 01
- Retries, backoff and jitter
- Failure isolation and React error boundaries, Exercise 03
- Timeouts and cancellation, Exercise 02
- Query criticality and graceful degradation, Exercise 04
- Dynamic imports and optional features
- Suspense and loading fallbacks
- Caching and revalidation
- Incremental Static Regeneration
- Resilience libraries quick reference
- Testing resilience and controlled failures
- Safe releases, feature flags and observability
- DORA metrics and delivery performance
Prerequisites
- Solid understanding of React fundamentals, including components, hooks and state
- Familiarity with Next.js or another React framework is useful, but not required
- Comfortable with modern JavaScript or TypeScript development
- Laptop with Node.js 20 or newer installed
- pnpm 10.12.4, as pinned by the workshop repository
- Familiarity with Git and basic command-line workflows
Delivered at
“The kind of tactical knowledge that immediately changes how you write code.”
“This workshop's good, can recommend.”