Mathdojo
Mathdojo is an interactive web application designed to enhance users' basic math skills through engaging game modes and real-time progress tracking. Built with a focus on user experience and scalability, it combines modern frontend frameworks with a robust backend architecture. The platform supports secure authentication, customizable game settings, and detailed performance analytics, making it suitable for learners of all levels.
About
Mathdojo is a full-stack web application aimed at improving basic math skills through gamified learning. It leverages Next.js for server-side rendering and React for dynamic UI components, ensuring a seamless user experience. The backend is powered by Prisma ORM connected to a database, enabling secure user management and progress tracking.
Purpose
The platform addresses the need for accessible, engaging math practice tools that adapt to different skill levels. Key features include:
- User authentication with email verification and password reset
- Customizable game modes with operation toggles
- Real-time problem solving with instant feedback
- Progress and score tracking over time
- Game session persistence and analytics
Technical Deep Dive
A notable architectural choice is the use of server actions in src/actions/, which handle critical operations like user sign-in, registration, and game creation. These actions interact directly with Prisma ORM for database transactions, ensuring data consistency and security. The frontend employs Zustand for state management, particularly in useGameSessionStore, to synchronize game state across components efficiently. Additionally, the implementation of fullscreen toggling via @mantine/hooks enhances user immersion during gameplay, demonstrating thoughtful UX considerations.
Lessons Learned
One challenge was managing complex game state transitions and ensuring data persistence without disrupting the user experience. Implementing server actions for critical operations helped decouple frontend interactions from backend logic, leading to a more maintainable codebase. Balancing real-time feedback with performance optimization required careful architecture planning, especially around state synchronization and side effects.