I've created an open-source interactive game for learning regular expressions a fun way

The code and the game

• 👾 The game - RegexpGarden
• 🤖 Repo

Why regular expressions matter?

As a web developer, I frequently use regular expressions in my work for complex refactoring tasks, such as changing the props of a specific component across the entire codebase or replacing one component with another throughout a project. When I started learning DevOps, I discovered that regular expressions were even more valuable. I consider regular expressions an essential tool for every programmer.

Inspiration

I have a passion for teaching. During my time as a student and after university, I worked as a chemistry tutor. I've always been inspired by the moment when someone finally grasps a concept they once thought was impossible to understand—it’s like seeing a spark of enlightenment ignite in their mind. Richard Feynman’s teaching talent, particularly his ability to explain complex ideas in simple terms, has deeply influenced me.

Later, when I transitioned to web development, I stumbled upon the fascinating project CSS Diner (if you haven’t seen it yet, be sure to check it out!🔥). My love for teaching and my appreciation of CSS Diner inspired me to create a similar project, but this time focused on learning regular expressions.

Technical details

I’ve always been a Vue developer at heart, but I was intrigued by the idea of learning React. For this project, I decided to build it using React and Next.js. As a Vue developer, I missed some of Vue's features in React, such as watch() and reactive(). To bridge the gap, I implemented a custom watch function as a React hook. Additionally, I used MobX to create reactive objects with methods, which felt natural to me coming from a Vue background.

I also discovered the ts-pattern library, which proved incredibly useful for implementing the Strategy pattern in frontend applications — whether in Vue or React.

Final words

I hope this project will be valuable to anyone interested in learning regular expressions. It’s open-source, so contributions from the community are more than welcome! Any feedback is welcome.