# sahrior/cryptex architecture

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

- Interactive diagram: https://gitdiagram.com/sahrior/cryptex
- Repository: https://github.com/sahrior/cryptex

## Overview

1. **Repository shape**
   - This is a **single-page React dashboard** for crypto market data, built as a **client-side app** with **Vite**. There is no backend service in the repo; all market data comes from an external API.

2. **App bootstrap**
   - `index.html` provides the mount point.
   - `src/main.jsx` is the entry entrypoint that renders `App.jsx` into the DOM.
   - `src/index.css` is the global styling layer for the entire UI.

3. **Top-level composition**
   - `src/App.jsx` is the app shell that ties the pages together.
   - Given the presence of `Home.jsx` and `CoinDetail.jsx`, the app is organized around **two main screens**: a market overview and a coin-specific detail view.

4. **Page boundaries**
   - `src/pages/Home.jsx` is the list/dashboard view: it likely handles the main market table/cards, search, sorting, and summary display.
   - `src/pages/CoinDetail.jsx` is the drill-down view for a single cryptocurrency, where price trend and deeper statistics are shown.

5. **Reusable UI components**
   - `src/components/CryptoCard.jsx` is a shared presentational component for displaying coin summary data.
   - This suggests the home/list view is composed from repeated cards or rows rather than hardcoded markup.

6. **API boundary**
   - `src/API/coinGecko.js` is the dedicated integration layer for **CoinGecko**.
   - This isolates HTTP/fetch logic and API endpoint details from the React pages, making the UI depend on a small data-access module instead of calling the API directly everywhere.

7. **Data formatting layer**
   - `src/utils/formatter.js` handles display-oriented transformations such as currency/number formatting.
   - This is an important boundary because it keeps raw API data separate from user-facing labels and localized numeric presentation.

8. **Data flow through the app**
   - The usual flow is: **CoinGecko API → API module → page component state → shared card/detail components → formatted UI**.
   - Home likely consumes a broader market list, while CoinDetail consumes coin-specific metadata and historical trend data.

9. **Feature-driven architecture**
   - The README describes **search, sorting, time-range trends, and responsive charts**. Architecturally, that means the app is mostly a **data-fetch + transform + render** pipeline, with interactive filtering/sorting in the page components.
   - Chart rendering is part of the page-level presentation, not a separate service boundary.

10. **Static assets and public files**
   - `src/assets` holds imported images/icons used by components.
   - `public` is for static files served directly by Vite without bundling.

11. **Technology boundaries**
   - The app is built with **React + JavaScript + CSS** and optimized for fast local development and production bundling via **Vite**.
   - No server, database, authentication, or persistent storage layer is present in the repo structure.

12. **Architecture summary**
   - The repo is a **frontend-only crypto dashboard** with a clean separation between:
     - **API access** (`src/API`)
     - **page-level orchestration** (`src/pages`)
     - **reusable display components** (`src/components`)
     - **display formatting helpers** (`src/utils`)
     - **global app bootstrap/styling** (`main.jsx`, `App.jsx`, `index.css`)

Main entry points: [`src/App.jsx`](https://github.com/sahrior/cryptex/blob/main/src/App.jsx) (App Shell), [`src/pages/Home.jsx`](https://github.com/sahrior/cryptex/blob/main/src/pages/Home.jsx) (Home), [`src/pages/CoinDetail.jsx`](https://github.com/sahrior/cryptex/blob/main/src/pages/CoinDetail.jsx) (Coin Detail), [`src/utils/formatter.js`](https://github.com/sahrior/cryptex/blob/main/src/utils/formatter.js) (Formatter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bootstrap["Bootstrap"]
  node_index_html["Index HTML<br/>vite mount<br/>[index.html]"]
  node_main_jsx["Main<br/>react entry<br/>[main.jsx]"]
  node_app_jsx["App Shell<br/>react shell<br/>[App.jsx]"]
  node_index_css["Global CSS<br/>style layer<br/>[index.css]"]
end

subgraph group_screens["Screens"]
  node_home_page["Home<br/>market dashboard<br/>[Home.jsx]"]
  node_coin_detail_page["Coin Detail<br/>detail view<br/>[CoinDetail.jsx]"]
end

subgraph group_data["Data"]
  node_coin_api["CoinGecko API<br/>api client<br/>[coinGecko.js]"]
  node_formatter["Formatter<br/>display utils<br/>[formatter.js]"]
end

subgraph group_shared["Shared UI"]
  node_crypto_card["Crypto Card<br/>presentational card<br/>[CryptoCard.jsx]"]
end

subgraph group_assets["Assets"]
  node_assets_dir["Assets"]
  node_public_dir["Public<br/>static files"]
end

node_index_html -->|"mounts"| node_main_jsx
node_main_jsx -->|"renders"| node_app_jsx
node_app_jsx -->|"composes"| node_home_page
node_app_jsx -->|"composes"| node_coin_detail_page
node_app_jsx -->|"loads"| node_index_css
node_home_page -->|"fetches"| node_coin_api
node_coin_detail_page -->|"fetches"| node_coin_api
node_home_page -->|"uses"| node_crypto_card
node_coin_detail_page -->|"formats"| node_formatter
node_home_page -->|"formats"| node_formatter
node_crypto_card -->|"formats"| node_formatter
node_home_page -->|"uses"| node_assets_dir
node_coin_detail_page -->|"uses"| node_assets_dir
node_app_jsx -.->|"serves"| node_public_dir

click node_index_html "https://github.com/sahrior/cryptex/blob/main/index.html"
click node_main_jsx "https://github.com/sahrior/cryptex/blob/main/src/main.jsx"
click node_app_jsx "https://github.com/sahrior/cryptex/blob/main/src/App.jsx"
click node_index_css "https://github.com/sahrior/cryptex/blob/main/src/index.css"
click node_home_page "https://github.com/sahrior/cryptex/blob/main/src/pages/Home.jsx"
click node_coin_detail_page "https://github.com/sahrior/cryptex/blob/main/src/pages/CoinDetail.jsx"
click node_coin_api "https://github.com/sahrior/cryptex/blob/main/src/API/coinGecko.js"
click node_formatter "https://github.com/sahrior/cryptex/blob/main/src/utils/formatter.js"
click node_crypto_card "https://github.com/sahrior/cryptex/blob/main/src/components/CryptoCard.jsx"
click node_assets_dir "https://github.com/sahrior/cryptex/tree/main/src/assets"
click node_public_dir "https://github.com/sahrior/cryptex/tree/main/public"

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_index_html,node_main_jsx,node_app_jsx,node_index_css toneBlue
class node_home_page,node_coin_detail_page toneAmber
class node_coin_api,node_formatter toneMint
class node_crypto_card toneRose
class node_assets_dir,node_public_dir toneIndigo
```

## Components

### Bootstrap

Vite entry and global app shell

- [Index HTML](https://github.com/sahrior/cryptex/blob/main/index.html): vite mount · Document shell and mount point · `index.html`
- [Main](https://github.com/sahrior/cryptex/blob/main/src/main.jsx): react entry · Renders the React app into the DOM · `src/main.jsx`
- [App Shell](https://github.com/sahrior/cryptex/blob/main/src/App.jsx): react shell · Top-level composition and screen wiring · `src/App.jsx`
- [Global CSS](https://github.com/sahrior/cryptex/blob/main/src/index.css): style layer · Application-wide styling · `src/index.css`

### Screens

Top-level page components and routed views

- [Home](https://github.com/sahrior/cryptex/blob/main/src/pages/Home.jsx): market dashboard · Overview screen for market browsing and filtering · `src/pages/Home.jsx`
- [Coin Detail](https://github.com/sahrior/cryptex/blob/main/src/pages/CoinDetail.jsx): detail view · Single-coin drill-down with price and stats · `src/pages/CoinDetail.jsx`

### Data

API access and display formatting

- [CoinGecko API](https://github.com/sahrior/cryptex/blob/main/src/API/coinGecko.js): api client · Fetches market and coin data from CoinGecko · `src/API/coinGecko.js`
- [Formatter](https://github.com/sahrior/cryptex/blob/main/src/utils/formatter.js): display utils · Formats currency, numbers, and labels · `src/utils/formatter.js`

### Shared UI

Reusable presentation components

- [Crypto Card](https://github.com/sahrior/cryptex/blob/main/src/components/CryptoCard.jsx): presentational card · Reusable coin summary component · `src/components/CryptoCard.jsx`

### Assets

Static assets and public files

- [Assets](https://github.com/sahrior/cryptex/tree/main/src/assets): static assets · Imported images and icons · `src/assets`
- [Public](https://github.com/sahrior/cryptex/tree/main/public): static files · Files served directly by Vite · `public`

## Connections

- Index HTML → Main: mounts · Provides the root container for React
- Main → App Shell: renders · Bootstraps the application shell
- App Shell → Home: composes · Wires the main overview screen
- App Shell → Coin Detail: composes · Wires the coin drill-down screen
- App Shell → Global CSS: loads · Applies global styling to the app
- Home → CoinGecko API: fetches · Loads market data through the API layer
- Coin Detail → CoinGecko API: fetches · Loads coin detail and trend data through the API layer
- Home → Crypto Card: uses · Renders market summaries through shared cards
- Coin Detail → Formatter: formats · Converts raw values into user-facing display text
- Home → Formatter: formats · Formats list values and summaries
- Crypto Card → Formatter: formats · Displays normalized coin values
- Home → Assets: uses · Pulls in imported visuals for the dashboard
- Coin Detail → Assets: uses · Uses imported visuals in the detail view
- App Shell → Public: serves · Static files are available to the client app