React Summit 2025

In this workshop, we'll go beyond the fundamentals and explore some of the more powerful features React Query has to offer. You'll gain a deeper understanding of how it works under the hood and learn how to write scalable, maintainable React Query code.Together, we'll build a simple example app and incrementally enhance it with one core objective in mind: delivering the best possible user experience. That means snappy interactions, minimal layout shifts, and avoiding unnecessary loading spinners wherever we can.To achieve this, we'll dive into advanced techniques like various forms of prefetching (including integration with route loaders), seeding the query cache, crafting smooth paginated experiences, and even persisting query state through full page reloads using persistence plugins.
Note: You should have prior knowledge about React Query if you attend this workshop.

Test and trust your React app by combining Playwright’s powerful browser automation with modern synthetic monitoring. In this hands-on workshop, you’ll learn how to write real user flow tests with Playwright, run them locally, and then scale them into production-ready monitoring with Checkly.We’ll start with a quick tour of synthetic vs. real user monitoring, then dive into testing key interactions in your app, from page loads to forms and navigation. You’ll learn how to use Playwright’s core features to create reliable end-to-end tests.Next, we’ll show you how to turn those local tests into live monitors. You’ll deploy your tests as synthetic monitors, view test runs, and debug failures with rich observability data, like screenshots and traces.Table of contents:Intro: Synthetic vs RUM, Testing vs MonitoringSetup to run app locallyWrite Playwright tests on the appPlaywright core features Run testsConvert Playwright tests into synthetic monitorsConcepts of Monitoring as CodeObservability: debug with Traces, Logs & ScreenshotsClosing the loop with alerts and notification channels considerationsWorkshop level: developers comfortable with React and CLI tools.

Tests first, code last!How to develop your frontend that the code isn't falling apart? How to make it scary free to deliver your work results? How to battle bugs that are chasing you at every step you make?I am going to answer these questions during the workshop and show how to follow TDD at React applications.To showcase the approach I am going to use Cypress, React, MobX, and even Dev Containers. These tools can be replaced by others that are in use in your projects today. Here and now tooling is not so important.In spite of the title the workshop is going to be useful not only for frontend developers. You can benefit from it even working in a different area of development because the key here is a mindset of how to make reliable applications through testing.

Node-based user interfaces offer an intuitive and powerful way to represent complex data flows and processes. In this interactive 3-hour workshop, you’ll learn how to create engaging diagram UIs using React and the popular React Flow library. We’ll start by exploring key libraries for creating custom diagram UIs, comparing their strengths, differences, and most effective use cases. Focusing on React Flow, we’ll then build a workflow application together, introducing features such as custom nodes and edges, drag-and-drop functionality, state management, minimap and zoom controls, auto- layout, and property-editing sidebar. You’ll discover how to leverage open-source UI components designed for diagramming to enhance visual appeal and learn how to extend diagrams with custom functionality. We’ll also look at existing tools and products that can streamline your development process – so you can concentrate on implementing your business logic efficiently. By the end of this workshop, you’ll know how to unlock the potential of node-based UIs in React, enabling you to create rich, interactive applications tailored precisely to your project’s needs.Workshop Agenda:Introduction to Diagram LibrariesBuilding a Workflow Application with React FlowImplementing Advanced Interaction and Usability FeaturesEnhancing the User ExperienceExtending and Scaling Your Node-based UIPlease note that this workshop assumes a comfortable working knowledge of React, so we can focus on building advanced features right from the start.

You just shipped a new feature. Tests passed. CI’s green. Everything’s deployed. Life’s good… until the alerts start rolling in. Users reporting “weird stuff happening”, UI glitches, vague “it seems slow” reports, and that dreaded “can’t login” message. Well, this is shaping up to be a bad day. But… maybe not.Watch this hands-on session to learn how to build it, break it, debug it, and go from “no idea what’s wrong” to fixing issues—all in one go. Since we’re serious developers (obviously), we’ll use Next.js and:Setup Sentry from the ground up - including Errors, Session Replay, and TracingLearn ways to use Replays to understand the real user experience, and how to use Tracing to debug application issuesLeverage Sentry AI and the context of your application to understand what’s actually broken, and use Autofix to generate a fix - from root cause all the way to PR.Use this workshop guide to follow along: Quickstart Guide.

React and its ecosystem grows every year. New tools, new patterns, new concepts. This workshop covers the latest trends in the React development world. If you feel that you know how to use it but there is something more you could learn, this workshop is for you. We'll be going through the fundamentals, composition patterns, state management, styling workflows, routing, server-side rendering and components.

In the past few years, there have been a large number of generative AI use cases and adoption has grown increasingly. A large number of web and JS applications now leverage large language models (LLMs), vector search / RAG (Retrieval Augmented Generation) for building better user experiences. Now the tide is shifting, and we have entered the era of AI agents. This is a promising field which combines the different generative AI usecases and helps to simplify the process of interacting with Gen AI by essentially making agents act like humans and makes interactions feel more human like to solve problems in an automated fashion.In this workshop, while we give a quick over view of LLMs, RAG, we will dive deeper into concepts of AI Agents such has how one can leverage LLMs for specific tasks. How can we include tool calling / function calling in AI Agents. Thus showing how an AI Agent is a system that is capable of independently deciding which functions or data sources to used to efficiently execute users' orders.We will show how to develop an AI agent that runs purely on the browser vs running them using cloud.  This workshop is for javaScript developers, AI enthusiasts, and tech innovators who want to integrate the use of AI within web applications to create intelligent and interactive app experiences.
Table of contents:  1. Intro to the general landscape of LLMs, RAG2. What are AI Agents3. Core components of AI Agents4. How to build your first AI Agent with JavaScript5. Stack to build AI Agents in the browser with open source models

Malicious code is out to get you. Can you keep your app working as expected and hold on to your secrets? Come to this workshop and try!The entire workshop will be delivered as bite-sized hands-on exercises where increasingly advanced threats are presented and you get to defend. 
No matter if you're concerned with malicious npm packages or building software to run other people's code, techniques presented in this workshop can be used to isolate JavaScript at runtime and protect against prototype poisoning.
We'll explore techniques allowing cooperation with packages that intend to steal your secrets and mess with built-in functionality of JavaScript via prototype-poisoning.Another part of the workshop will focus on using tools to isolate code and scale the defensive coding practice up for larger codebases.
If you're not dealing with security-critical code, it's a great opportunity to expand your awareness of rarely explored areas of JavaScript knowledge.

In this workshop I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own AI generated full stack app on your machine!Please, find the FAQ here

AG Grid and AG Charts are enterprise grid and chart libraries that are built for performance. In this workshop, you'll learn the basics of getting started with building feature-rich grids and charts in your React applications.
You'll discover:How quick you can build powerful grid and charting solutions in React:Rendering and editing cells in AG GridBuilding line, bar, and pie charts.In this 3 hours hands-on workshop you'll learn the powerful simplicity of using AG Grid and AG Charts in your apps. Let's be honest, grids and charts can be tough. Thankfully, AG Grid and AG Charts makes it easy. This workshop is helpful for those considering a grid to chart library, for developers, and for team leads.

Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.

Coding assistants are already changing the way we develop code, and in several years they are expected to completely change how developers interact with code and write it. In this workshop, I'll share tips and best practices on using such tools as we develop the production-ready app with Zencoder.

In this workshop we'll dive into the latest advancements in React and best practices for building modern React apps. We'll take a look at modern NextJS and React Router 7 Framework (aka Remix) along with React's new "React Server Components". We'll also talk about improving the data-fetching strategies of your SPAs along with options for migrating your SPA to modern React Router.

Unlock the Power of Modern Full-Stack Development in Half a Day!Ready to build lightning-fast, scalable web applications? Join our immersive 4-hour interactive workshop and dive headfirst into the world of Full-Stack Next.js 15!This isn't just another theory session. You'll roll up your sleeves and build a real-world movie comparison application from scratch, guided step-by-step by our expert instructor Maurice. We'll start by setting up your local development environment with a robust PostgreSQL database running in a Docker container. Then, you'll experience the magic of rapid UI generation using v0.dev, allowing you to create stunning interfaces with ease.But we won't stop at the front-end. You'll learn how to seamlessly integrate your UI with a powerful backend using Next.js 15's latest features and the elegant Prisma ORM to interact with your PostgreSQL database. Plus, you'll discover the best practices for handling client-side behavior with a fun, interactive movie comparison feature.Finally, we'll take your application live with continuous deployment to Vercel, showcasing how to effortlessly share your creations with the world. By the end of this workshop, you'll have a fully functional movie comparison app and the confidence to tackle your own full-stack projects using the cutting-edge Next.js 15 ecosystem.