• 

  Calculation_Page

• 

  Landing_Page

• 

  Home_Page

• 

  After_entering_correct_answer

• 

  Cooking_Phase

Fraction Chef

Inspiration

We were inspired by the idea of combining real-world scenarios with educational content to make learning feel natural and fun. Cooking and fractions are a perfect match — in real life, recipes often require adjusting measurements, which involves fraction multiplication. We wanted to gamify this everyday challenge and turn it into a fast-paced, rewarding experience that helps players build math confidence while having fun.

What it does

Fraction Chef transforms fraction learning into an exciting restaurant management game. Players receive customer orders with different serving sizes and must calculate the correct ingredient amounts using fraction multiplication. They progress through prep, cooking, and plating stations while managing time and inventory.

How we built it

• Built with React, TypeScript, and Tailwind CSS using modern web technologies
• Features real-time game mechanics, responsive design, and engaging animations
• Utilized shadcn/ui components for polished UI elements
• Used React hooks for efficient state management

Challenges we ran into

• Balancing educational value with engaging gameplay
• Creating intuitive fraction calculation interfaces
• Implementing smooth game flow and animations
• Ensuring responsive design across devices

Accomplishments that we're proud of

• Successfully gamified fraction learning in an accessible way
• Created an intuitive UI that guides players through complex math concepts
• Achieved smooth animations and engaging visual feedback
• Built a complete game loop with progression and scoring

What we learned

• How to make mathematical concepts fun and interactive
• The importance of visual feedback in educational games
• Effective state management for complex game mechanics
• Creating engaging user experiences for educational content

What's next

• Adding more recipe complexity and fraction types
• Implementing user accounts and progress tracking
• Creating multiplayer functionality
• Expanding to cover other mathematical concepts

Built With

• react
• shadcn/ui
• tailwind
• typescript
• vite