# rouicezar/vibecoding-guide architecture

> Architecture diagram of the GitHub repository rouicezar/vibecoding-guide, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rouicezar/vibecoding-guide
- Repository: https://github.com/rouicezar/vibecoding-guide

## Overview

Vibe Guide is a bilingual beginner’s guide for turning an idea into an AI-assisted project. Its intended user journey runs from describing and validating an idea, through choosing tools and a technical approach, to planning, building, testing, delivery, and maintenance. Content modules cover the roadmap, prompts, troubleshooting, resource guidance, component examples, glossary, and project research; browser scripts provide navigation and local project drafts. The supplied tree omits the page and component source described in the README, so UI wiring and several runtime handoffs cannot be verified here.

Main entry points: [`src/data/learning.ts`](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning.ts) (Learning stages), [`src/data/idea-template.ts`](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/idea-template.ts) (Idea template), [`src/data/resource-tasks.ts`](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/resource-tasks.ts) (Resource tasks), [`src/data/component-fit.ts`](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/component-fit.ts) (Component fit)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Learning roadmap"]
  node_learning["Learning stages<br/>[learning.ts]"]
  node_branches["Learning branches"]
  node_support["Learning support"]
  node_prompts["Prompt review"]
end

subgraph group_planning["Project planning"]
  node_journey["Project journey<br/>[journey.ts]"]
  node_idea["Idea template<br/>[idea-template.ts]"]
  node_tasks["Resource tasks<br/>[resource-tasks.ts]"]
  node_tools["Tool guidance<br/>[tools.ts]"]
  node_stacks["Stack choices<br/>[stacks.ts]"]
  node_workflows["Project workflows"]
  node_actions["Action guides<br/>[action-guides.ts]"]
end

subgraph group_reference["Reference library"]
  node_resources["Resource guidance"]
  node_components["Component fit<br/>[component-fit.ts]"]
  node_demos["Component demos<br/>[advanced.js]"]
  node_glossary["Glossary catalog<br/>[catalog.ts]"]
  node_visuals["Term diagrams<br/>[visuals.ts]"]
  node_explore["Project research<br/>[index.ts]"]
end

subgraph group_browser["Browser features"]
  node_storage["Project drafts<br/>[project-storage.ts]"]
  node_localstorage[("Browser storage")]
  node_navigation["Site navigation<br/>[navigation.ts]"]
  node_templateui["Template interactions<br/>[templates.ts]"]
end

node_visitor(("Beginner"))
node_completion(("Built project"))

node_visitor -->|"explores roadmap"| node_learning
node_learning -->|"expands stages"| node_branches
node_learning -->|"offers recovery"| node_support
node_learning -->|"uses prompts"| node_prompts
node_visitor -->|"frames idea"| node_idea
node_idea -->|"informs planning"| node_journey
node_visitor -->|"compares options"| node_tools
node_visitor -->|"uses worksheets"| node_tasks
node_tasks -->|"assesses technology"| node_stacks
node_visitor -->|"plans project"| node_workflows
node_visitor -->|"follows actions"| node_actions
node_visitor -->|"consults guidance"| node_resources
node_visitor -->|"chooses components"| node_components
node_components -.->|"previews examples"| node_demos
node_visitor -->|"looks up terms"| node_glossary
node_glossary -->|"explains concepts"| node_visuals
node_visitor -->|"researches ideas"| node_explore
node_storage -->|"reads and writes"| node_localstorage
node_visitor -->|"saves or restores"| node_storage
node_navigation -->|"supports navigation"| node_visitor
node_visitor -->|"builds and delivers"| node_completion

click node_learning "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning.ts"
click node_branches "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning-branches.ts"
click node_support "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning-support.ts"
click node_prompts "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning-prompt-review.ts"
click node_journey "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/journey.ts"
click node_idea "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/idea-template.ts"
click node_tasks "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/resource-tasks.ts"
click node_tools "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/tools.ts"
click node_stacks "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/stacks.ts"
click node_workflows "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/project-workflows.ts"
click node_actions "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/action-guides.ts"
click node_resources "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/resource-guidance.ts"
click node_components "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/component-fit.ts"
click node_demos "https://github.com/rouicezar/vibecoding-guide/blob/main/src/demos/advanced.js"
click node_glossary "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/glossary/catalog.ts"
click node_visuals "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/glossary/visuals.ts"
click node_explore "https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/explore/index.ts"
click node_storage "https://github.com/rouicezar/vibecoding-guide/blob/main/src/scripts/project-storage.ts"
click node_navigation "https://github.com/rouicezar/vibecoding-guide/blob/main/src/scripts/navigation.ts"
click node_templateui "https://github.com/rouicezar/vibecoding-guide/blob/main/src/scripts/templates.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_learning,node_branches,node_support,node_prompts toneBlue
class node_journey,node_idea,node_tasks,node_tools,node_stacks,node_workflows,node_actions toneAmber
class node_resources,node_components,node_demos,node_glossary,node_visuals,node_explore toneMint
class node_storage,node_localstorage,node_navigation,node_templateui toneRose
class node_visitor,node_completion toneIndigo
```

## Components

### Learning roadmap

- [Learning stages](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning.ts): `src/data/learning.ts`
- [Learning branches](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning-branches.ts): `src/data/learning-branches.ts`
- [Learning support](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning-support.ts): `src/data/learning-support.ts`
- [Prompt review](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/learning-prompt-review.ts): `src/data/learning-prompt-review.ts`

### Project planning

- [Project journey](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/journey.ts): `src/data/journey.ts`
- [Idea template](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/idea-template.ts): `src/data/idea-template.ts`
- [Resource tasks](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/resource-tasks.ts): `src/data/resource-tasks.ts`
- [Tool guidance](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/tools.ts): `src/data/tools.ts`
- [Stack choices](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/stacks.ts): `src/data/stacks.ts`
- [Project workflows](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/project-workflows.ts): `src/data/project-workflows.ts`
- [Action guides](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/action-guides.ts): `src/data/action-guides.ts`

### Reference library

- [Resource guidance](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/resource-guidance.ts): `src/data/resource-guidance.ts`
- [Component fit](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/component-fit.ts): `src/data/component-fit.ts`
- [Component demos](https://github.com/rouicezar/vibecoding-guide/blob/main/src/demos/advanced.js): `src/demos/advanced.js`
- [Glossary catalog](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/glossary/catalog.ts): `src/data/glossary/catalog.ts`
- [Term diagrams](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/glossary/visuals.ts): `src/data/glossary/visuals.ts`
- [Project research](https://github.com/rouicezar/vibecoding-guide/blob/main/src/data/explore/index.ts): `src/data/explore/index.ts`

### Browser features

- [Project drafts](https://github.com/rouicezar/vibecoding-guide/blob/main/src/scripts/project-storage.ts): `src/scripts/project-storage.ts`
- **Browser storage**
- [Site navigation](https://github.com/rouicezar/vibecoding-guide/blob/main/src/scripts/navigation.ts): `src/scripts/navigation.ts`
- [Template interactions](https://github.com/rouicezar/vibecoding-guide/blob/main/src/scripts/templates.ts): `src/scripts/templates.ts`

### Other components

- **Beginner**
- **Built project**

## Connections

- Beginner → Learning stages: explores roadmap
- Learning stages → Learning branches: expands stages
- Learning stages → Learning support: offers recovery
- Learning stages → Prompt review: uses prompts
- Beginner → Idea template: frames idea
- Idea template → Project journey: informs planning
- Beginner → Tool guidance: compares options
- Beginner → Resource tasks: uses worksheets
- Resource tasks → Stack choices: assesses technology
- Beginner → Project workflows: plans project
- Beginner → Action guides: follows actions
- Beginner → Resource guidance: consults guidance
- Beginner → Component fit: chooses components
- Component fit → Component demos: previews examples
- Beginner → Glossary catalog: looks up terms
- Glossary catalog → Term diagrams: explains concepts
- Beginner → Project research: researches ideas
- Project drafts → Browser storage: reads and writes
- Beginner → Project drafts: saves or restores
- Site navigation → Beginner: supports navigation
- Beginner → Built project: builds and delivers