# ahmedsamy98/scribblr architecture

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

- Interactive diagram: https://gitdiagram.com/ahmedsamy98/scribblr
- Repository: https://github.com/ahmedsamy98/scribblr

## Overview

1. **Repository shape**
   - This is a **Flutter mobile app** called *scribblr*, focused on articles/blogging.
   - The repo is organized around a single Flutter codebase with **Android and iOS native shells** plus a large Dart UI layer.

2. **Primary runtime boundary**
   - The app’s main logic lives in `lib/`, while `android/` and `ios/` contain platform bootstrap code only.
   - There is no visible backend service code in the repo, so the architecture appears to be **client-first UI with data/models/stores in-app**, likely backed by mocked or externally supplied content.

3. **Entry point and app composition**
   - `lib/main.dart` is the top-level entry point.
   - It likely wires together global theme, app routes, and the central store before handing control to the first screen.
   - `lib/utils/app_theme.dart`, `colors.dart`, `constant.dart`, and `images.dart` suggest shared configuration is centralized early in startup.

4. **Screen-level architecture**
   - `lib/screens/` is the main navigation layer and contains the app’s user journeys:
     - onboarding and walkthrough,
     - authentication (`sign_in`, `sign_up`, `forgot_password`),
     - profile setup flow,
     - dashboard and search/notification/settings,
     - article exploration, creation, detail, comments, and profile views.
   - The screen tree indicates a **multi-stage consumer app** with clear funnel boundaries: entry/onboarding → auth/profile setup → main dashboard → content and account management.

5. **Dashboard as the hub**
   - `lib/screens/dashboard/` and `lib/screens/fragments/` show the main shell is probably tabbed or section-based.
   - Fragments such as `home_fragment`, `discover_fragment`, `my_articles_fragment`, and `profile_fragment` suggest the dashboard is the central container that swaps between major content areas.

6. **Reusable UI component layer**
   - `lib/components/` contains most of the reusable presentation pieces: article cards, chips, comment widgets, settings controls, notifications, social login UI, top writers, invite user, FAQ, and progress indicators.
   - This indicates a **composition-heavy UI architecture**: screens are assembled from smaller feature components rather than embedding all widget logic directly in each screen.

7. **Domain/data models**
   - `lib/models/` holds app-specific data shapes for articles, comments, notifications, invites, and walkthrough content.
   - These models represent the app’s primary domain objects and likely act as the boundary between UI widgets and whatever content source the app uses.

8. **Application state**
   - `lib/store/app_store.dart` suggests a **shared state store** for app-wide data such as authentication/session, current user/profile, content lists, or UI state.
   - This is the main coordination point between screens and model data, and likely reduces direct coupling between fragments/screens.

9. **Assets and generated resources**
   - `assets/` contains content and media organized by domain: `articles`, `authors`, `icons`, and a Lottie animation loader.
   - `lib/generated/assets.dart` indicates generated asset references are used to avoid raw string paths in the UI.
   - The presence of article/author assets strongly suggests some screens may render curated or sample content directly from bundled assets.

10. **Platform-specific scaffolding**
   - `android/` and `ios/` are standard Flutter host projects with launch screens, app icons, manifests, and runner classes.
   - The Android entry point is `MainActivity.kt`; iOS uses `AppDelegate.swift`.
   - These layers are mostly infrastructure and do not appear to contain app-specific business logic.

11. **Feature boundary summary**
   - The app cleanly separates:
     - **navigation/screens** for user journeys,
     - **components** for reusable UI,
     - **models** for domain data,
     - **store** for shared state,
     - **utils** for theme/constants/assets,
     - **assets** for bundled content and visuals.
   - That separation is the key structure to capture in an architecture diagram.

12. **Likely data flow**
   - User enters through splash/onboarding/walkthrough, then auth/profile setup, then dashboard.
   - Dashboard fragments and article-related screens consume shared state and models, render reusable components, and navigate to detail/edit/settings subflows.
   - Notifications, comments, search, and settings appear as secondary flows branching from the dashboard rather than separate top-level apps.

Main entry points: [`lib/screens/dashboard/dashboard.dart`](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/dashboard.dart) (Dashboard), [`lib/models/article_model.dart`](https://github.com/ahmedsamy98/scribblr/blob/master/lib/models/article_model.dart) (Models), [`lib/components/article_component.dart`](https://github.com/ahmedsamy98/scribblr/blob/master/lib/components/article_component.dart) (Components), [`lib/screens/fragments/home_fragment.dart`](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/home_fragment.dart) (Home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_platform["Platform Shells"]
  node_android_shell["Android<br/>native shell<br/>[MainActivity.kt]"]
  node_ios_shell["iOS<br/>native shell<br/>[AppDelegate.swift]"]
end

subgraph group_core["App Core"]
  node_entrypoint["Main<br/>flutter entry<br/>[main.dart]"]
  node_theme["Theme<br/>shared config<br/>[app_theme.dart]"]
  node_store[("App Store<br/>state store<br/>[app_store.dart]")]
  node_models["Models<br/>[article_model.dart]"]
  node_assets_refs["Assets Ref<br/>generated assets<br/>[assets.dart]"]
end

subgraph group_journeys["Navigation & Journeys"]
  node_splash(("Splash<br/>launch screen<br/>[splash_screen.dart]"))
  node_onboarding["Onboarding<br/>entry flow<br/>[on_boarding.dart]"]
  node_auth["Auth<br/>[sign_in.dart]"]
  node_profile_setup["Profile Setup<br/>setup flow"]
  node_dashboard["Dashboard<br/>shell<br/>[dashboard.dart]"]
  node_home["Home<br/>fragment<br/>[home_fragment.dart]"]
  node_discover["Discover<br/>fragment"]
  node_my_articles["My Articles<br/>fragment"]
  node_profile["Profile<br/>fragment"]
  node_article_detail["Article Detail<br/>content view"]
  node_create_article["Create Article<br/>editor"]
  node_comments["Comments<br/>discussion view<br/>[comments.dart]"]
  node_search["Search<br/>dashboard tool<br/>[search_screen.dart]"]
  node_notifications["Notifications<br/>dashboard tool"]
  node_settings["Settings<br/>account hub"]
end

subgraph group_ui["Reusable UI"]
  node_components["Components<br/>ui kit"]
end

node_entrypoint -->|"configure"| node_theme
node_entrypoint -->|"init state"| node_store
node_entrypoint -->|"launches"| node_splash
node_splash -->|"next"| node_onboarding
node_onboarding -->|"continues"| node_auth
node_auth -->|"after login"| node_profile_setup
node_profile_setup -->|"enters"| node_dashboard
node_dashboard -->|"tab"| node_home
node_dashboard -->|"tab"| node_discover
node_dashboard -->|"tab"| node_my_articles
node_dashboard -->|"tab"| node_profile
node_dashboard -->|"tool"| node_search
node_dashboard -->|"tool"| node_notifications
node_dashboard -->|"tool"| node_settings
node_home -->|"open"| node_article_detail
node_home -->|"compose"| node_create_article
node_article_detail -->|"discuss"| node_comments
node_components -.->|"render"| node_home
node_components -.->|"render"| node_article_detail
node_components -.->|"render"| node_comments
node_components -.->|"render"| node_settings
node_assets_refs -.->|"binds"| node_components
node_models -.->|"populate"| node_store
node_models -.->|"data"| node_home
node_models -.->|"data"| node_article_detail
node_models -.->|"data"| node_comments
node_models -.->|"data"| node_notifications

click node_android_shell "https://github.com/ahmedsamy98/scribblr/blob/master/android/app/src/main/kotlin/com/example/scribblr/MainActivity.kt"
click node_ios_shell "https://github.com/ahmedsamy98/scribblr/blob/master/ios/Runner/AppDelegate.swift"
click node_entrypoint "https://github.com/ahmedsamy98/scribblr/blob/master/lib/main.dart"
click node_theme "https://github.com/ahmedsamy98/scribblr/blob/master/lib/utils/app_theme.dart"
click node_store "https://github.com/ahmedsamy98/scribblr/blob/master/lib/store/app_store.dart"
click node_models "https://github.com/ahmedsamy98/scribblr/blob/master/lib/models/article_model.dart"
click node_assets_refs "https://github.com/ahmedsamy98/scribblr/blob/master/lib/generated/assets.dart"
click node_splash "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/splash_screen.dart"
click node_onboarding "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/on_boarding.dart"
click node_auth "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/auth/sign_in.dart"
click node_profile_setup "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/profile_setup/profile_completion.dart"
click node_dashboard "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/dashboard.dart"
click node_home "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/home_fragment.dart"
click node_discover "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/discover_fragment.dart"
click node_my_articles "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/my_articles_fragment.dart"
click node_profile "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/profile_fragment.dart"
click node_article_detail "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/article_detail.dart"
click node_create_article "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/create_article.dart"
click node_comments "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/comments.dart"
click node_search "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/search_screen.dart"
click node_notifications "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/notification_screen.dart"
click node_settings "https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/settings_screen.dart"
click node_components "https://github.com/ahmedsamy98/scribblr/blob/master/lib/components/article_component.dart"

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_android_shell,node_ios_shell toneBlue
class node_entrypoint,node_theme,node_store,node_models,node_assets_refs toneAmber
class node_splash,node_onboarding,node_auth,node_profile_setup,node_dashboard,node_home,node_discover,node_my_articles,node_profile,node_article_detail,node_create_article,node_comments,node_search,node_notifications,node_settings toneMint
class node_components toneRose
```

## Components

### Platform Shells

Flutter host projects and native bootstrap code.

- [Android](https://github.com/ahmedsamy98/scribblr/blob/master/android/app/src/main/kotlin/com/example/scribblr/MainActivity.kt): native shell · Android host project and launcher configuration. · `android/app/src/main/kotlin/com/example/scribblr/MainActivity.kt`
- [iOS](https://github.com/ahmedsamy98/scribblr/blob/master/ios/Runner/AppDelegate.swift): native shell · iOS host project and application bootstrap. · `ios/Runner/AppDelegate.swift`

### App Core

Entry point, shared state, theme, and domain models.

- [Main](https://github.com/ahmedsamy98/scribblr/blob/master/lib/main.dart): flutter entry · Top-level app entry that wires startup composition. · `lib/main.dart`
- [Theme](https://github.com/ahmedsamy98/scribblr/blob/master/lib/utils/app_theme.dart): shared config · Centralized app styling, colors, constants, and image references. · `lib/utils/app_theme.dart`
- [App Store](https://github.com/ahmedsamy98/scribblr/blob/master/lib/store/app_store.dart): state store · Shared application state and coordination point. · `lib/store/app_store.dart`
- [Models](https://github.com/ahmedsamy98/scribblr/blob/master/lib/models/article_model.dart): domain models · Core data shapes for articles, comments, notifications, walkthroughs, and invites. · `lib/models/article_model.dart`
- [Assets Ref](https://github.com/ahmedsamy98/scribblr/blob/master/lib/generated/assets.dart): generated assets · Typed asset references used by the UI layer. · `lib/generated/assets.dart`

### Navigation & Journeys

Primary screens and user flows.

- [Splash](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/splash_screen.dart): launch screen · Initial app launch screen before onboarding or auth. · `lib/screens/splash_screen.dart`
- [Onboarding](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/on_boarding.dart): entry flow · Introductory walkthrough and app explanation screens. · `lib/screens/on_boarding.dart`
- [Auth](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/auth/sign_in.dart): auth flow · Sign-in, sign-up, and password recovery journey. · `lib/screens/auth/sign_in.dart`
- [Profile Setup](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/profile_setup/profile_completion.dart): setup flow · Profile completion, country, topics, and discovery steps. · `lib/screens/profile_setup/profile_completion.dart`
- [Dashboard](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/dashboard.dart): shell · Main app container and navigation hub for content sections. · `lib/screens/dashboard/dashboard.dart`
- [Home](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/home_fragment.dart): fragment · Primary content feed and landing fragment. · `lib/screens/fragments/home_fragment.dart`
- [Discover](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/discover_fragment.dart): fragment · Content discovery fragment inside the dashboard shell. · `lib/screens/fragments/discover_fragment.dart`
- [My Articles](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/my_articles_fragment.dart): fragment · User-authored content fragment and article management entry. · `lib/screens/fragments/my_articles_fragment.dart`
- [Profile](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/fragments/profile_fragment.dart): fragment · Account/profile fragment within the dashboard. · `lib/screens/fragments/profile_fragment.dart`
- [Article Detail](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/article_detail.dart): content view · Detailed article reading and engagement screen. · `lib/screens/article_detail.dart`
- [Create Article](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/create_article.dart): editor · Article creation flow and publishing UI. · `lib/screens/create_article.dart`
- [Comments](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/comments.dart): discussion view · Comment thread and interaction screen. · `lib/screens/comments.dart`
- [Search](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/search_screen.dart): dashboard tool · Search experience available from the main shell. · `lib/screens/dashboard/search_screen.dart`
- [Notifications](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/notification_screen.dart): dashboard tool · Notification center for system and generated alerts. · `lib/screens/dashboard/notification_screen.dart`
- [Settings](https://github.com/ahmedsamy98/scribblr/blob/master/lib/screens/dashboard/settings_screen.dart): account hub · Settings and account management surface. · `lib/screens/dashboard/settings_screen.dart`

### Reusable UI

Shared presentation components used across screens.

- [Components](https://github.com/ahmedsamy98/scribblr/blob/master/lib/components/article_component.dart): ui kit · Reusable widgets for articles, comments, chips, settings, social login, and related UI. · `lib/components/article_component.dart`

## Connections

- Main → Theme: configure · Startup assembles shared theme and constants.
- Main → App Store: init state · Startup connects global application state.
- Main → Splash: launches · The app starts on the splash screen.
- Splash → Onboarding: next · Initial launch can route into onboarding.
- Onboarding → Auth: continues · Walkthrough leads into authentication.
- Auth → Profile Setup: after login · New users move into profile setup.
- Profile Setup → Dashboard: enters · Completed setup reaches the main app shell.
- Dashboard → Home: tab · Dashboard swaps into the home fragment.
- Dashboard → Discover: tab · Dashboard swaps into discovery.
- Dashboard → My Articles: tab · Dashboard exposes authored content.
- Dashboard → Profile: tab · Dashboard exposes profile/account state.
- Dashboard → Search: tool · Search is opened as a secondary dashboard surface.
- Dashboard → Notifications: tool · Notifications are surfaced from the shell.
- Dashboard → Settings: tool · Settings branches from the main shell.
- Home → Article Detail: open · Feed items navigate into article detail.
- Home → Create Article: compose · Home can lead into article creation.
- Article Detail → Comments: discuss · Detail view opens the comments thread.
- Components → Home: render · Shared widgets compose the home experience.
- Components → Article Detail: render · Article UI is built from reusable components.
- Components → Comments: render · Comment widgets are shared across discussion views.
- Components → Settings: render · Settings screens reuse common controls.
- Assets Ref → Components: binds · Generated asset references feed the shared UI layer.
- Models → App Store: populate · Domain models are coordinated through app state.
- Models → Home: data · Feed content is rendered from app models.
- Models → Article Detail: data · Article detail consumes article domain data.
- Models → Comments: data · Comments screen consumes comment models.
- Models → Notifications: data · Notification screens consume notification models.