# nrrajes/ai-recipe-generator architecture

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

- Interactive diagram: https://gitdiagram.com/nrrajes/ai-recipe-generator
- Repository: https://github.com/nrrajes/ai-recipe-generator

## Overview

#### Purpose and Entry Points
This is an AI recipe generator structured as a Vite-served React/TypeScript client with an AWS Amplify backend. The browser application starts at `src/main.tsx`, renders its main UI from `src/App.tsx`, and is hosted through Vite’s HTML entry document at `index.html`.

#### Frontend Application Shell
The React UI is concentrated in `src/App.tsx`, with application-level styling in `src/App.css` and global styles in `src/index.css`. `src/main.tsx` is the client bootstrap boundary: it mounts React into the page and imports the app/style dependencies. There is no evidence in the tree of routing, multiple feature modules, or a separate API client layer.

#### Amplify Backend Composition
The backend is declared as Amplify infrastructure rather than a conventional server process. `amplify/backend.ts` is the composition entry point that assembles backend capabilities. Amplify’s own package and TypeScript setup are isolated under `amplify/package.json` and `amplify/tsconfig.json`, separating backend deployment definitions from the Vite client build.

#### Identity Boundary
Authentication is defined in `amplify/auth/resource.ts`. This is the backend identity boundary: frontend access to protected backend resources should be governed by the auth resource exported and composed through `amplify/backend.ts`. No client-side authentication integration files are present in `src`, so UI-level sign-in/session handling is either absent or embedded in the main app.

#### Data and AI Generation Stage
The data layer is defined in `amplify/data/resource.ts`. AI/Bedrock-specific behavior is isolated in `amplify/data/bedrock.js`, making it the likely integration boundary between application data operations and Amazon Bedrock recipe-generation calls. The expected control flow is: React user input → Amplify-backed data operation → Bedrock integration → generated recipe result returned to the UI.

#### Runtime and Deployment Boundaries
The client runs in the browser and is built/dev-served by Vite, configured in `vite.config.ts`; its root dependencies and scripts are in `package.json`. The backend targets AWS Amplify-managed infrastructure, with AWS authentication and Amazon Bedrock as material external services. The frontend/backend contract is represented by the Amplify data resource rather than an explicit REST server or standalone API process.

#### Current Architectural Maturity
The README is still primarily the stock React/Vite template and does not document application workflows, deployment, or model behavior. The repository’s meaningful domain architecture is therefore concentrated in the Amplify definitions—`amplify/backend.ts`, `amplify/auth/resource.ts`, `amplify/data/resource.ts`, and `amplify/data/bedrock.js`—while the client currently appears intentionally compact around `src/App.tsx`.

Main entry points: [`src/main.tsx`](https://github.com/nrrajes/ai-recipe-generator/blob/main/src/main.tsx) (Client bootstrap), [`amplify/backend.ts`](https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/backend.ts) (Backend composition), [`amplify/data/resource.ts`](https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/data/resource.ts) (Data resource), [`amplify/auth/resource.ts`](https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/auth/resource.ts) (Authentication resource)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Browser Client"]
  node_html["HTML entry<br/>Vite entry document<br/>[index.html]"]
  node_main["Client bootstrap<br/>React entry<br/>[main.tsx]"]
  node_app["Recipe generator UI<br/>React app<br/>[App.tsx]"]
  node_app_styles["App styles<br/>CSS<br/>[App.css]"]
  node_global_styles["Global styles<br/>CSS<br/>[index.css]"]
  node_vite{{"Vite build/dev server<br/>Build runtime<br/>[vite.config.ts]"}}
  node_root_package["Client dependencies<br/>npm manifest<br/>[package.json]"]
end

subgraph group_backend["Amplify Backend"]
  node_backend_composition{{"Backend composition<br/>Amplify entry<br/>[backend.ts]"}}
  node_auth_resource["Authentication resource<br/>Amplify auth<br/>[resource.ts]"]
  node_data_resource["Data resource<br/>Amplify data<br/>[resource.ts]"]
  node_bedrock_integration["Recipe AI integration<br/>Bedrock adapter<br/>[bedrock.js]"]
  node_backend_package["Backend dependencies<br/>npm manifest<br/>[package.json]"]
end

subgraph group_external["AWS Services"]
  node_amplify_auth(("AWS authentication<br/>Managed identity"))
  node_bedrock(("Amazon Bedrock<br/>AI generation service"))
  node_amplify_hosting{{"AWS Amplify<br/>Managed backend"}}
end

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_main -->|"imports"| node_app_styles
node_main -->|"imports"| node_global_styles
node_vite -->|"serves/builds"| node_html
node_root_package -->|"provides scripts/deps"| node_vite
node_app -->|"recipe input and results"| node_data_resource
node_backend_composition -->|"composes"| node_auth_resource
node_backend_composition -->|"composes"| node_data_resource
node_backend_package -->|"provides dependencies"| node_backend_composition
node_auth_resource -->|"provisions"| node_amplify_auth
node_data_resource -.->|"access governed by"| node_auth_resource
node_data_resource -->|"invokes"| node_bedrock_integration
node_bedrock_integration -->|"generates recipes with"| node_bedrock
node_backend_composition -->|"deploys through"| node_amplify_hosting

click node_html "https://github.com/nrrajes/ai-recipe-generator/blob/main/index.html"
click node_main "https://github.com/nrrajes/ai-recipe-generator/blob/main/src/main.tsx"
click node_app "https://github.com/nrrajes/ai-recipe-generator/blob/main/src/App.tsx"
click node_app_styles "https://github.com/nrrajes/ai-recipe-generator/blob/main/src/App.css"
click node_global_styles "https://github.com/nrrajes/ai-recipe-generator/blob/main/src/index.css"
click node_vite "https://github.com/nrrajes/ai-recipe-generator/blob/main/vite.config.ts"
click node_root_package "https://github.com/nrrajes/ai-recipe-generator/blob/main/package.json"
click node_backend_composition "https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/backend.ts"
click node_auth_resource "https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/auth/resource.ts"
click node_data_resource "https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/data/resource.ts"
click node_bedrock_integration "https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/data/bedrock.js"
click node_backend_package "https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/package.json"

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_html,node_main,node_app,node_app_styles,node_global_styles,node_vite,node_root_package toneBlue
class node_backend_composition,node_auth_resource,node_data_resource,node_bedrock_integration,node_backend_package toneAmber
class node_amplify_auth,node_bedrock,node_amplify_hosting toneMint
```

## Components

### Browser Client

Vite-served React application.

- [HTML entry](https://github.com/nrrajes/ai-recipe-generator/blob/main/index.html): Vite entry document · `index.html`
- [Client bootstrap](https://github.com/nrrajes/ai-recipe-generator/blob/main/src/main.tsx): React entry · Mounts React and imports app styles. · `src/main.tsx`
- [Recipe generator UI](https://github.com/nrrajes/ai-recipe-generator/blob/main/src/App.tsx): React app · Collects recipe input and displays generated results. · `src/App.tsx`
- [App styles](https://github.com/nrrajes/ai-recipe-generator/blob/main/src/App.css): CSS · `src/App.css`
- [Global styles](https://github.com/nrrajes/ai-recipe-generator/blob/main/src/index.css): CSS · `src/index.css`
- [Vite build/dev server](https://github.com/nrrajes/ai-recipe-generator/blob/main/vite.config.ts): Build runtime · `vite.config.ts`
- [Client dependencies](https://github.com/nrrajes/ai-recipe-generator/blob/main/package.json): npm manifest · `package.json`

### Amplify Backend

AWS infrastructure and application resource definitions.

- [Backend composition](https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/backend.ts): Amplify entry · Assembles deployed auth and data capabilities. · `amplify/backend.ts`
- [Authentication resource](https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/auth/resource.ts): Amplify auth · Governs access to protected backend resources. · `amplify/auth/resource.ts`
- [Data resource](https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/data/resource.ts): Amplify data · Frontend/backend contract for recipe operations. · `amplify/data/resource.ts`
- [Recipe AI integration](https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/data/bedrock.js): Bedrock adapter · Connects data operations to recipe generation. · `amplify/data/bedrock.js`
- [Backend dependencies](https://github.com/nrrajes/ai-recipe-generator/blob/main/amplify/package.json): npm manifest · `amplify/package.json`

### AWS Services

- **AWS authentication**: Managed identity
- **Amazon Bedrock**: AI generation service · Generates recipe content.
- **AWS Amplify**: Managed backend · Deploys and hosts declared backend resources.

## Connections

- HTML entry → Client bootstrap: loads
- Client bootstrap → Recipe generator UI: mounts
- Client bootstrap → App styles: imports
- Client bootstrap → Global styles: imports
- Vite build/dev server → HTML entry: serves/builds
- Client dependencies → Vite build/dev server: provides scripts/deps
- Recipe generator UI → Data resource: recipe input and results
- Backend composition → Authentication resource: composes
- Backend composition → Data resource: composes
- Backend dependencies → Backend composition: provides dependencies
- Authentication resource → AWS authentication: provisions
- Data resource → Authentication resource: access governed by
- Data resource → Recipe AI integration: invokes
- Recipe AI integration → Amazon Bedrock: generates recipes with
- Backend composition → AWS Amplify: deploys through