How a 17-Year-Old Product Designer on our Team, an AI Pair Programmer, and Good Questions Uncovered Software Engineering Wisdom.
What Happens When Youth, AI, and Mentorship Collide in the Enterprise.
Overview
At The Hackers Playbook, we conduct daily build sessions with our Product and Engineering team where we all sit together on a virtual meeting and build products. We pair program, have product discussions, learn software engineering, explore The Hacker Culture, or simply engage in friendly banter.
We were building an AI-powered product for one of our enterprise partners using AI Agents. During the process, we encountered a peculiar bug in the React application.
We cannot reveal the name of the AI Agent due to regulatory reasons.
The discussions and learnings derived while fixing the bug was one of our most high-value learning sessions, which we decided to document and share with the world.
On a side note; we’re an AI-first workforce, so it’s common for The Hackers Playbook members to sit alongside AI Agents and perform their daily tasks. Ironically, this post will be used to train our AI Agents. We hope writing it helps both humans and AI become smarter.
The Incident
A 17-year-old product designer, while working alongside an AI coding assistant, pushed an enterprise React build. Everything compiled smoothly until the useTheme hook caused a runtime crash.
A quick analysis of the stack trace revealed a conflict between the Theme Provider and the Sonner notification component.
Sonner is a UI component often used in React applications for displaying toast notifications—brief, informative messages or alerts—to users. It typically relies on a theme context to style these notifications consistently with the application's current theme (e.g., dark or light mode).
Root Cause in Plain English
A "mounting delay" within the Theme Provider aimed at handling client-side hydration, a common safeguard in SSR (Server Side Rendering) setups.
Sonner attempted to useTheme hook prematurely, causing a race condition. The useTheme hook requires the Theme Provider to be in a mounted state.
The result was a white-screen crash and an overwhelmed Junior Developer.
Hydration is like connecting the dots between two drawings. Imagine you first draw a picture using pencil (server-side rendering), then later you trace over it with a marker (client-side JavaScript). Hydration is the step when your JavaScript "traces over" the static HTML from the server, turning it into an interactive webpage. Without hydration, your webpage would look right but wouldn't respond to user interactions like clicking buttons or toggling themes.
Software Engineering Lessons
Issue: Timing problems due to hidden internal state (mounted) in Theme Provider.
Solution: Removed the delay and initialised the theme synchronously.
Lesson Learned: Keep context providers simple and predictable.Issue: Lack of fallback theme when context wasn’t ready caused component crashes.
Solution: Implemented a safe default theme within Sonner component.
Lesson Learned: Configuring correct defaults is essential for resilient UI.Issue: No protection against runtime crashes across the application.
Solution: Enclosed the app within an Error Boundary component.
Lesson Learned: Applications should always handle failures gracefully.
Vibe Coding ≠ Mindless Coding
"Vibe coding" is akin to jazz improvisation alongside an AI assistant.
To make it effective, you must:
Slow down interactions. Read every AI-generated explanation thoroughly.
Consistently ask "why?" and follow through. We explored the purpose of mounting delays, discovering concepts like FOIT (Flash Of Incorrect Theme) and nuances around SSR and Local Storage.
Continuously refactor; our developer didn’t simply patch the issue but truly grasped provider patterns.
Even during vibe coding, prioritize depth of knowledge and engineering excellence.
Prompt Engineering Power Moves
Context stuffing: Providing stack traces and component hierarchies enriched the AI’s reasoning capabilities.
Conversational nudging: Asking for explanations "like I’m 17" clarified complex concepts.
Alternative framing: Shifting the prompt from "solve" to "teach me" generated deeper insights; aligned with established HCI practices (Nielsen ’18).
Nielsen emphasized that the way we frame questions and interact with systems can significantly affect the depth and quality of insights we receive. By prompting the AI to "teach" instead of just "solve," we tap into a richer, more explanatory mode of communication—mirroring how effective human mentors foster understanding, not just answers.
About Jakob Nielsen: He is a renowned computer scientist and usability (HCI: Human-Computer Interaction) expert, often referred to as the "king of usability" worldwide. Nielsen's heuristics and research on usability have shaped how products and interfaces are designed for clarity and learnability.
Product Thinking in Debug Mode
Treating bugs as user-visible technical debt is essential. A malfunctioning theme toggle equals a compromised user experience.
We approached the solution as a mini product cycle: Product → Feature → Code:
Outcome: Prevent incorrect theme flashes.
Metric: Ensure theme load time is <50 ms, with zero uncaught startup errors.
Narrative: Reliable UI encourages user trust and retention.
Process-Oriented Culture
At The Hackers Playbook, we:
Document every AI interaction, building a searchable knowledge base.
Conduct "war-room mini-talks" like this one, creating immediate developer outreach materials.
Encourage mentorship by pairing juniors and seniors openly in discussions on our messaging app and virtual meetings to scale learning.
Explainable AI (XAI) in Practice
Instead of accepting "it just works," we clearly documented why removing the delay was safe:
SSR hydration timing considerations.
Patterns for accessing Local Storage in the browser.
Strategies for preventing FOIT (Flash Of Incorrect Theme).
FOIT (Flash Of Incorrect Theme) is when users briefly see the wrong visual theme (like a flash of a light theme before a dark theme correctly loads). It commonly occurs in apps with server-side rendering (SSR), because the server initially sends a default theme, and the browser later corrects it based on user preferences from local storage or cookies. Avoiding FOIT involves immediately applying themes synchronously, detecting user preferences as early as possible, and using sensible default themes to maintain a seamless and consistent user experience.
Product Engineering Tips Checklist
Immediately wrap theme-dependent components with providers.
Provide sensible defaults in hooks.
Utilize error boundaries combined with telemetry.
Apply themes synchronously; memoize only when necessary for performance.
Turn every complex bug into a teachable, community-engaging narrative.
If you’re a junior developer, embrace vibe coding, but annotate your thought processes.
If you're an experienced engineer, mentor transparently.
And if you love transforming bugs into educational stories, join us! 🚀
Let’s keep learning—together.