# jayeemmmm0930/capstone-generator architecture

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

- Interactive diagram: https://gitdiagram.com/jayeemmmm0930/capstone-generator
- Repository: https://github.com/jayeemmmm0930/capstone-generator

## Overview

This is a capstone-project idea generator: a user submits a keyword and optional category, receives an AI-generated title and planning details, and reviews them in a result card. The frontend page owns the result state; the API endpoint calls OpenAI and parses its JSON response. Source excerpts show the main request and rendering path, but not the header, hero, or footer implementations.

Main entry points: [`src/components/GeneratorForm.tsx`](https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/components/GeneratorForm.tsx) (Keyword form), [`src/pages/Index.tsx`](https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/pages/Index.tsx) (Generator page), [`api/generate.js`](https://github.com/jayeemmmm0930/capstone-generator/blob/main/api/generate.js) (Generation endpoint), [`src/App.tsx`](https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/App.tsx) (App routing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web experience"]
  node_main["React entry<br/>[main.tsx]"]
  node_app["App routing<br/>[App.tsx]"]
  node_page["Generator page<br/>[Index.tsx]"]
  node_form["Keyword form<br/>[GeneratorForm.tsx]"]
  node_result["Project result<br/>[TitleCard.tsx]"]
end

subgraph group_generation["Generation service"]
  node_api["Generation endpoint<br/>[generate.js]"]
end

subgraph group_integrations["External services"]
  node_openai{{"OpenAI"}}
  node_clipboard["Browser clipboard"]
end

node_user(("Project seeker"))

node_main -->|"renders"| node_app
node_app -->|"routes to"| node_page
node_page -->|"renders"| node_form
node_user -->|"enters request"| node_form
node_form -->|"posts keyword/category"| node_api
node_api -->|"requests generation"| node_openai
node_api -->|"returns project JSON"| node_form
node_form -->|"passes result"| node_page
node_page -->|"renders project details"| node_result
node_result -.->|"copies title"| node_clipboard

click node_main "https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/main.tsx"
click node_app "https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/App.tsx"
click node_page "https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/pages/Index.tsx"
click node_form "https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/components/GeneratorForm.tsx"
click node_result "https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/components/TitleCard.tsx"
click node_api "https://github.com/jayeemmmm0930/capstone-generator/blob/main/api/generate.js"

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_main,node_app,node_page,node_form,node_result toneBlue
class node_api toneAmber
class node_openai,node_clipboard toneMint
class node_user toneIndigo
```

## Components

### Web experience

- [React entry](https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/main.tsx): `src/main.tsx`
- [App routing](https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/App.tsx): `src/App.tsx`
- [Generator page](https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/pages/Index.tsx): `src/pages/Index.tsx`
- [Keyword form](https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/components/GeneratorForm.tsx): `src/components/GeneratorForm.tsx`
- [Project result](https://github.com/jayeemmmm0930/capstone-generator/blob/main/src/components/TitleCard.tsx): `src/components/TitleCard.tsx`

### Generation service

- [Generation endpoint](https://github.com/jayeemmmm0930/capstone-generator/blob/main/api/generate.js): `api/generate.js`

### External services

- **OpenAI**
- **Browser clipboard**

### Other components

- **Project seeker**

## Connections

- React entry → App routing: renders
- App routing → Generator page: routes to
- Generator page → Keyword form: renders
- Project seeker → Keyword form: enters request
- Keyword form → Generation endpoint: posts keyword/category
- Generation endpoint → OpenAI: requests generation
- Generation endpoint → Keyword form: returns project JSON
- Keyword form → Generator page: passes result
- Generator page → Project result: renders project details
- Project result → Browser clipboard: copies title