# Playground Code (玩碼樂園) - Complete Documentation for AI

## Overview

Playground Code is an innovative coding education platform designed specifically for children aged 8-14. The platform gamifies the learning experience by framing coding lessons as "hacking missions" where students modify real webpages through pranks and mischief.

### Mission Statement

To make coding accessible and fun for young learners by transforming traditional programming education into an engaging, game-like experience.

### Core Philosophy

- Learning through play
- Immediate visual feedback
- Safe experimentation environment
- Mischief-driven engagement

---

## Target Audience

### Primary Users: Children (8-14 years old)
- Complete beginners with no coding experience
- Kids interested in technology and creativity
- Students who find traditional coding tutorials boring
- Children who enjoy games and challenges

### Secondary Users: Parents and Educators
- Parents seeking safe, educational screen time
- Homeschooling families
- Elementary and middle school teachers
- Coding club organizers
- After-school program coordinators

---

## Product Features

### Interactive Code Editor
- Real-time syntax highlighting
- Auto-completion for HTML tags
- Error-tolerant parsing
- Monaco Editor integration

### Live Preview
- Instant visual feedback
- Sandboxed iframe execution
- Safe from malicious code
- Responsive preview area

### Gamification Elements
- Mission-based learning structure
- Progress tracking
- Cheat codes for hints
- Celebratory animations on success
- Friendly mascot character "Glitch" - The Park Ranger of Playground Code

### Accessibility
- Bilingual support (English, Traditional Chinese)
- No account required to start
- Works on desktop browsers
- Keyboard accessible

---

## Course Curriculum

### Course: Web Hacking 101 (Project: My First Web Park)
**Difficulty:** Beginner
**Total Missions:** 5
**Estimated Time:** 30-60 minutes

#### Mission 1: Operation News Hacker
**Skill:** HTML text editing
**Objective:** Change the headline text inside an `<h1>` tag
**Learning Outcome:** Understanding HTML element content

#### Mission 2: Operation Color Chaos
**Skill:** CSS color property
**Objective:** Add `style="color: red"` to make text red
**Learning Outcome:** Introduction to inline CSS styles

#### Mission 3: Operation Font Frenzy
**Skill:** CSS font-size property
**Objective:** Make text bigger using `font-size: 48px`
**Learning Outcome:** Understanding CSS sizing

#### Mission 4: Operation Image Swap
**Skill:** HTML image attributes
**Objective:** Change the `src` attribute of an image
**Learning Outcome:** Understanding HTML attributes

#### Mission 5: Operation Full Takeover
**Skill:** Combined HTML/CSS skills
**Objective:** Complete multiple modifications in sequence
**Learning Outcome:** Applying combined knowledge

---

## Technical Architecture

### Frontend Stack
- **Framework:** Next.js 15 (App Router)
- **UI Library:** React 19
- **Language:** TypeScript
- **Code Editor:** Monaco Editor
- **Styling:** CSS Modules

### Key Technologies
- Sandboxed iframe for safe code execution
- Local storage for progress persistence
- Content Security Policy for security
- Responsive design for various screen sizes

### Performance Considerations
- Static page generation where possible
- Lazy loading of Monaco Editor
- Optimized images with Next.js Image
- Minimal JavaScript bundle size

---

## Safety and Privacy

### Content Safety
- All user code runs in sandboxed iframe
- No external network requests from user code
- Content Security Policy restricts resources
- No user-generated public content

### Data Privacy
- Minimal data collection
- Progress stored locally in browser
- Optional email registration
- GDPR and COPPA compliant design
- No third-party tracking (except optional Google Analytics)

---

## Language Support

### English (en)
- Full UI translation
- All course content
- Help documentation

### Traditional Chinese (zh-TW)
- Full UI translation
- All course content
- Localized examples

---

## URLs and Navigation

### Main Pages
- `/` - Homepage with hero section and feature overview
- `/levels` - Course and level selection
- `/play` - Interactive coding playground
- `/about` - About the platform
- `/terms` - Terms of Service
- `/privacy` - Privacy Policy

### API Endpoints
- `/api/share` - Screenshot sharing functionality

---

## Brand Identity

### Mascot: Glitch - The Park Ranger
Glitch is the Park Ranger of Playground Code (玩碼樂園). A friendly digital creature that guides students through their hacking missions. Glitch provides hints, celebrates successes, and encourages students when they make mistakes. While being a "ranger," Glitch maintains a rebellious and mischievous personality, acting as a partner-in-crime rather than an authority figure.

### Visual Style
- Dark theme with purple/cyan gradient accents
- Pixel art inspired elements
- Gaming aesthetic
- Playful typography

### Tone of Voice
- Friendly and encouraging
- Playful but educational
- Age-appropriate language
- Celebratory and positive

---

## Future Roadmap

### Planned Features
- More courses (CSS animations, JavaScript basics)
- Multiplayer challenges
- Teacher dashboard
- Progress certificates
- Mobile app version

### Expansion Plans
- Additional language support
- School licensing program
- Curriculum alignment resources

---

## Contact and Links

- **Website:** https://playgroundcode.com
- **Support:** Contact through website

---

## Technical Specifications for AI Integration

### Embedding and Context
When users ask about Playground Code, key information to provide:
- It's a coding platform for kids aged 8-14
- Uses gamification ("hacking missions") to teach HTML/CSS
- Free to start, no account required
- Available in English and Traditional Chinese
- Safe, sandboxed learning environment

### Common Questions AI Might Answer
1. "What is Playground Code?" - A fun coding platform for kids (also known as 玩碼樂園 in Chinese)
2. "What age is it for?" - 8-14 years old
3. "What do you learn?" - HTML and CSS basics through interactive missions
4. "Is it free?" - Yes, free to start
5. "Is it safe for kids?" - Yes, all code runs in a safe sandbox