# ankit0514/cryptolite---a-trading-platform architecture

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

- Interactive diagram: https://gitdiagram.com/ankit0514/cryptolite---a-trading-platform
- Repository: https://github.com/ankit0514/cryptolite---a-trading-platform

## Overview

Cryptolite is a React Native crypto-tracking and trading simulator. Users enter through mock authentication, browse a simulated market, inspect a coin, buy or sell with virtual funds, and review portfolio holdings; a watchlist is also exposed in navigation. The sampled detail and store code confirms trade calculations and in-memory state. README capabilities and the file tree identify other screens, but their internal wiring was not sampled, so those connections are limited to documented navigation and product roles.

Main entry points: [`src/navigation/RootNavigator.tsx`](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/navigation/RootNavigator.tsx) (Root navigator), [`src/screens/DetailScreen.tsx`](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/DetailScreen.tsx) (Coin details), [`App.tsx`](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/App.tsx) (App shell), [`src/screens/MarketScreen.tsx`](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/MarketScreen.tsx) (Market screen)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_app["App shell<br/>[App.tsx]"]
  node_root["App registration<br/>[index.ts]"]
  node_button["Action button<br/>[Button.tsx]"]
  node_theme["Theme tokens<br/>[theme.ts]"]
end

subgraph group_navigation["Navigation and access"]
  node_navigator["Root navigator<br/>[RootNavigator.tsx]"]
  node_login["Login screen<br/>[LoginScreen.tsx]"]
  node_placeholder["Placeholder screen"]
  node_profile["Profile screen<br/>[ProfileScreen.tsx]"]
end

subgraph group_market["Market discovery"]
  node_market["Market screen<br/>[MarketScreen.tsx]"]
  node_watchlist["Watchlist screen"]
  node_coinrow["Coin row<br/>[CoinRow.tsx]"]
end

subgraph group_trading["Trading and portfolio"]
  node_detail["Coin details<br/>[DetailScreen.tsx]"]
  node_portfolio["Portfolio screen"]
end

subgraph group_state["Client state"]
  node_auth[("Mock auth state<br/>[useAuthStore.ts]")]
  node_marketstate[("Simulated prices<br/>[useMarketStore.ts]")]
  node_portfoliostate[("Virtual holdings")]
end

node_user(("User"))

node_user -->|"opens"| node_app
node_root -->|"registers"| node_app
node_app -->|"renders"| node_navigator
node_navigator -->|"reads auth"| node_auth
node_navigator -->|"routes unauthenticated"| node_login
node_navigator -->|"routes market"| node_market
node_navigator -->|"routes watchlist"| node_watchlist
node_navigator -->|"routes portfolio"| node_portfolio
node_navigator -->|"routes details"| node_detail
node_navigator -->|"routes profile tab"| node_placeholder
node_login -->|"authenticates"| node_auth
node_market -->|"reads prices"| node_marketstate
node_market -->|"renders coins"| node_coinrow
node_detail -->|"reads coin data"| node_marketstate
node_detail -->|"buys and sells"| node_portfoliostate
node_portfolio -->|"reads holdings"| node_portfoliostate
node_profile -->|"logs out"| node_auth
node_profile -->|"reads balance"| node_portfoliostate
node_detail -->|"renders actions"| node_button
node_app -->|"uses styling"| node_theme

click node_app "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/App.tsx"
click node_root "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/index.ts"
click node_navigator "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/navigation/RootNavigator.tsx"
click node_login "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/LoginScreen.tsx"
click node_auth "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/store/useAuthStore.ts"
click node_market "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/MarketScreen.tsx"
click node_watchlist "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/WatchlistScreen.tsx"
click node_detail "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/DetailScreen.tsx"
click node_coinrow "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/components/CoinRow.tsx"
click node_marketstate "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/store/useMarketStore.ts"
click node_portfolio "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/PortfolioScreen.tsx"
click node_portfoliostate "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/store/usePortfolioStore.ts"
click node_placeholder "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/PlaceholderScreen.tsx"
click node_profile "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/ProfileScreen.tsx"
click node_button "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/components/Button.tsx"
click node_theme "https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/theme/theme.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_app,node_root,node_button,node_theme,node_user toneBlue
class node_navigator,node_login,node_placeholder,node_profile toneAmber
class node_market,node_watchlist,node_coinrow toneMint
class node_detail,node_portfolio toneRose
class node_auth,node_marketstate,node_portfoliostate toneIndigo
```

## Components

### App entry

- [App shell](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/App.tsx): `App.tsx`
- [App registration](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/index.ts): `index.ts`
- [Action button](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/components/Button.tsx): `src/components/Button.tsx`
- [Theme tokens](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/theme/theme.ts): `src/theme/theme.ts`

### Navigation and access

- [Root navigator](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/navigation/RootNavigator.tsx): `src/navigation/RootNavigator.tsx`
- [Login screen](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/LoginScreen.tsx): `src/screens/LoginScreen.tsx`
- [Placeholder screen](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/PlaceholderScreen.tsx): `src/screens/PlaceholderScreen.tsx`
- [Profile screen](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/ProfileScreen.tsx): `src/screens/ProfileScreen.tsx`

### Market discovery

- [Market screen](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/MarketScreen.tsx): `src/screens/MarketScreen.tsx`
- [Watchlist screen](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/WatchlistScreen.tsx): `src/screens/WatchlistScreen.tsx`
- [Coin row](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/components/CoinRow.tsx): `src/components/CoinRow.tsx`

### Trading and portfolio

- [Coin details](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/DetailScreen.tsx): `src/screens/DetailScreen.tsx`
- [Portfolio screen](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/screens/PortfolioScreen.tsx): `src/screens/PortfolioScreen.tsx`

### Client state

- [Mock auth state](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/store/useAuthStore.ts): `src/store/useAuthStore.ts`
- [Simulated prices](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/store/useMarketStore.ts): `src/store/useMarketStore.ts`
- [Virtual holdings](https://github.com/ankit0514/cryptolite---a-trading-platform/blob/main/src/store/usePortfolioStore.ts): `src/store/usePortfolioStore.ts`

### Other components

- **User**

## Connections

- User → App shell: opens
- App registration → App shell: registers
- App shell → Root navigator: renders
- Root navigator → Mock auth state: reads auth
- Root navigator → Login screen: routes unauthenticated
- Root navigator → Market screen: routes market
- Root navigator → Watchlist screen: routes watchlist
- Root navigator → Portfolio screen: routes portfolio
- Root navigator → Coin details: routes details
- Root navigator → Placeholder screen: routes profile tab
- Login screen → Mock auth state: authenticates
- Market screen → Simulated prices: reads prices
- Market screen → Coin row: renders coins
- Coin details → Simulated prices: reads coin data
- Coin details → Virtual holdings: buys and sells
- Portfolio screen → Virtual holdings: reads holdings
- Profile screen → Mock auth state: logs out
- Profile screen → Virtual holdings: reads balance
- Coin details → Action button: renders actions
- App shell → Theme tokens: uses styling