yogesh9891/portfolio-card-app

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.