Yebo Kids PWA Deep Dive
Mobile-first Progressive Web App designed for younger students (ages 5-12).
Overview
Location: yebolearn/kids/
Yebo Kids is a separate frontend optimized for children with:
- Large, colorful UI elements
- Gamification-first design
- Simplified navigation
- Offline support
- Parental controls
Key Features
1. Learning Modules
Interactive lessons with:
- Animated characters
- Audio instructions
- Drag-and-drop activities
- Immediate feedback
- Progress tracking
2. AI Avatar Tutor
A friendly AI character that:
- Guides through lessons
- Answers questions in kid-friendly language
- Encourages and motivates
- Adapts to learning pace
3. Gamification
| Feature | Description |
|---|---|
| Stars | Earned for completing activities |
| Badges | Achievement milestones |
| Levels | Progress through grade content |
| Streaks | Daily learning consistency |
| Avatars | Customizable student characters |
4. Flashcards
Spaced repetition flashcards with:
- Picture-based cards
- Audio pronunciation
- Review scheduling
- Progress persistence
App Structure
kids/
├── public/
│ ├── manifest.json # PWA manifest
│ ├── sw.js # Service worker
│ └── icons/ # App icons
├── src/
│ ├── components/
│ │ ├── Avatar/ # Student avatar
│ │ ├── Games/ # Learning games
│ │ ├── Lessons/ # Interactive lessons
│ │ ├── Navigation/ # Kid-friendly nav
│ │ └── Rewards/ # Gamification UI
│ ├── pages/
│ │ ├── Home.tsx # Dashboard
│ │ ├── Learn.tsx # Subject selection
│ │ ├── Play.tsx # Game center
│ │ ├── Progress.tsx # Stars & badges
│ │ └── Profile.tsx # Avatar customization
│ ├── hooks/
│ │ ├── useOffline.ts # Offline detection
│ │ └── useProgress.ts # Learning progress
│ └── services/
│ ├── api.ts # Backend calls
│ └── storage.ts # Local persistence
└── ...PWA Configuration
manifest.json
json
{
"name": "Yebo Kids",
"short_name": "Yebo Kids",
"description": "Fun learning for kids",
"start_url": "/",
"display": "standalone",
"background_color": "#FEF3C7",
"theme_color": "#F97316",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Service Worker
Caches:
- App shell (HTML, CSS, JS)
- Images and icons
- Audio files
- Downloaded lessons
javascript
// sw.js
const CACHE_NAME = 'yebo-kids-v1';
const STATIC_ASSETS = [
'/',
'/index.html',
'/static/js/main.js',
'/static/css/main.css',
'/audio/',
'/images/',
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(STATIC_ASSETS);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cached) => {
return cached || fetch(event.request);
})
);
});UI/UX Design Principles
Colors
css
:root {
--primary: #F97316; /* Orange - fun, energetic */
--secondary: #22C55E; /* Green - success, nature */
--accent: #3B82F6; /* Blue - calm, learning */
--background: #FEF3C7; /* Warm cream */
--text: #1F2937; /* Dark gray */
}Typography
- Primary Font: Nunito (rounded, friendly)
- Sizes: Larger than standard (min 18px)
- Line Height: 1.6+ for readability
Touch Targets
- Minimum 48x48px for all interactive elements
- Extra padding on buttons
- Clear visual feedback on tap
Screens
Home Screen
┌─────────────────────────────────┐
│ 🌟 Good morning, [Name]! │
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ 📚 │ │ 🎮 │ │
│ │ Learn │ │ Play │ │
│ └─────────┘ └─────────┘ │
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ ⭐ │ │ 👤 │ │
│ │Progress │ │ Avatar │ │
│ └─────────┘ └─────────┘ │
│ │
│ ═══════════════════════════ │
│ Daily Streak: 🔥 5 days │
│ Stars Today: ⭐ 12 │
└─────────────────────────────────┘Learn Screen
┌─────────────────────────────────┐
│ ← Back 📚 Learn │
│ │
│ ┌─────────────────────────┐ │
│ │ 🔢 Math │ │
│ │ 12 lessons │ │
│ │ ████████░░ 80% │ │
│ └─────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ │
│ │ 📖 Reading │ │
│ │ 8 lessons │ │
│ │ ██████░░░░ 60% │ │
│ └─────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ │
│ │ 🌍 Science │ │
│ │ 10 lessons │ │
│ │ ████░░░░░░ 40% │ │
│ └─────────────────────────┘ │
└─────────────────────────────────┘Lesson Screen
┌─────────────────────────────────┐
│ ← Exit ⭐ 5/10 🔊 │
│ │
│ ┌─────────────────────────┐ │
│ │ │ │
│ │ [Animated Content] │ │
│ │ │ │
│ │ What is 2 + 3? │ │
│ │ │ │
│ └─────────────────────────┘ │
│ │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │
│ │ 4 │ │ 5 │ │ 6 │ │ 7 │ │
│ └───┘ └───┘ └───┘ └───┘ │
│ │
│ ═══════════════════════════ │
│ Progress: ████░░░░░░ 40% │
└─────────────────────────────────┘Parental Controls
Accessible via parent account linking:
- Screen Time: Daily/weekly limits
- Content Filters: Age-appropriate content only
- Progress Reports: Weekly summaries to parent
- Activity Log: What the child has learned
Offline Capabilities
Cached Content
- Previously accessed lessons
- Flashcard decks
- Audio files
- Images
Sync Strategy
typescript
// When online, sync progress
window.addEventListener('online', async () => {
const pendingProgress = await localDB.getPendingProgress();
for (const progress of pendingProgress) {
await api.syncProgress(progress);
await localDB.markSynced(progress.id);
}
});
// When offline, queue progress
const saveProgress = async (data) => {
if (navigator.onLine) {
await api.saveProgress(data);
} else {
await localDB.queueProgress(data);
}
};Integration with Backend
API Endpoints Used
| Endpoint | Purpose |
|---|---|
GET /api/lessons/:subjectId | Fetch lessons |
POST /api/progress | Save learning progress |
GET /api/flashcards | Get flashcard decks |
POST /api/ai/tutor | AI tutor interaction |
GET /api/gamification/stats | Stars, badges |
Authentication
- Simplified login (parent sets up)
- Device-based session persistence
- Parent PIN for settings access