# yogesh9891/portfolio-card-app architecture

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

- Interactive diagram: https://gitdiagram.com/yogesh9891/portfolio-card-app
- Repository: https://github.com/yogesh9891/portfolio-card-app

## Overview

1. **Overall shape**
   - This is a **React Native mobile app** with a shared JavaScript/TypeScript codebase and thin native shells for **Android** and **iOS**.
   - The app is centered around a “brand card” / digital identity flow: login, verification, profile/card management, connections, sharing, QR code, and related onboarding screens.

2. **App entry and composition**
   - `index.js` and `App.tsx` are the main runtime entry points.
   - `App.tsx` is the top-level composition layer that likely wires together global providers, navigation, and app-wide styling.

3. **Navigation architecture**
   - Navigation is split into:
     - `src/navigations/Stack/UnAuthorisedStack.tsx` for pre-login/onboarding flows.
     - `src/navigations/Stack/AuthorisedStack.tsx` for authenticated users.
     - `src/navigations/tab/BottomTabNav.tsx` for the main authenticated tab bar.
   - `src/navigations/Stack/Root.tsx` appears to be the decision point that switches between authenticated and unauthenticated app shells.

4. **State management boundaries**
   - The repo uses **both Redux and React Context**, which suggests a mixed state strategy:
     - Redux under `src/Redux` for shared app state.
     - Contexts under `context/` for focused cross-cutting state like **card**, **role**, and **token**.
   - This indicates auth/session and selected card data are treated as first-class global concerns.

5. **Feature and screen layer**
   - Most user-facing flows live in `src/components/`, despite the name; this directory is effectively the **screen/feature layer**.
   - Key functional areas visible from filenames:
     - authentication and verification: `Login`, `LoginEmail`, `OtpVerify`, `OtpVerifyEmail`, `Verfication`
     - profile/account: `Profile`, `EditProfile`, `Setting`
     - card lifecycle: `AddCard`, `EditCard`, `DeleteList`, `CopyCard`, `CardList`, `Preview`
     - connections/sharing: `AddConnection`, `Connections`, `ViewConnection`, `Share`
     - QR/media: `QRCode`, `CameraCard`, `BrandProduct`
     - onboarding/help/info: `SplashScreen`, `Interoscreen`, `HowtoTap`, `PrivacyPolicy`, `Insight`

6. **Reusable UI and presentation pieces**
   - Smaller UI units are separated from screens, for example `ListItem`, `Loading`, `Header`, and styling helpers in `src/stylecomponents/style.tsx`.
   - This suggests screen components assemble shared presentational pieces rather than duplicating UI logic.

7. **Service/data access layer**
   - `src/services/` is the app’s data boundary.
   - Service modules are organized by domain: `card.service.ts`, `connection.service.ts`, `users.service.ts`, `verification.service.ts`, `category.service.ts`, `url.service.ts`, `index.service.ts`.
   - These files likely wrap all backend/API communication, keeping network concerns out of screens and navigation.

8. **Authentication and session flow**
   - `src/utils/auth.ts` and `src/utils/constant.ts` likely hold token/session helpers and shared app constants.
   - The presence of `TokenContext`, `RoleContext`, and auth-related stacks indicates the app gates navigation and feature access based on session/role state.

9. **Platform-specific integration**
   - Native Android and iOS projects are fully present under `android/` and `ios/`.
   - Android includes `google-services.json` and Flipper setup classes, which implies native service configuration and debug tooling are part of the build.
   - Asset linking is explicitly configured via `link-assets-manifest.json` files, and fonts/images are bundled locally.

10. **Assets and branding**
   - Static resources are organized under `assets/fonts` and `assets/img`, with matching Android/iOS asset integration.
   - This matters architecturally because much of the UI branding and iconography is packaged locally rather than fetched remotely.

11. **Testing and quality tooling**
   - Jest is configured with a small test footprint visible in `__tests__/App.test.tsx`.
   - Tooling includes ESLint, Prettier, Babel, Metro, and React Native config files, which shape the developer workflow but do not introduce separate runtime subsystems.

12. **Likely runtime data flow**
   - User launches the app -> splash/onboarding -> auth/verification screens if no session -> root navigator selects the authorized shell once token/state is available -> bottom tabs and feature screens -> screens call service modules -> shared state is updated through Redux/Context -> UI reacts to the updated state.
   - That is the main architectural loop to capture in a diagram.

Main entry points: [`src/navigations/Stack/Root.tsx`](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/Stack/Root.tsx) (Root nav), [`src/components/Home.tsx`](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Home.tsx) (Home), [`App.tsx`](https://github.com/yogesh9891/portfolio-card-app/blob/main/App.tsx) (App), [`src/navigations/Stack/UnAuthorisedStack.tsx`](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/Stack/UnAuthorisedStack.tsx) (Guest stack)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_js["JS app"]
  node_index["Entry<br/>[index.js]"]
  node_app["App<br/>root composition<br/>[App.tsx]"]
  node_rootnav["Root nav<br/>navigator switch<br/>[Root.tsx]"]
  node_unauth["Guest stack<br/>navigator stack"]
  node_auth["Auth stack<br/>navigator stack"]
  node_tabs["Tabs<br/>tab navigator<br/>[BottomTabNav.tsx]"]
  node_services{{"Services<br/>api boundary<br/>[index.service.ts]"}}
  node_authutil["Auth util<br/>session helper<br/>[auth.ts]"]
  node_styles["Styles<br/>[style.tsx]"]
end

subgraph group_state["State"]
  node_redux[("Redux<br/>global store<br/>[Store.js]")]
  node_cardctx(("Card ctx<br/>context<br/>[CardContext.tsx]"))
  node_tokenctx(("Token ctx<br/>context<br/>[TokenContext.tsx]"))
  node_rolectx(("Role ctx<br/>context<br/>[RoleContext.tsx]"))
end

subgraph group_features["Features"]
  node_login["Login<br/>auth screen<br/>[Login.tsx]"]
  node_verify["Verify<br/>auth screen<br/>[OtpVerify.tsx]"]
  node_home["Home<br/>main screen<br/>[Home.tsx]"]
  node_profile["Profile<br/>[Profile.tsx]"]
  node_cardflow["Card flow<br/>card management<br/>[AddCard.tsx]"]
  node_connect["Connections<br/>social sharing<br/>[Connections.tsx]"]
  node_qr["QR tools<br/>sharing screen<br/>[QRCode.tsx]"]
end

subgraph group_native["Native shells"]
  node_android["Android<br/>native app"]
  node_ios["iOS<br/>native app<br/>[AppDelegate.mm]"]
end

subgraph group_infra["Infra"]
  node_assets["Assets"]
end

node_index -->|"boots"| node_app
node_app -->|"composes"| node_rootnav
node_rootnav -->|"reads session"| node_tokenctx
node_rootnav -->|"reads role"| node_rolectx
node_rootnav -->|"unauthorised"| node_unauth
node_rootnav -->|"authorised"| node_auth
node_unauth -->|"starts"| node_login
node_unauth -->|"verifies"| node_verify
node_auth -->|"main shell"| node_tabs
node_tabs -->|"opens"| node_home
node_tabs -->|"opens"| node_profile
node_home -->|"routes to"| node_cardflow
node_home -->|"routes to"| node_connect
node_home -->|"routes to"| node_qr
node_profile -->|"uses"| node_cardctx
node_cardflow -->|"updates"| node_cardctx
node_connect -->|"fetches"| node_services
node_cardflow -->|"fetches"| node_services
node_verify -->|"fetches"| node_services
node_login -->|"checks"| node_authutil
node_app -->|"provides store"| node_redux
node_home -->|"renders with"| node_styles
node_connect -->|"renders with"| node_styles
node_android -->|"bundles"| node_assets
node_ios -->|"bundles"| node_assets

click node_index "https://github.com/yogesh9891/portfolio-card-app/blob/main/index.js"
click node_app "https://github.com/yogesh9891/portfolio-card-app/blob/main/App.tsx"
click node_rootnav "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/Stack/Root.tsx"
click node_unauth "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/Stack/UnAuthorisedStack.tsx"
click node_auth "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/Stack/AuthorisedStack.tsx"
click node_tabs "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/tab/BottomTabNav.tsx"
click node_redux "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/Redux/Store/Store.js"
click node_cardctx "https://github.com/yogesh9891/portfolio-card-app/blob/main/context/CardContext.tsx"
click node_tokenctx "https://github.com/yogesh9891/portfolio-card-app/blob/main/context/TokenContext.tsx"
click node_rolectx "https://github.com/yogesh9891/portfolio-card-app/blob/main/context/RoleContext.tsx"
click node_login "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Login.tsx"
click node_verify "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/OtpVerify.tsx"
click node_home "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Home.tsx"
click node_profile "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Profile.tsx"
click node_cardflow "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/AddCard.tsx"
click node_connect "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Connections.tsx"
click node_qr "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/QRCode.tsx"
click node_services "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/services/index.service.ts"
click node_authutil "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/utils/auth.ts"
click node_styles "https://github.com/yogesh9891/portfolio-card-app/blob/main/src/stylecomponents/style.tsx"
click node_android "https://github.com/yogesh9891/portfolio-card-app/blob/main/android/app/src/main/java/com/thebrandcard_app/MainApplication.java"
click node_ios "https://github.com/yogesh9891/portfolio-card-app/blob/main/ios/Thebrandcard_app/AppDelegate.mm"
click node_assets "https://github.com/yogesh9891/portfolio-card-app/tree/main/assets/img"

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,node_app,node_rootnav,node_unauth,node_auth,node_tabs,node_services,node_authutil,node_styles toneBlue
class node_redux,node_cardctx,node_tokenctx,node_rolectx toneAmber
class node_login,node_verify,node_home,node_profile,node_cardflow,node_connect,node_qr toneMint
class node_android,node_ios toneRose
class node_assets toneIndigo
```

## Components

### JS app

Shared React Native application code

- [Entry](https://github.com/yogesh9891/portfolio-card-app/blob/main/index.js): runtime entry · App bootstrap and registration · `index.js`
- [App](https://github.com/yogesh9891/portfolio-card-app/blob/main/App.tsx): root composition · Top-level providers and app composition · `App.tsx`
- [Root nav](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/Stack/Root.tsx): navigator switch · Chooses authorised vs unauthorised shell · `src/navigations/Stack/Root.tsx`
- [Guest stack](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/Stack/UnAuthorisedStack.tsx): navigator stack · Login, onboarding, and verification flow · `src/navigations/Stack/UnAuthorisedStack.tsx`
- [Auth stack](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/Stack/AuthorisedStack.tsx): navigator stack · Authenticated app shell routing · `src/navigations/Stack/AuthorisedStack.tsx`
- [Tabs](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/navigations/tab/BottomTabNav.tsx): tab navigator · Primary authenticated tab bar · `src/navigations/tab/BottomTabNav.tsx`
- [Services](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/services/index.service.ts): api boundary · Domain API wrappers · `src/services/index.service.ts`
- [Auth util](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/utils/auth.ts): session helper · Token and auth helpers · `src/utils/auth.ts`
- [Styles](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/stylecomponents/style.tsx): ui styles · Shared presentation helpers · `src/stylecomponents/style.tsx`

### State

Global app state and session context

- [Redux](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/Redux/Store/Store.js): global store · Shared application state store · `src/Redux/Store/Store.js`
- [Card ctx](https://github.com/yogesh9891/portfolio-card-app/blob/main/context/CardContext.tsx): context · Selected card and card-related state · `context/CardContext.tsx`
- [Token ctx](https://github.com/yogesh9891/portfolio-card-app/blob/main/context/TokenContext.tsx): context · Session token state · `context/TokenContext.tsx`
- [Role ctx](https://github.com/yogesh9891/portfolio-card-app/blob/main/context/RoleContext.tsx): context · Role and access state · `context/RoleContext.tsx`

### Features

Screen and feature modules

- [Login](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Login.tsx): auth screen · Sign-in entry for users · `src/components/Login.tsx`
- [Verify](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/OtpVerify.tsx): auth screen · OTP and identity verification flow · `src/components/OtpVerify.tsx`
- [Home](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Home.tsx): main screen · Authenticated landing and dashboard area · `src/components/Home.tsx`
- [Profile](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Profile.tsx): profile screen · Profile viewing and editing · `src/components/Profile.tsx`
- [Card flow](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/AddCard.tsx): card management · Add, edit, preview, copy, and delete cards · `src/components/AddCard.tsx`
- [Connections](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/Connections.tsx): social sharing · Connections, sharing, and linked profiles · `src/components/Connections.tsx`
- [QR tools](https://github.com/yogesh9891/portfolio-card-app/blob/main/src/components/QRCode.tsx): sharing screen · QR code and camera-based card actions · `src/components/QRCode.tsx`

### Native shells

Android and iOS platform projects

- [Android](https://github.com/yogesh9891/portfolio-card-app/blob/main/android/app/src/main/java/com/thebrandcard_app/MainApplication.java): native app · Android native project and configuration · `android/app/src/main/java/com/thebrandcard_app/MainApplication.java`
- [iOS](https://github.com/yogesh9891/portfolio-card-app/blob/main/ios/Thebrandcard_app/AppDelegate.mm): native app · iOS native project and configuration · `ios/Thebrandcard_app/AppDelegate.mm`

### Infra

Assets, config, and tooling

- [Assets](https://github.com/yogesh9891/portfolio-card-app/tree/main/assets/img): branding assets · Bundled fonts and images · `assets/img`

## Connections

- Entry → App: boots · Registers and launches the root app
- App → Root nav: composes · App composition hands off to navigation
- Root nav → Token ctx: reads session · Chooses shell based on auth token state
- Root nav → Role ctx: reads role · Role state influences access and routing
- Root nav → Guest stack: unauthorised · Routes unauthenticated users into guest flow
- Root nav → Auth stack: authorised · Routes authenticated users into app shell
- Guest stack → Login: starts · Guest flow begins with login
- Guest stack → Verify: verifies · Handles OTP and verification screens
- Auth stack → Tabs: main shell · Authenticated stack exposes the bottom tabs
- Tabs → Home: opens · Tabs provide entry to the home dashboard
- Tabs → Profile: opens · Tabs provide access to profile management
- Home → Card flow: routes to · Home surfaces card lifecycle actions
- Home → Connections: routes to · Home surfaces connection and sharing actions
- Home → QR tools: routes to · Home exposes QR and camera tools
- Profile → Card ctx: uses · Profile-related views consume selected card state
- Card flow → Card ctx: updates · Card operations read and write card state
- Connections → Services: fetches · Connection features call API wrappers
- Card flow → Services: fetches · Card management relies on service layer
- Verify → Services: fetches · Verification uses backend services
- Login → Auth util: checks · Login uses auth/session helpers
- App → Redux: provides store · Top-level app likely wires the global Redux store
- Home → Styles: renders with · Screens share common style primitives
- Connections → Styles: renders with · Feature screens use shared presentation styles
- Android → Assets: bundles · Android build integrates local assets
- iOS → Assets: bundles · iOS build integrates local assets