Contact person: Business Client

Phone:Show

Email:Show

Location: Los Angeles, United States

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"I'm looking for a skilled developer to create an engaging educational website for kids aged 5-16. The site will focus on teaching AI and coding through interactive games and video tutorials.

Key Requirements:
- Target age group: 5-16 years
- Content: Interactive games and video tutorials
- Coding languages: Scratch and JavaScript

Ideal Skills & Experience:
- Experience in developing educational platforms
- Proficiency in game development
- Strong knowledge of Scratch and JavaScript
- Ability to create engaging video content
- Understanding of user experience for children

Create a complete, production-ready web application called “FOR KIDS”, a bilingual educational platform that teaches programming and artificial intelligence to children aged 5 to 16.

The project must use HTML + CSS + JavaScript (Vanilla) for the frontend and Firebase v10 (Authentication + Firestore) as the backend.

The website must be child-friendly, safe, bilingual (English / 中文), responsive on all devices, and follow a dark-gray + orange theme with rounded corners and friendly fonts (Nunito, Poppins, Inter).

Folder Structure
for-kids/
├─ public/
│ ├─ [login to view URL]
│ ├─ [login to view URL]
│ ├─ [login to view URL]
│ ├─ [login to view URL]
│ ├─ [login to view URL]
│ ├─ [login to view URL]
│ ├─ css/ ([login to view URL], [login to view URL], [login to view URL])
│ ├─ lang/ ([login to view URL], [login to view URL])
│ ├─ assets/ ([login to view URL], icons)
├─ src/
│ ├─ [login to view URL], [login to view URL], [login to view URL], [login to view URL]
│ ├─ games/ ([login to view URL], [login to view URL])
│ ├─ quiz/ ([login to view URL], [login to view URL])
│ └─ dashboard/ ([login to view URL])
├─ firebase/ ([login to view URL], [login to view URL])
└─ [login to view URL]

Core Pages

1. Home ([login to view URL]) — Hero section with mascot, “Start Learning” & “Sign In” buttons, language toggle (EN/中文).
2. Login ([login to view URL]) — Google Sign-In and Email/Password login using Firebase Auth.
3. Learn ([login to view URL]) — Two-panel layout with code editor on the left and preview/output on the right. “Run” button executes user code in a sandboxed iframe. Challenges come from src/games/challenges.js.
4. Quiz ([login to view URL]) — Multiple-choice quiz system showing progress bar and awarding XP via Firestore.
5. Dashboard ([login to view URL]) — Displays user profile, XP, level, and progress history from Firestore.
6. 404 page — Minimal “Not Found” layout.

Firebase Integration

[login to view URL] in /public/ with keys from Firebase console.

Auth: Google + Email/Password sign-in.

Firestore:

Collection users/{uid}: { uid, email, displayName, createdAt, xp, level }.

Collection progress/{uid}: { completedChallenges:[], lastSeen }.

Public collection quizzes/{quizId} (read-only).

Security Rules: users can read/write only their own data.

i18n (Internationalization)

/public/lang/[login to view URL] and /public/lang/[login to view URL] store all translatable UI strings.

Add a <select id=\"lang-select\"> for switching language, saved in localStorage.

Style Requirements

Background: #121316, text: #E8EAED, accent: #FF7A18.

Rounded corners (16 px), soft shadows, clean layout.

Smooth hover effects, large friendly buttons.

Consistent navigation bar on top (logo + links).

Footer: “© FOR KIDS”.

Features

User XP system: completing challenges or quizzes adds XP (in Firestore).

Progress auto-save with ensureProfile() + addXP() helpers.

Dashboard visualizes total XP and level.

Works fully client-side via Firebase; no external server required.

Deliverables

All HTML/CSS/JS files with clean, commented code.

Firebase rules and configuration ready to deploy.

Responsive design for desktop + mobile.

Clear instructions in [login to view URL] on setup and deployment (firebase init hosting, etc.).

Bonus (if possible)

Add cute robot mascot illustration on homepage.

Add confetti animation when a challenge is completed.

Optional: implement sound effect (reward chime) when XP increases.

Goal: Generate all necessary files and folders with code that can be opened in Visual Studio Code, run locally via Live Server, and connect directly to Firebase for authentication and database storage.

Please share your portfolio and relevant experience." (client-provided description)