# gcarvajalp/react-native-lab architecture

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

- Interactive diagram: https://gitdiagram.com/gcarvajalp/react-native-lab
- Repository: https://github.com/gcarvajalp/react-native-lab

## Overview

This is a small React and TypeScript learning app, not a production workflow platform. The current entry point mounts App, which renders the users page; that page fetches ReqRes users and displays them using typed response contracts. The repository also contains counter and authentication examples plus standalone TypeScript examples; the login and TypeScript examples are not mounted by App in the inspected source. The graph shows only relationships supported by the excerpts or source index; the external API call is explicit in UsersPage.

Main entry points: [`src/components/UsersPage.tsx`](https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/UsersPage.tsx) (Users page), [`src/main.tsx`](https://github.com/gcarvajalp/react-native-lab/blob/main/src/main.tsx) (React entry), [`src/App.tsx`](https://github.com/gcarvajalp/react-native-lab/blob/main/src/App.tsx) (App shell), [`src/interfaces/reqres.interface.ts`](https://github.com/gcarvajalp/react-native-lab/blob/main/src/interfaces/reqres.interface.ts) (ReqRes contracts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Application runtime"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App shell<br/>[App.tsx]"]
  node_users["Users page<br/>[UsersPage.tsx]"]
  node_contracts["ReqRes contracts"]
end

subgraph group_examples["Interactive examples"]
  node_counter["Counter component<br/>[Counter.tsx]"]
  node_counterhook["Hook counter"]
  node_usecounter["Counter hook<br/>[useCounter.tsx]"]
  node_login["Login page<br/>[LoginPage.tsx]"]
  node_auth["Auth state<br/>[auth.store.ts]"]
end

subgraph group_learning["TypeScript examples"]
  node_basictypes["Basic types<br/>[BasicTypes.tsx]"]
  node_functions["Basic functions<br/>[BasicFunctions.tsx]"]
  node_objects["Object literals<br/>[ObjectLiterals.tsx]"]
end

node_browser(("Browser"))
node_reqres["ReqRes API"]

node_browser -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_users
node_users -->|"fetches users"| node_reqres
node_users -->|"types response"| node_contracts
node_counterhook -->|"uses hook"| node_usecounter
node_login -->|"reads and updates"| node_auth
node_contracts --> node_reqres

click node_entry "https://github.com/gcarvajalp/react-native-lab/blob/main/src/main.tsx"
click node_app "https://github.com/gcarvajalp/react-native-lab/blob/main/src/App.tsx"
click node_users "https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/UsersPage.tsx"
click node_contracts "https://github.com/gcarvajalp/react-native-lab/blob/main/src/interfaces/reqres.interface.ts"
click node_counter "https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/Counter.tsx"
click node_counterhook "https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/CounterWithHook.tsx"
click node_usecounter "https://github.com/gcarvajalp/react-native-lab/blob/main/src/hooks/useCounter.tsx"
click node_login "https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/LoginPage.tsx"
click node_auth "https://github.com/gcarvajalp/react-native-lab/blob/main/src/store/auth.store.ts"
click node_basictypes "https://github.com/gcarvajalp/react-native-lab/blob/main/src/typescript/BasicTypes.tsx"
click node_functions "https://github.com/gcarvajalp/react-native-lab/blob/main/src/typescript/BasicFunctions.tsx"
click node_objects "https://github.com/gcarvajalp/react-native-lab/blob/main/src/typescript/ObjectLiterals.tsx"

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_entry,node_app,node_users,node_contracts,node_browser toneBlue
class node_counter,node_counterhook,node_usecounter,node_login,node_auth toneAmber
class node_basictypes,node_functions,node_objects,node_reqres toneMint
```

## Components

### Application runtime

- [React entry](https://github.com/gcarvajalp/react-native-lab/blob/main/src/main.tsx): `src/main.tsx`
- [App shell](https://github.com/gcarvajalp/react-native-lab/blob/main/src/App.tsx): `src/App.tsx`
- [Users page](https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/UsersPage.tsx): `src/components/UsersPage.tsx`
- [ReqRes contracts](https://github.com/gcarvajalp/react-native-lab/blob/main/src/interfaces/reqres.interface.ts): `src/interfaces/reqres.interface.ts`

### Interactive examples

- [Counter component](https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/Counter.tsx): `src/components/Counter.tsx`
- [Hook counter](https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/CounterWithHook.tsx): `src/components/CounterWithHook.tsx`
- [Counter hook](https://github.com/gcarvajalp/react-native-lab/blob/main/src/hooks/useCounter.tsx): `src/hooks/useCounter.tsx`
- [Login page](https://github.com/gcarvajalp/react-native-lab/blob/main/src/components/LoginPage.tsx): `src/components/LoginPage.tsx`
- [Auth state](https://github.com/gcarvajalp/react-native-lab/blob/main/src/store/auth.store.ts): `src/store/auth.store.ts`

### TypeScript examples

- [Basic types](https://github.com/gcarvajalp/react-native-lab/blob/main/src/typescript/BasicTypes.tsx): `src/typescript/BasicTypes.tsx`
- [Basic functions](https://github.com/gcarvajalp/react-native-lab/blob/main/src/typescript/BasicFunctions.tsx): `src/typescript/BasicFunctions.tsx`
- [Object literals](https://github.com/gcarvajalp/react-native-lab/blob/main/src/typescript/ObjectLiterals.tsx): `src/typescript/ObjectLiterals.tsx`

### Other components

- **Browser**
- **ReqRes API**

## Connections

- Browser → React entry: opens app (evidence: `src/main.tsx`)
- React entry → App shell: renders (evidence: `src/main.tsx`)
- App shell → Users page: renders (evidence: `src/App.tsx`)
- Users page → ReqRes API: fetches users (evidence: `src/components/UsersPage.tsx`)
- Users page → ReqRes contracts: types response
- Hook counter → Counter hook: uses hook (evidence: `src/components/CounterWithHook.tsx`)
- Login page → Auth state: reads and updates (evidence: `src/components/LoginPage.tsx`)
- ReqRes contracts → ReqRes API