React and the Art of Gamification
summary
Live demo shows a finished quest app that streams server‑rendered UI with React 19 Server Components, scopes interactivity to a client “island” (Leaflet map on OpenStreetMap), and keeps score as server state.xp updated by a server action that calls Gemini AI for on‑the‑fly quests. The React Compiler auto‑memoizes frequent progress renders, marking completion with grant XP 50, router.refresh rereads truth, and the pattern maps to leaderboards, streaks, and DB‑backed achievements.
AI-written summary · about
chapters (12)
- 0:00Gamification with React
- 1:33From teaching to developer relations
- 3:20Why games captivate users
- 5:51Gamification mechanics
- 7:56Why gamify apps
- 9:43React for gamification
- 13:19Demo: quest map app
- 18:37Quest map app code
- 26:27GAME for UI design
- 30:39Duolingo’s strategies
- 33:05Six-step gamify playbook
- 35:20Closing and key takeaways
related talks
38mBuilding Isomorphic Web Applications with React
58mCrafting compelling real-time web experiences with GraphQL and React
25mReact For Game Development
54mReact Server Components: A New Way to Build Fast and Interactive Web Apps
45mReact Server Components: A New Way to Build Fast and Interactive Web Apps
32mAnd Now You Understand React Server Components
27mMaking Games With React and Redux
21mFetch Once, Render Everywhere: React Server Components in Expo Router