Dojo Build Quest

DevHub Construction Module

A meta-dojo page for building the Dojo DevHub itself. This module turns the setup process into a playable quest: define the stack, build the first screen, establish the panel language, and deploy the first usable control room.

Core Objective

Build a custom HTML DevHub that feels like a real game screen, serves as your internal overworld map, and gives fast access to modules, components, experiments, and practical build steps.

Carrd = Public Hub DevHub = Internal Overworld GitHub = Code Home Cloudflare Pages = Hosting JSON = First Data Source

Current Focus

  • Start with one repo and one deployable screen
  • Use one strong panel component
  • Make the illusion of a game UI with simple web tech
  • Delay backend complexity until needed

Quest Progress

Check off the build tasks and watch the module update your progress.

Interactive
Current Objective
Start the quest by completing the first unchecked task.
Completion
0%
Tasks Done
0/0
XP Earned
0 XP

Orientation

What this module is doing and why the structure works.

Framework

LEGO Model

  • Modules = LEGO kits
  • Components = LEGO bricks
  • DevHub = overworld map / control panel
  • Carrd = front door / public navigation

Construction Principle

Build the small statue first. One believable screen, one reusable panel, one clean deploy. Then expand, refine, and unify the world.

Carrd→ DevHub→ Modules→ Components→ Data-driven screens

Minimum Stack

What you need right now and what can wait.

Minimum Requirements

GitHub Required

  • Store HTML, CSS, JS
  • Store JSON data files
  • Keep module repos separate

Cloudflare Pages Required

  • Host the DevHub
  • Deploy module repos
  • Add Functions later only if needed

Carrd Required

  • Public hub
  • Simple navigation
  • Subtle footer link to DevHub if desired

Use Now

  • 1 repo
  • 1 page
  • 1 panel design
  • 4 links
  • Optional placeholder icons

Use Later

  • Cloudflare KV / D1
  • Advanced persistence
  • Shared component system across repos
  • More complex map interactions

Build Phases

The whole journey compressed into manageable layers.

Roadmap

Phase 1 — Functional Skeleton

  • Create the repo
  • Make a full-screen index page
  • Add 4 panels
  • Make the links work

Phase 2 — Cohesive UI

  • Set fonts, spacing, borders, glow
  • Create one strong panel shell
  • Make it feel like one world

Phase 3 — Atmosphere

  • Add textures and background art
  • Add icons and room flavor
  • Improve hover / focus states

Phase 4 — Expansion

  • Add modules page
  • Add components page
  • Add JSON-driven content if useful

Step-by-Step Actions

This is the practical execution layer.

Action Plan
Step 1 — Create the DevHub repo
Step 2 — Build the first screen
Step 3 — Create one panel shell
Step 4 — Style it to feel like a game
Step 5 — Deploy it

Asset Requirements

Only the essentials. Start with placeholders first.

Art Direction

Need First

Helpful Next

  • Paper / metal / stone textures
  • Panel corner ornaments
  • Module-specific icons
  • Glow / light overlays

Final Polish

  • Room-specific art
  • Decorative dividers
  • Unique panel states
  • A fully cohesive visual language
Starter idea: assets/ background-devhub.jpg icon-forge.png icon-kanji.png icon-dashboard.png icon-components.png

Checklist / Stop List / Win Conditions

Use this like a build ritual.

Execution

Minimum Build Checklist

Stop List

  • Stop gathering endless assets first
  • Stop trying to design every room at once
  • Stop waiting for perfect art
  • Stop adding backend before the first screen works

First Victory Condition

  • The DevHub feels like selecting destinations, not clicking plain links
  • It is live on its own subdomain
  • You can use it to access your real module work

Repo Structures

Clean starting skeletons.

Architecture

DevHub Repo

dojo-devhub/ index.html style.css script.js modules.html # optional later components.html # optional later assets/ background-devhub.jpg icons/

Kanji Module Repo

dojo-kanji/ index.html style.css script.js data/ kanji.json passages.json components/ card.js worksheet.js assets/ icons/ textures/

Milestones

Use these as progression markers.

Progression

Milestone 1 — Screen Exists

A raw but functional DevHub page is on screen locally.

Milestone 2 — Screen Feels Good

Panels, spacing, colors, and hover states create a game-like feel.

Milestone 3 — Screen Is Live

The DevHub is deployed and reachable from its subdomain.

Milestone 4 — Screen Becomes Useful

You use it to launch real modules and build with less friction.

DevHub Construction Module • Build one believable screen first.