# vishwajeet1298/carelonreactapp architecture

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

- Interactive diagram: https://gitdiagram.com/vishwajeet1298/carelonreactapp
- Repository: https://github.com/vishwajeet1298/carelonreactapp

## Overview

This is a React Native app with a Carelon wellbeing experience alongside product-search and component-demo screens. The main supported user journey begins at the app’s signup route, enters Carelon search, and can open a provider-search tab interface; the tree also contains provider-results and counselor-selection screens, but the sampled code does not establish how those screens are reached. Product search fetches and filters a remote catalog. The README is generic setup guidance, so product capabilities and wiring are inferred from the tree and sampled source only.

Main entry points: [`App.tsx`](https://github.com/vishwajeet1298/carelonreactapp/blob/main/App.tsx) (Navigation app), [`src/screens/ProviderSearch.js`](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProviderSearch.js) (Provider tabs), [`index.js`](https://github.com/vishwajeet1298/carelonreactapp/blob/main/index.js) (Native entry), [`src/screens/Search.js`](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/Search.js) (Carelon welcome)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_app["Navigation app<br/>[App.tsx]"]
  node_entry["Native entry<br/>[index.js]"]
end

subgraph group_carelon["Carelon experience"]
  node_orgsearch["Organization search<br/>[SearchCarelon.js]"]
  node_welcome["Carelon welcome<br/>[Search.js]"]
  node_provider_tabs["Provider tabs<br/>[ProviderSearch.js]"]
  node_counselor_search["Find counselor<br/>[FindCounselor.js]"]
  node_provider_results["Provider results"]
  node_counselor_select["Select counselor<br/>[SelectCounselor.js]"]
  node_carelon_home["Carelon screen<br/>[Carelon.js]"]
  node_services["Services screen<br/>[ImageScreen.js]"]
  node_resources["Resources screen"]
  node_menu["Menu screen<br/>[ListScreen.js]"]
  node_header["Carelon header<br/>[CarelonHeader.js]"]
  node_sidepanel["Side panel<br/>[SidePanel.js]"]
end

subgraph group_products["Product search"]
  node_products["Product listing"]
  node_product_search["Product search<br/>[ProductsSearch.js]"]
end

subgraph group_account["Account"]
  node_signup["Sign up<br/>[SignUpScreen.js]"]
  node_login["Login<br/>[Login.js]"]
  node_user_context["User context<br/>[UserContext.js]"]
end

node_user(("App user"))
node_catalog_api{{"Product catalog API"}}

node_user -->|"launches"| node_entry
node_entry -->|"registers"| node_app
node_app -->|"provides state"| node_user_context
node_app -->|"starts at"| node_signup
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_welcome
node_app -->|"routes to"| node_provider_tabs
node_app -->|"routes to"| node_products
node_app -->|"routes to"| node_product_search
node_welcome -->|"renders"| node_orgsearch
node_provider_tabs -->|"shows tab"| node_counselor_search
node_provider_tabs -->|"shows tab"| node_carelon_home
node_provider_tabs -->|"shows tab"| node_services
node_provider_tabs -->|"shows tab"| node_resources
node_provider_tabs -->|"shows tab"| node_menu
node_provider_tabs -->|"renders"| node_header
node_provider_tabs -->|"renders"| node_sidepanel
node_product_search -->|"fetches products"| node_catalog_api

click node_app "https://github.com/vishwajeet1298/carelonreactapp/blob/main/App.tsx"
click node_entry "https://github.com/vishwajeet1298/carelonreactapp/blob/main/index.js"
click node_orgsearch "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/SearchCarelon.js"
click node_welcome "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/Search.js"
click node_provider_tabs "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProviderSearch.js"
click node_counselor_search "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/FindCounselor.js"
click node_provider_results "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProviderSearchResults.js"
click node_counselor_select "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/SelectCounselor.js"
click node_carelon_home "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/Carelon.js"
click node_services "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ImageScreen.js"
click node_resources "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ComponentsScreen.js"
click node_menu "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ListScreen.js"
click node_header "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/CarelonHeader.js"
click node_sidepanel "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/SidePanel.js"
click node_products "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProductListingScreen.js"
click node_product_search "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProductsSearch.js"
click node_signup "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/SignUpScreen.js"
click node_login "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/Login.js"
click node_user_context "https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/UserContext.js"

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_entry,node_user toneBlue
class node_orgsearch,node_welcome,node_provider_tabs,node_counselor_search,node_provider_results,node_counselor_select,node_carelon_home,node_services,node_resources,node_menu,node_header,node_sidepanel toneAmber
class node_products,node_product_search,node_catalog_api toneMint
class node_signup,node_login,node_user_context toneRose
```

## Components

### App shell

- [Navigation app](https://github.com/vishwajeet1298/carelonreactapp/blob/main/App.tsx): `App.tsx`
- [Native entry](https://github.com/vishwajeet1298/carelonreactapp/blob/main/index.js): `index.js`

### Carelon experience

- [Organization search](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/SearchCarelon.js): `src/components/SearchCarelon.js`
- [Carelon welcome](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/Search.js): `src/screens/Search.js`
- [Provider tabs](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProviderSearch.js): `src/screens/ProviderSearch.js`
- [Find counselor](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/FindCounselor.js): `src/screens/FindCounselor.js`
- [Provider results](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProviderSearchResults.js): `src/screens/ProviderSearchResults.js`
- [Select counselor](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/SelectCounselor.js): `src/screens/SelectCounselor.js`
- [Carelon screen](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/Carelon.js): `src/screens/Carelon.js`
- [Services screen](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ImageScreen.js): `src/screens/ImageScreen.js`
- [Resources screen](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ComponentsScreen.js): `src/screens/ComponentsScreen.js`
- [Menu screen](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ListScreen.js): `src/screens/ListScreen.js`
- [Carelon header](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/CarelonHeader.js): `src/components/CarelonHeader.js`
- [Side panel](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/SidePanel.js): `src/components/SidePanel.js`

### Product search

- [Product listing](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProductListingScreen.js): `src/screens/ProductListingScreen.js`
- [Product search](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/ProductsSearch.js): `src/screens/ProductsSearch.js`

### Account

- [Sign up](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/screens/SignUpScreen.js): `src/screens/SignUpScreen.js`
- [Login](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/Login.js): `src/components/Login.js`
- [User context](https://github.com/vishwajeet1298/carelonreactapp/blob/main/src/components/UserContext.js): `src/components/UserContext.js`

### Other components

- **App user**
- **Product catalog API**

## Connections

- App user → Native entry: launches
- Native entry → Navigation app: registers
- Navigation app → User context: provides state
- Navigation app → Sign up: starts at
- Navigation app → Login: routes to
- Navigation app → Carelon welcome: routes to
- Navigation app → Provider tabs: routes to
- Navigation app → Product listing: routes to
- Navigation app → Product search: routes to
- Carelon welcome → Organization search: renders
- Provider tabs → Find counselor: shows tab
- Provider tabs → Carelon screen: shows tab
- Provider tabs → Services screen: shows tab
- Provider tabs → Resources screen: shows tab
- Provider tabs → Menu screen: shows tab
- Provider tabs → Carelon header: renders
- Provider tabs → Side panel: renders
- Product search → Product catalog API: fetches products