🐼 学中文 · Chinese Kids Learning App

A fun, interactive app for kids to learn Chinese — built with React.js, Ant Design, and served via Docker on port 8010.

---

📋 Table of Contents

• Features
• Tech Stack
• Project Structure
• Getting Started
  • Local Development
  • Docker (Production)
• Routes
• Customisation

---

✨ Features

• 🏠 Landing Page — Animated "Ready?" screen with a GO button
• 🀄 Match Word Game — Match Chinese words to their meanings (coming soon)
• 🌸 Playful, kid-friendly design with floating animations
• 📱 Fully responsive — works on mobile and desktop

---

🛠 Tech Stack

Layer	Technology
Frontend	React 18, React Router v6
UI Library	Ant Design v5
Icons	@ant-design/icons
Fonts	Fredoka One, Nunito (Google Fonts)
Web Server	Nginx (in Docker)
Container	Docker (multi-stage build)

---

📁 Project Structure

chinese-kids-app/
├── public/
│   └── index.html
├── src/
│   ├── index.js           # App entry point + Router
│   ├── index.css          # Global styles & animations
│   └── pages/
│       ├── LandingPage.jsx   # "/" — Ready? + Go button
│       ├── LandingPage.css
│       ├── MatchWord.jsx     # "/match-word" — Word matching game
│       └── MatchWord.css
├── .env                   # PORT=8010 for local dev
├── Dockerfile             # Multi-stage Docker build
├── nginx.conf             # Nginx SPA config on port 8010
├── package.json
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js v18+ and npm (for local dev)
• Docker (for containerised deployment)

---

Local Development

# 1. Clone or download this project
cd chinese-kids-app

# 2. Install dependencies
npm install

# 3. Start the dev server (runs on port 8010)
npm start

Open http://localhost:8010 in your browser.

---

Docker (Production)

Build the image

docker build -t chinese-kids-app .

Run the container

docker run -d \
  --name chinese-kids-app \
  -p 8010:8010 \
  chinese-kids-app

Open http://localhost:8010 in your browser.

Stop and remove the container

docker stop chinese-kids-app
docker rm chinese-kids-app

Using Docker Compose (optional)

Create a docker-compose.yml:

version: '3.8'
services:
  app:
    build: .
    ports:
      - "8010:8010"
    restart: unless-stopped

Then run:

docker compose up -d

---

🗺 Routes

Path	Description
/	Landing page — "Ready?" + GO button
/match-word	Word matching game (in development)

---

🎨 Customisation

Adding a new page

1. Create src/pages/YourPage.jsx
2. Add a route in src/index.js:

   <Route path="/your-page" element={<YourPage />} />

3. Link to it using useNavigate('/your-page') or <Link to="/your-page">

Changing the port

• Local dev: Edit PORT=8010 in .env
• Docker: Edit listen 8010; in nginx.conf and update -p 8010:8010 in your run command

---

📄 License

MIT — free to use and modify for educational purposes. 🎉