React’s Eleven was born from a simple goal: to truly understand React by building something both technical and fun. Instead of grinding through tutorials, I flipped the formula: learn by teaching into embrace by storytelling.
Each React Hook is portrayed as a specialized operative in a fictional HQ. Components are field agents. Your mission? Learn how the real engine of React works, one hook at a time—through visuals, code, and interaction.
The project became a full-stack playground: React, Next.js, Tailwind CSS, mocked data, conditional rendering, performance tracking, and UI logic—all tied together in a gamified learning experience.
It’s part tutorial, part story, and 100% hands-on learning.
Built and designed by Maria Mudrakova — Software Engineer in training and storyteller at heart.
This project began with a strong emphasis on structure and clarity. Unlike past projects, I prioritized task breakdown and visual planning from the beginning. Using Notion for planning and GitHub Issues for workflow, I created a clear development path.
An interactive learning environment styled as a mission-based arcade, featuring React’s 11 core hooks as specialized HQ agents. Users can create field agents (components), assign missions, and witness how each hook performs under dynamic UI conditions.
Early milestones included designing folder structure, Tailwind config with custom fonts/colors, avatar sourcing, and setting up layout components. I also configured a creative license, access rules, and issue tracking early to ensure a secure, intentional project evolution.
While I initially kept up with tasks like layout and avatar selection, a personal break slowed things down. However, the detailed breakdown made it easier to get back on track. One thing I would improve is logging small daily notes or progress entries inside tasks to visualize momentum better.
Screenshots and console logs from setup, layout render, and initial UI examples will be added as interactive demos are implemented.
— Maria Mudrakova, July 2025