Nadim Tuhin
Published on

Memory Booster: A Journey Through MobX and Jest

Authors

Memory Booster: When Procrastination Leads to Innovation

Sometimes, the most interesting projects emerge from moments of procrastination. That's exactly how Memory Booster came to be - a side project born during a time when I was supposed to be implementing a WebRTC calling feature for a chat application.

The Genesis

In mid-2016, while working on a chat application, I found myself in a peculiar state of mind. The WebRTC calling feature I was supposed to implement felt daunting, and like many developers, I chose to channel that energy into something completely different - a memory game.

Technical Stack: Embracing MobX

At that time, I was getting a bit tired of the Redux boilerplate in my day-to-day work. Don't get me wrong - Redux is fantastic for large applications, but sometimes you want something lighter, something different. That's when I decided to experiment with MobX.

MobX offered a refreshingly simple approach to state management:

  • Less boilerplate code
  • More straightforward state updates
  • Intuitive reactive programming model

Testing with Jest Snapshots

One of the exciting aspects of this project was implementing Jest snapshot testing. It was a relatively new feature at the time, and it provided a fantastic way to ensure UI consistency:

  • Quick test writing
  • Easy visual diffing
  • Simplified regression testing

The Game Implementation

Memory Booster is a classic memory card game where players need to match pairs of cards. The implementation focuses on:

  • Clean, minimalist UI
  • Smooth animations
  • Responsive design
  • Score tracking

Learning Outcomes

While this project started as a form of procrastination, it ended up being an invaluable learning experience:

  • Gained hands-on experience with MobX
  • Mastered Jest snapshot testing
  • Learned about game state management
  • Explored animation implementations in React

Reflections

Looking back, while MobX provided a pleasant development experience for this small project, I still maintain that Redux is often the better choice for larger applications. The structure and predictability it provides become increasingly valuable as applications grow in complexity.

Try It Out

You can check out Memory Booster on GitHub: memory-booster

Sometimes, the best projects come from moments when we're supposed to be doing something else. Memory Booster stands as a testament to how procrastination, combined with curiosity about new technologies, can lead to meaningful learning experiences.