Numo - Educational Catch Game 🦖🛻

🌐 Live Application: https://numo-educational-app.web.app/

Numo is a vibrant, interactive educational web application designed for children to master numbers (10-20) and the alphabet through play. Featuring a friendly prehistoric world filled with dinosaurs and monster trucks, Numo combines learning with a fast-paced "Catch Game" to bridge the gap between education and entertainment.

---

🌟 Key Features

📚 Multimodal Learning

• Learning Mode: Direct association between symbols and pronunciation.
• Practice Mode: Error-free quiz system with visual and auditory feedback.
• Catch Game: An action-packed mode where children must catch specific falling items.

🎮 Dynamic Gameplay

• Progressive Difficulty: Speed increases every 3 successful catches (⚡ SPEED UP!).
• High Score System: Independent record tracking for both Numbers and Letters modes.
• Custom Player Names: Beautiful modal for record-breakers to save their names.
• Game Controls: Pause and Stop functionality for controlled sessions.

🔊 Accessibility & Design

• Interactive Speech: Uses Web Speech API for clear pronunciations (localized to avoid "capital" letter announcements on iPad).
• Premium Aesthetics: Vibrant glassmorphism UI, smooth animations, and high-quality character art.
• PWA Support: Full offline functionality—install it on your iPad/iPhone home screen and play anywhere.

---

🛠️ Technology Stack

• Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3.
• Voice Synthesis: Web Speech API.
• Persistence: LocalStorage for persistent high scores.
• Offline Capabilities: Service Workers & Web App Manifest.
• Hosting: Firebase Hosting.

---

🚀 Getting Started

Local Development

To run the project locally for development or testing:

1. Clone or download this repository.
2. Serve the directory using any local web server (e.g., Python's http.server or npx http-server).

   npx http-server -p 8080

3. Open http://localhost:8080 in your browser.

iPad/Mobile Installation

1. Open https://numo-educational-app.web.app/ in Safari.
2. Tap the Share button (box with upward arrow).
3. Select "Add to Home Screen".
4. Launch Numo from your home screen for a full-screen, native-like experience.

---

📦 Deployment

The project includes a ready-to-use deployment script for Windows:

• Run deploy.bat to automatically push the latest changes to Firebase Hosting.
• Ensure you have the Firebase CLI installed and are logged in.

---

👨‍💻 Developed By

AppFlow Solution
Building innovative educational tools for the next generation.

---

🛠️ Development Note

This project was built using Vibe Coding methodologies powered by Google's Antigravity IDE, ensuring rapid iteration and high-quality codebase development.

---

© 2024 AppFlow Solution. All rights reserved.