- Authors
- Name
- Nadim Tuhin
- @nadimtuhin
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 Challenge
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. Redux is fantastic for large applications, but sometimes you want something lighter. That's when I decided to experiment with MobX.
MobX offered a refreshingly simple approach to state management:
- Less boilerplate code - No action creators, reducers, or constants
- Straightforward state updates - Just mutate state directly
- Intuitive reactive model - Components re-render automatically when observed data changes
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 - Generate snapshots with minimal code
- Easy visual diffing - Spot UI changes instantly
- Simplified regression testing - Catch unintended changes automatically
The Implementation
Memory Booster is a classic memory card game where players need to match pairs of cards. The implementation focuses on:
- Clean, minimalist UI - Distraction-free gameplay
- Smooth animations - Satisfying card flip effects
- Responsive design - Works on any screen size
- Score tracking - Track your best performance
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
Final Thoughts
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.
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.