Playyo Math Adventure

A bright, kid-friendly math learning app built with Expo + React Native. The app is TypeScript-first and organized by features for production-ready growth.

Highlights

• 4 math modes: addition, subtraction, multiplication, division.
• Colors mode: match the word to the highlighted color square.
• Reading modes: sight-word picture match and word builder.
• Round-based play (5 questions).
• Friendly hints for incorrect answers.
• Difficulty levels (Easy, Medium, Hard).
• Progress bar, streaks, and summary stats.
• Confetti + sound effects for engagement.
• Google Font Baloo 2 with graceful fallback.

Tech Stack

• Expo (React Native)
• TypeScript
• expo-av (audio)
• react-native-confetti-cannon
• @expo-google-fonts/baloo-2

Getting Started

Install dependencies:

npm install

Run the app:

npm run start

Project Structure

src/
  AppRoot.tsx
  components/
    ChoiceButton.tsx
    DifficultyCard.tsx
    FeedbackBox.tsx
    OperationCard.tsx
    ProgressBar.tsx
    ScreenContainer.tsx
    StatLine.tsx
  features/
    home/
      HomeScreen.tsx
    game/
      DifficultyScreen.tsx
      GameScreen.tsx
      SummaryScreen.tsx
      gameData.ts
      useGameEngine.ts
    colors/
      ColorsScreen.tsx
      ColorsSummaryScreen.tsx
      colorData.ts
      useColorsEngine.ts
    reading/
      ReadingHomeScreen.tsx
      ReadingMatchScreen.tsx
      ReadingBuildScreen.tsx
      ReadingSummaryScreen.tsx
      readingData.ts
      readingUtils.ts
      useReadingMatchEngine.ts
      useReadingBuildEngine.ts
  shared/
    math.ts
    sounds.ts
    theme.tsx

Architecture Notes

• Feature-first layout: each feature owns its screens and logic.
• Shared layer for cross-cutting concerns (theme, sounds, math utils).
• Pure UI components in src/components for reuse.
• useGameEngine isolates state + game rules from UI.

License

Private, all rights reserved.