# aryanchopraa/crack-coder architecture

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

- Interactive diagram: https://gitdiagram.com/aryanchopraa/crack-coder
- Repository: https://github.com/aryanchopraa/crack-coder

## Overview

CrackCode is an Electron desktop assistant that captures coding-question screenshots, sends them to OpenAI for a language-specific solution, and displays the approach, code, and complexity. The main process owns shortcuts, screenshot handling, configuration persistence, and AI requests; a preload bridge exposes IPC to the React renderer. Users can also configure their API key and language. The README documents additional window controls and visibility shortcuts. Some screenshot-capture internals and IPC handler details are omitted from the excerpts, so the graph limits those relationships to the shown calls and channels.

Main entry points: [`src/main.ts`](https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts) (Main orchestration), [`src/renderer/App.tsx`](https://github.com/aryanchopraa/crack-coder/blob/main/src/renderer/App.tsx) (Assistant interface), [`src/services/openai.ts`](https://github.com/aryanchopraa/crack-coder/blob/main/src/services/openai.ts) (Solution generation), [`src/preload.ts`](https://github.com/aryanchopraa/crack-coder/blob/main/src/preload.ts) (IPC bridge)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop process"]
  node_main["Main orchestration<br/>[main.ts]"]
  node_capture["Screenshot capture<br/>[main.ts]"]
  node_screenshot_files[("Screenshot files<br/>[main.ts]")]
  node_config_store[("Configuration file<br/>[main.ts]")]
  node_bridge["IPC bridge<br/>[preload.ts]"]
end

subgraph group_renderer["User interface"]
  node_renderer_entry["Renderer bootstrap<br/>[index.tsx]"]
  node_app["Assistant interface<br/>[App.tsx]"]
  node_config_ui["Configuration form<br/>[ConfigScreen.tsx]"]
end

subgraph group_ai["AI solution"]
  node_ai_service["Solution generation<br/>[openai.ts]"]
end

node_user(("User"))
node_openai{{"OpenAI API"}}

node_user -->|"uses"| node_app
node_user -->|"invokes shortcuts"| node_main
node_main -->|"calls"| node_capture
node_main -->|"writes and deletes"| node_screenshot_files
node_ai_service -->|"reads"| node_screenshot_files
node_main -->|"reads and writes"| node_config_store
node_main -->|"requests analysis"| node_ai_service
node_ai_service -->|"requests completion"| node_openai
node_renderer_entry -->|"renders"| node_app
node_app -->|"calls exposed APIs"| node_bridge
node_bridge -->|"routes IPC"| node_main
node_main -->|"sends events"| node_bridge
node_app -->|"renders"| node_config_ui
node_config_ui -->|"submits configuration"| node_app
node_app -->|"displays solution"| node_user

click node_main "https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts"
click node_capture "https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts"
click node_screenshot_files "https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts"
click node_config_store "https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts"
click node_bridge "https://github.com/aryanchopraa/crack-coder/blob/main/src/preload.ts"
click node_renderer_entry "https://github.com/aryanchopraa/crack-coder/blob/main/src/renderer/index.tsx"
click node_app "https://github.com/aryanchopraa/crack-coder/blob/main/src/renderer/App.tsx"
click node_config_ui "https://github.com/aryanchopraa/crack-coder/blob/main/src/renderer/ConfigScreen.tsx"
click node_ai_service "https://github.com/aryanchopraa/crack-coder/blob/main/src/services/openai.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_main,node_capture,node_screenshot_files,node_config_store,node_bridge,node_user toneBlue
class node_renderer_entry,node_app,node_config_ui toneAmber
class node_ai_service,node_openai toneMint
```

## Components

### Desktop process

- [Main orchestration](https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts): `src/main.ts`
- [Screenshot capture](https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts): `src/main.ts`
- [Screenshot files](https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts): `src/main.ts`
- [Configuration file](https://github.com/aryanchopraa/crack-coder/blob/main/src/main.ts): `src/main.ts`
- [IPC bridge](https://github.com/aryanchopraa/crack-coder/blob/main/src/preload.ts): `src/preload.ts`

### User interface

- [Renderer bootstrap](https://github.com/aryanchopraa/crack-coder/blob/main/src/renderer/index.tsx): `src/renderer/index.tsx`
- [Assistant interface](https://github.com/aryanchopraa/crack-coder/blob/main/src/renderer/App.tsx): `src/renderer/App.tsx`
- [Configuration form](https://github.com/aryanchopraa/crack-coder/blob/main/src/renderer/ConfigScreen.tsx): `src/renderer/ConfigScreen.tsx`

### AI solution

- [Solution generation](https://github.com/aryanchopraa/crack-coder/blob/main/src/services/openai.ts): `src/services/openai.ts`

### Other components

- **User**
- **OpenAI API**

## Connections

- User → Assistant interface: uses (evidence: `README.md`)
- User → Main orchestration: invokes shortcuts (evidence: `README.md`)
- Main orchestration → Screenshot capture: calls (evidence: `src/main.ts`)
- Main orchestration → Screenshot files: writes and deletes (evidence: `src/main.ts`)
- Solution generation → Screenshot files: reads (evidence: `src/services/openai.ts`)
- Main orchestration → Configuration file: reads and writes (evidence: `src/main.ts`)
- Main orchestration → Solution generation: requests analysis (evidence: `src/main.ts`)
- Solution generation → OpenAI API: requests completion (evidence: `src/services/openai.ts`)
- Renderer bootstrap → Assistant interface: renders (evidence: `src/renderer/index.tsx`)
- Assistant interface → IPC bridge: calls exposed APIs (evidence: `src/renderer/App.tsx`)
- IPC bridge → Main orchestration: routes IPC (evidence: `src/preload.ts`)
- Main orchestration → IPC bridge: sends events (evidence: `src/main.ts`)
- Assistant interface → Configuration form: renders (evidence: `src/renderer/App.tsx`)
- Configuration form → Assistant interface: submits configuration (evidence: `src/renderer/ConfigScreen.tsx`)
- Assistant interface → User: displays solution (evidence: `src/renderer/App.tsx`)