Rounding Master

A gamified math worksheet for practicing rounding numbers to the nearest 10. Built for kids learning basic math skills.

Features

• 12 multiple-choice rounding questions
• Real-time progress tracking with visual progress bar
• Leaderboard displaying top 10 scores
• Confetti celebration for perfect scores (12/12)
• Unique name validation (no duplicate entries)

Tech Stack

• Frontend: Vue 3 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS v4
• UI Components: shadcn-vue
• Backend: Supabase (PostgreSQL)
• Animations: canvas-confetti

Setup

1. Install Dependencies

npm install

2. Supabase Setup

1. Create a new project at supabase.com
2. Run the schema in supabase/schema.sql in the SQL Editor
3. Copy your project URL and anon key from Settings > API

3. Environment Variables

Create a .env.local file in the project root:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run Development Server

npm run dev

Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run test:unit	Run unit tests with Vitest
npm run lint	Lint with ESLint
npm run type-check	TypeScript type checking

Project Structure

src/
├── components/
│   ├── ui/              # shadcn-vue components
│   ├── WorksheetForm.vue # Main quiz component
│   └── HighScores.vue    # Leaderboard component
├── composables/
│   └── useSupabase.ts    # Supabase client helpers
├── data/
│   └── questions.ts      # 12 rounding questions
├── types/
│   └── index.ts          # TypeScript interfaces
└── App.vue               # Root component

License

MIT