mAImories: AI-Powered Memory Game
Project Overview
mAImories is an innovative twist on the classic memory tile game, incorporating cutting-edge AI technology to create a unique and challenging puzzle experience. Players must match pairs of tiles based on clever AI-generated hints, testing both their memory skills and their ability to decipher cryptic clues.
Key Features
- AI-Generated Riddles: Each level features intelligent, context-aware riddles provided by an AI, adding a layer of complexity to the traditional memory game format.
- Progressive Difficulty: The game offers three distinct difficulty levels (Easy, Medium, Hard), with an increasing number of tiles as players advance through levels, providing a steadily growing challenge.
- Customizable Emoji Filters: Players can tailor their gaming experience by selecting specific emoji groups, adding variety and personalization to each play through.
- Comprehensive Stats Tracking: Detailed statistics provide insights into player performance, tracking high scores, completion times, and accuracy across different difficulty levels and emoji sets.
Technical Stack
- Next.js 15 & App Router: Powers server-side rendering and efficient routing for seamless level progression.
- Zustand: Enables smooth state management across the game's components and features.
- shadcn/ui & Tailwind CSS: Drives the game's beautiful, responsive design and UI elements.
- Next-Themes: Enables intuitive dark/light mode switching for enhanced player experience.
- Vercel AI SDK: Powers the generation of clever, contextual riddles at the heart of the gameplay.
Development Challenges
Creating Maimories allowed for a practical demonstration of modern web development practices. Integrating Next.js 15 with the App Router required balancing static and dynamic rendering for optimal performance, while Zustand provided a lightweight yet powerful solution for maintaining the game’s state. Prompt engineering with an LLM (like GPT-4) demanded careful tuning to ensure riddles remained consistently engaging and thematically cohesive, without veering into overly obscure territory. Establishing clear difficulty tiers, incorporating subtle hints through metaphors, and maintaining a smooth UX were central to striking the right level of complexity and replay-ability.
Additionally, designing an intuitive stats system and presenting performance data in a meaningful way exemplified the project’s user-focused approach. The experience gained in refining these elements—alongside code quality, maintainability, and testing—highlighted the challenges and growth opportunities in building a dynamic, AI-enhanced puzzle game that both entertains and showcases a broad range of development skills.
Future Enhancements
- Multiplayer Mode: Implement real-time competitive play against friends or random opponents.
- Additional Game Modes: Introduce new challenges like countdown mode for time-pressure gameplay.
- Global Leaderboard: Create a worldwide ranking system to foster competition and engagement.
- Game History UI: Develop a dynamic interface for reviewing completed games.
- Social Integration: Enable social media sharing, friend challenges, and progress comparisons.
- Expanded Themes and Filters: Introduce more diverse emoji sets and visual themes to keep the game fresh and appealing to a wide audience.
Conclusion
mAImories represents a fusion of classic gameplay with modern AI technology, showcasing my skills in full-stack development, AI integration, and creating engaging user experiences. While Next.js is primarily a frontend framework, its API routes and server-side rendering capabilities allow it to handle many full-stack functionalities, making it a powerful tool for building comprehensive web applications.
This project demonstrates my ability to take a familiar concept and transform it into something innovative and challenging for users. Moreover, developing mAImories has been an enjoyable way to learn new technologies, sharpen my existing skills, and explore the intersection of AI and web development in a fun, interactive format.