Real-World React: The Architectural Crash Course for Scalability, Resilience, and Observability (feat. Next.js)
This hands-on workshop is a fast-paced walkthrough of what it really takes to build React apps that survive outside clean local environments. We won't dwell on pixel-perfect components; we'll dive into the hidden architecture patterns that support scalability, performance, and operational resilience when your code is in the wild, serving millions. Through light coding exercises and collaborative discussion, we'll explore how experienced teams think about failure recovery, observability, and maintaining delivery velocity without breaking everything. Most of the workshop is framework and library-agnostic, but we'll use React and Next.js as our common ground for communication and examples. This is not an exhaustive masterclass; it's a conversation starter and experience share to jumpstart your journey toward battle-tested software architecture.
What You'll Learn
Key takeaways from this workshop
Understand Atomic Design principles for long-term maintainable component architecture
Overview of React reconciliation and performance optimization techniques
Hands-on experience implementing software resilience patterns
Skills to build fault-tolerant systems with Error Boundaries and Suspense
Knowledge of DORA metrics and how to apply them to frontend development teams
Practical experience with Sentry for real-time error reporting and performance monitoring
Understanding of feature flags for safe rollouts and kill-switch capabilities
Framework-agnostic principles that apply beyond React to any frontend architecture
Workshop Agenda
A structured breakdown of what we'll cover
Getting to know each other, setup & rules of engagement
Share production war stories, discuss resilience concepts, and practice communication skills with interactive exercises
Quick fire exploration of different performance issues and real world case studies
Understand React, JSX, the Virtual DOM and reconciliation with a practical lens
Learn Atomic Design principles and how granular components improve reconciliation performance
Implement fault recognition strategies, Circuit Breaker patterns, and failure isolation techniques
Learn DORA metrics for high-performing teams"
Implement observability with Sentry, feature flags, and establish confidence in production deployments
Prerequisites
What you should know before attending
- Solid understanding of React fundamentals (hooks, components, state management)
- Experience with Next.js or similar React frameworks (helpful but not required)
- Basic knowledge of JavaScript ES6+ features and modern development practices
- Laptop with Node.js installed and stable internet connection
- Familiarity with Git and package managers (npm/yarn)
Technologies Covered
Tools and frameworks we'll work with
Upcoming Sessions
Catch this workshop at these events
Past Sessions
Where this workshop has been delivered
Ready to book this workshop?
Available for conferences, corporate training, and bootcamps. Let's discuss how to customize it for your audience.