# CodeCrafters

## About This App
An interactive coding education platform for learning HTML, CSS, and JavaScript through hands-on lessons and real-time code preview



## Specification
# CodeCrafters — Interactive Coding Education Platform

Create a comprehensive, single-file interactive coding education platform called **CodeCrafters** that teaches HTML, CSS, and JavaScript through 14 hands-on courses with a live code editor and preview pane. The app should feel like a polished, professional learning environment (think CodePen meets freeCodeCamp) with a playful, encouraging personality.

## App Type

**React Web App** (single-file, using React + Babel via CDN). This choice is driven by the need for complex state management (course progress, active lesson, theme, viewport mode, editor contents per-lesson), reactive UI updates, and a component-based split-pane layout. A vanilla approach would work, but React makes the state juggling far cleaner. Render everything in one HTML file with inline `<script type="text/babel">`.

## Overall Layout

A three-region layout matching the reference screenshots:

1. **Left Sidebar** (fixed ~200px, dark charcoal `#1a1d21` regardless of theme) — branding + course navigation.
2. **Top Header Bar** (full width across the main content) — nav links + theme toggle + viewport toggle.
3. **Main Split-Pane Content** — a left panel for lesson content and a right panel containing the code editor (top) and live preview (bottom).

Use CSS Grid for the outer shell (`sidebar | main`) and Flexbox for internal arrangements. The whole app fills the viewport (100vh) with no page scroll — individual panes scroll internally.

## UI Elements

### Sidebar (always dark)

- **Logo/Brand** at top: a strawberry or code icon (🍓 or a bracket glyph) next to the text **"CodeCrafters"** in white, bold.
- **Course Group List** below. Group the 14 courses into 4 sections, each showing a title and a subtitle count:
  - **HTML Fundamentals** *(4 lessons)*
  - **CSS Styling** *(4 lessons)*
  - **JavaScript Basics** *(4 lessons)*
  - **Ultimate Test** *(capstone — the final multi-tech course, but label as "6 courses" style subtitle for flavor / show it as the capstone)*
- Clicking a group expands to reveal its individual lessons. The **currently active lesson** gets a bright blue highlight bar (`#2f6fed`-ish) spanning the full sidebar width with white text — exactly like "2.2 Box Model" in the reference.
- Completed lessons show a small ✓ checkmark; locked/future lessons can show a subtle lock or just muted text.
- Sidebar items have generous vertical padding and hover states (subtle lighten).

### Header Bar

- Left: breadcrumb-style nav links **Dashboard · Curriculum · Community** (these can scroll/filter the sidebar or show simple info modals — keep them functional-lite).
- Right side, two controls:
  - **Theme Toggle**: a pill/segmented control with a ☀️ sun and 🌙 moon icon. Toggling flips between light and dark themes across the entire app (except the always-dark sidebar).
  - **Viewport Toggle**: a bordered button labeled **"Toggle View"** flanked by a 🖥️ desktop icon and a 📱 mobile icon. Clicking switches the preview pane between Desktop (fluid, fills pane) and Mobile (fixed **540×960**, centered, with a subtle device-frame border/shadow).

### Lesson Content Panel (left of split)

- **Breadcrumb heading** at top, e.g. *"CSS Styling > 2.2 Box Model"* — the section name in blue link color, the lesson name in regular text.
- **AI-generated explanation** body: clear paragraphs explaining the concept. Inline code snippets (like `.box`, `20px`) render in a monospace font with a light gray highlighted background pill.
- Bold/italic emphasis for key terms (e.g. ***Padding*** introduced in bold-italic).
- A **Task** callout: the word "Task:" in bold followed by the concrete challenge (e.g. "Set the padding of the `.box` element to `20px`.").
- Optionally a subtle "✨ Hint" expandable and a success banner when the task check passes.

### Code Editor Panel (top-right of split)

- A header strip showing the **filename** (e.g. `style.css`, `index.html`, `script.js`) on the left and a green **"▶ Run Code"** button on the right (bright green `#2fa860`-ish, white text, rounded).
- The editor itself: a textarea-based code editor with **line numbers** in a gutter and **syntax highlighting**. Implement highlighting via a lightweight overlay technique (a highlighted `<pre>` layered under a transparent `<textarea>`) or use highlight.js from CDN. Support HTML/CSS/JS token coloring: keywords, strings, comments (green), properties, punctuation.
- Monospace font (`'Fira Code', 'Consolas', monospace`), comfortable line-height.
- In dark theme the editor uses a dark code background (`#1e2127`); in light theme a soft near-white (`#f6f7f9`).

### Live Preview Pane (bottom-right of split)

- Renders the user's code inside an **`<iframe>`** (sandboxed) so styles/scripts don't leak into the app.
- **Desktop mode**: iframe fills the preview area fluidly.
- **Mobile mode**: iframe is wrapped in a container with **fixed 540×960** dimensions (scaled down proportionally to fit the pane if needed), centered, with a device-frame look (rounded corners, subtle border/shadow). A small ✨ decorative sparkle can sit in the corner (as seen in the dark-mode reference).
- Preview updates when **Run Code** is clicked (and optionally live-debounced as the user types).
- A thin draggable divider between editor and preview would be a nice touch (optional).

## Theming (CSS Variables)

Define a `:root` set of CSS custom properties and a `[data-theme="dark"]` override applied on the `<html>`/`<body>`. Variables should cover: `--bg`, `--surface`, `--text`, `--text-muted`, `--border`, `--accent` (blue), `--accent-green`, `--code-bg`, `--code-text`. The sidebar keeps its own always-dark tokens. Toggling theme just flips the `data-theme` attribute — everything transitions smoothly (add a short `transition` on background/color).

- **Light theme**: white/`#fafbfc` backgrounds, dark slate text, light borders.
- **Dark theme**: `#15181c`/`#1e2127` backgrounds, off-white text, `#2a2f36` borders.

## State Management & Persistence

Maintain a central app state (via `useState`/`useReducer` or a small context):

- `activeCourseId` / `activeLessonId`
- `theme` ("light" | "dark")
- `viewport` ("desktop" | "mobile")
- `editorContentByLesson` — a map so each lesson remembers what the user typed
- `completedLessons` — set of lesson IDs marked done
- `expandedSections` — which sidebar groups are open

Persist `theme`, `viewport`, `completedLessons`, `activeLessonId`, and `editorContentByLesson` to **localStorage** (key like `codecrafters_state`), rehydrating on load. Debounce writes.

## The 14-Course Curriculum

Structure the content data as an array of course sections. Each lesson object contains: `id`, `title`, `filename`, `explanation` (rich text/markup), `task`, `starterCode`, and an optional `check` function/keyword to validate completion.

**Section 1 — HTML Fundamentals (4 lessons)**
1.1 Your First Tag · 1.2 Headings & Paragraphs · 1.3 Links & Images · 1.4 Lists & Structure

**Section 2 — CSS Styling (4 lessons)**
2.1 Selectors & Colors · 2.2 Box Model *(the reference lesson — padding task)* · 2.3 Flexbox Layout · 2.4 Fonts & Text Styling

**Section 3 — JavaScript Basics (4 lessons)**
3.1 Variables & Console · 3.2 Functions · 3.3 DOM Manipulation · 3.4 Events & Interaction

**Section 4 — Ultimate Test (2 capstone lessons rounding out to 14)**
4.1 Multi-Tech Mini-Site · 4.2 Interactive Capstone Challenge (combine HTML + CSS + JS into one working mini-app, e.g. a click counter or styled card)

For each lesson, write genuinely helpful, concise, slightly witty explanations and a clear starter-code stub with a `/* Add your code here */` style comment. Capstone lessons should provide a multi-file feel (HTML + CSS + JS combined in one editor with `<style>`/`<script>` tags).

## Personality & Playfulness

- Encouraging microcopy: success banners like "🎉 Nailed it!" or "You're crushing it!" when a task check passes.
- The strawberry mascot 🍓 can pop up occasionally with a tip.
- Empty/idle preview shows a friendly "Hit ▶ Run Code to see the magic ✨" placeholder.

## Functionality Summary

- Click a lesson → loads its explanation, starter code, and resets preview.
- Edit code with live syntax highlighting + line numbers.
- Run Code → renders into sandboxed iframe.
- Simple task validation (keyword/regex check on the code) → marks lesson complete + shows celebration.
- Theme toggle + viewport toggle both persist and apply globally/to the preview respectively.
- All progress survives page reload via localStorage.

## Styling Preferences

Clean, professional, generous whitespace, subtle shadows and borders, rounded corners (6–8px) on cards/buttons, smooth transitions. System font stack for UI text; monospace for code. Fully responsive: on narrow screens the split-pane stacks vertically and the sidebar collapses into a toggleable drawer.

## Footer

Include a small footer link: `<a href="/remix">Remix on Berrry</a>`.

Deliver everything as a **single self-contained HTML file** — no build step, all CDN dependencies (React, ReactDOM, Babel, optionally highlight.js) loaded via `<script>` tags — fully functional out of the box.

## About Berrry
Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain.

**Visit**: https://berrry.app

Transform your social media ideas into real web applications today.