ProjectsMath Star

Math Star

Interactive Math Learning & Gamified Practice Platform

Next.jsTypeScriptTailwind CSSDjangoPostgreSQLStripeReact Hook FormZod

Team Size: 03 Developers

My Role: Frontend Developer

Case Study Overview

Math Star is a modern interactive math learning platform designed to help students practice and improve their arithmetic skills through structured exercises and gamified challenges. It offers adaptive difficulty levels, real-time feedback, progress tracking, and a reward-based learning system. With subscription-based premium features and engaging UI interactions, the platform delivers a scalable and motivating EdTech experience.

Project Overview

A gamified learning platform that helps students master mathematics through practice, challenges, and real-time progress tracking.

Highlights

Gamified math learning with stars, levels, and rewards system
Four core math operations with structured practice flow
Adaptive difficulty levels (0–10, 0–20, 0–50, 0–100)
Multiple challenge modes (speed, no-mistake, 100 questions, what's missing)
Real-time progress tracking and analytics dashboard
Subscription-based premium learning system with Stripe integration

Features

Math Practice System

›Addition, subtraction, multiplication, and division modules
›Configurable difficulty using range-based question generation
›Step-by-step practice workflow (setup → solve → results)
›Immediate feedback on answers

Challenge Modes

›No Mistake Challenge for accuracy-focused learning
›Speed Mode for time-based problem solving
›100 Questions endurance challenge
›What's Missing mode for critical thinking

Gamification System

›Star-based reward system for motivation
›Level progression based on performance
›Achievement badges and unlockable rewards
›Animated success and completion screens

Progress & Analytics

›Daily practice time tracking
›Stars earned and performance history
›Best challenge scores per day
›Activity feed and learning streaks

Subscription System

›Free and premium tier-based access
›Stripe-powered secure payment integration
›Trial period and auto-renewal support
›Subscription status-based feature control

My Responsibilities

Built full frontend application using Next.js and TypeScript
Developed reusable and scalable component architecture
Implemented math practice and challenge workflows
Integrated Redux Toolkit and RTK Query for state management
Designed gamification and progress tracking system UI
Implemented subscription flow with Stripe integration

UI System

Reusable UI components for inputs, modals, and cards

Consistent design system across dashboard and practice screens

Mobile-first responsive layout system

Animated feedback screens for better engagement

Architecture

Modular Next.js App Router structure

Separation of features into domain-based slices

Component-driven and reusable architecture

Scalable folder structure for large feature expansion

Performance

Optimized rendering with Next.js App Router

Efficient API handling using RTK Query caching

Lazy-loaded dashboard and challenge modules

Minimal re-render state management strategy

Results

✦Engaging gamified learning experience for students

✦Improved user retention through challenges and rewards

✦Scalable EdTech architecture with modular design

✦Smooth subscription-based monetization system

Summary

A fully gamified EdTech platform that transforms traditional math learning into an interactive experience using practice modules, challenge modes, and real-time progress tracking.

Live system is publicly accessible. Source code is private and not publicly available.

Project Details

My Role

Frontend Developer

Project Type

Educational Web Application

View Project

Demo Video

Full Tech Stack

Frontend

Next.jsTypeScriptTailwind CSSFramer Motionanimated/uilucide-reactshadcn/ui

Backend

DjangoPython

Database

PostgreSQL

Forms & Validation

React Hook FormZod

Payments

Stripe

UI & Feedback

Sonner