A sleek and minimalist web application designed to test and improve your number memorization skills, built with Next.js and animated with Framer Motion.
This application offers a minimalistic and customizable user experience from start to finish.
Setup Screen
Results Screen
- Customizable Challenge: Tailor the difficulty by choosing the number of digits and the grouping size.
- Live Performance Timer: A real-time timer tracks your memorization speed from the moment the numbers are revealed.
- Detailed Feedback: Get an instant, side-by-side comparison of your answer versus the correct sequence, with digits highlighted for clear feedback.
- Smooth Animations: Fluid transitions between game states are powered by Framer Motion to create a modern and engaging feel.
- Framework: Next.js (with App Router)
- UI Library: React
- Language: TypeScript
- Styling: Tailwind CSS
- Animation: Framer Motion
As my first major project, this was a deep dive into building a complete application with a modern tech stack. Key achievements include:
- Managing complex game state, including timers, user input, and multiple game phases, using React Hooks.
- Implementing a responsive, mobile-first design system with Tailwind CSS.
- Creating a polished user experience with fluid animations using Framer Motion.