DEV Community

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

Posted on

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

The code and the game

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.

IRichard Feynman

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay