# vikrammadhyasta/agritech architecture

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

- Interactive diagram: https://gitdiagram.com/vikrammadhyasta/agritech
- Repository: https://github.com/vikrammadhyasta/agritech

## Overview

1. **What this repository is**
   - This is a **frontend-only React application** for the AgriTech platform, built with **Vite + TypeScript** and styled with **Tailwind/shadcn/ui**.
   - The repo also includes the **delivery pipeline** and **Kubernetes deployment manifests**, so the architecture spans UI, build, containerization, and GitOps deployment.

2. **Primary runtime boundary**
   - The app boots from `index.html` → `src/main.tsx` → `src/App.tsx`.
   - `App.tsx` is the top-level composition point for routing/layout; the rest of the app is organized as page-level views and reusable UI components.

3. **Route/page structure**
   - `src/pages` contains the major route targets:
     - Public pages: `Index`, `About`, `Products`, `Contact`
     - Auth flow: `src/pages/auth/AuthPage.tsx`
     - Error handling: `NotFound`
     - Role-specific dashboards: `CustomerDashboard`, `DistributorDashboard`, `FarmerDashboard`, `RetailerDashboard`
   - This suggests a **client-side routed SPA** with public marketing pages plus authenticated role-based sections.

4. **Layout and reusable presentation layer**
   - `src/components/layout` contains global frame elements like `Navbar` and `Footer`.
   - `src/components/home` groups the landing-page sections (`HeroSection`, `FeaturedProducts`, `StatsSection`, `AboutSection`, `ContactSection`), which are composed into the home page.
   - `src/components/dashboard/DashboardLayout.tsx` is the shared shell for dashboard pages, separating dashboard navigation/chrome from dashboard content.

5. **Design system and UI primitives**
   - `src/components/ui` is a large shadcn-style component library: dialogs, forms, tables, tabs, tooltips, sidebars, toasts, etc.
   - These are not business-specific; they provide the application’s consistent interaction primitives across public pages, auth, and dashboards.

6. **State, responsiveness, and shared utilities**
   - `src/hooks/use-mobile.tsx` and `src/hooks/use-toast.ts` provide cross-cutting client behavior for responsive UI and notifications.
   - `src/lib/utils.ts` likely centralizes common class/utility helpers used throughout the component tree.
   - `src/components/NavLink.tsx` is a small navigation abstraction, probably used to keep navbar/sidebar links consistent.

7. **Backend/data integration boundary**
   - The only explicit backend integration in the repo is **Supabase** under `src/integrations/supabase`.
   - `client.ts` is the browser-side Supabase client; `types.ts` provides generated type safety for database records.
   - `supabase/migrations/...sql` shows the database schema is managed separately from the frontend, so the frontend talks to a managed backend/data layer rather than a custom API server in this repo.

8. **Data flow at application level**
   - User visits the static frontend, navigates through public content, and authenticates via the auth page.
   - Role-specific dashboards then consume data from Supabase-backed services/database.
   - The README describes domain actions like farmers listing produce, distributors verifying quality, retailers selling products, and customers placing orders; these are presentation/data flows rather than local business logic services inside this repo.

9. **Styling and asset pipeline**
   - `tailwind.config.ts`, `postcss.config.js`, `src/index.css`, and `src/App.css` define the styling pipeline.
   - `components.json` indicates component generation/configuration typical of shadcn/ui.
   - The app is built as a static frontend bundle, with `public/robots.txt` and `public` holding static assets.

10. **Containerization and local/runtime packaging**
   - `Dockerfile` packages the built frontend into a container image.
   - There is no app server code in the tree, so the container likely serves static files generated by the Vite build.
   - This is the artifact that gets pushed to the registry and deployed to Kubernetes.

11. **CI/CD control plane**
   - `Jenkinsfile` defines the automated pipeline: source change → build → image creation → push to registry.
   - The README describes AWS ECR as the private registry, making Jenkins the build-and-publish boundary between source control and deployment.

12. **Deployment target and GitOps flow**
   - `k8s/deployment.yaml`, `service.yaml`, and `application.yaml` define the Kubernetes-side deployment.
   - The README says **ArgoCD** watches GitHub and syncs Kubernetes manifests, so deployment is GitOps-driven rather than manually applied.
   - Kubernetes is the runtime scheduler/exposure layer; the Service exposes the app, and the Deployment pulls the image from ECR.

13. **Registry and secret handling**
   - The deployment uses an **image pull secret** for private ECR access, which is a critical infrastructure boundary.
   - This means cluster access to images is intentionally separated from build access, and the manifest set must include `imagePullSecrets` support.

14. **Architecture summary for a diagram**
   - Draw the app as a **static React SPA** with:
     - user-facing pages and dashboards in the frontend
     - Supabase as the managed data/auth backend
     - Jenkins building Docker images
     - AWS ECR storing images
     - Kubernetes running the containerized frontend
     - ArgoCD continuously syncing manifests from GitHub
   - The key boundaries are **UI vs. data/backend**, **build vs. runtime**, and **source control vs. cluster deployment**.

Main entry points: [`src/App.tsx`](https://github.com/vikrammadhyasta/agritech/blob/main/src/App.tsx) (App), [`src/pages/Index.tsx`](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/Index.tsx) (Home), [`src/components/dashboard/DashboardLayout.tsx`](https://github.com/vikrammadhyasta/agritech/blob/main/src/components/dashboard/DashboardLayout.tsx) (Dash Layout), [`src/components/ui/button.tsx`](https://github.com/vikrammadhyasta/agritech/blob/main/src/components/ui/button.tsx) (UI Library)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend SPA"]
  node_index_html["Index HTML<br/>entry shell<br/>[index.html]"]
  node_main_tsx["Main<br/>react bootstrap<br/>[main.tsx]"]
  node_app_tsx["App<br/>spa composition<br/>[App.tsx]"]
  node_pages_index["Home<br/>marketing page<br/>[Index.tsx]"]
  node_pages_products["Products<br/>public page<br/>[Products.tsx]"]
  node_pages_about["About<br/>public page<br/>[About.tsx]"]
  node_pages_contact["Contact<br/>public page<br/>[Contact.tsx]"]
  node_auth_page["Auth<br/>[AuthPage.tsx]"]
  node_dash_customer["Customer<br/>dashboard page"]
  node_dash_distributor["Distributor<br/>dashboard page"]
  node_dash_farmer["Farmer<br/>dashboard page"]
  node_dash_retailer["Retailer<br/>dashboard page"]
  node_navbar["Navbar<br/>layout chrome<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>layout chrome<br/>[Footer.tsx]"]
  node_dashboard_layout["Dash Layout<br/>dashboard shell"]
  node_home_sections["Home Sections<br/>landing components<br/>[HeroSection.tsx]"]
  node_nav_link["Nav Link<br/>navigation helper<br/>[NavLink.tsx]"]
end

subgraph group_design["UI System"]
  node_ui_library["UI Library<br/>ui primitives<br/>[button.tsx]"]
  node_hooks_utils["Hooks + Utils<br/>shared helpers<br/>[use-mobile.tsx]"]
end

subgraph group_data["Backend Integration"]
  node_supabase_client["Supabase Client<br/>data client<br/>[client.ts]"]
  node_supabase_types["DB Types<br/>generated types<br/>[types.ts]"]
end

subgraph group_delivery["Delivery Pipeline"]
  node_dockerfile["Dockerfile<br/>container build"]
  node_jenkinsfile["Jenkinsfile<br/>ci pipeline"]
  node_k8s_deployment["Deployment<br/>k8s manifest<br/>[deployment.yaml]"]
  node_k8s_service["Service<br/>k8s manifest<br/>[service.yaml]"]
  node_k8s_application["ArgoCD App<br/>gitops manifest<br/>[application.yaml]"]
end

node_index_html -->|"boots"| node_main_tsx
node_main_tsx -->|"mounts"| node_app_tsx
node_app_tsx -->|"routes to"| node_pages_index
node_app_tsx -->|"routes to"| node_pages_products
node_app_tsx -->|"routes to"| node_pages_about
node_app_tsx -->|"routes to"| node_pages_contact
node_app_tsx -->|"routes to"| node_auth_page
node_app_tsx -->|"routes to"| node_dash_customer
node_app_tsx -->|"routes to"| node_dash_distributor
node_app_tsx -->|"routes to"| node_dash_farmer
node_app_tsx -->|"routes to"| node_dash_retailer
node_pages_index -->|"uses"| node_navbar
node_pages_index -->|"uses"| node_footer
node_pages_index -->|"composes"| node_home_sections
node_dash_customer -->|"uses"| node_dashboard_layout
node_dash_distributor -->|"uses"| node_dashboard_layout
node_dash_farmer -->|"uses"| node_dashboard_layout
node_dash_retailer -->|"uses"| node_dashboard_layout
node_navbar -->|"uses"| node_nav_link
node_dashboard_layout -->|"uses"| node_nav_link
node_pages_index -->|"renders with"| node_ui_library
node_auth_page -->|"renders with"| node_ui_library
node_dash_customer -->|"renders with"| node_ui_library
node_pages_index -->|"uses"| node_hooks_utils
node_auth_page -->|"uses"| node_hooks_utils
node_ui_library -->|"depends on"| node_hooks_utils
node_app_tsx -->|"reads/writes"| node_supabase_client
node_supabase_client -->|"typed by"| node_supabase_types
node_jenkinsfile -->|"builds"| node_dockerfile
node_dockerfile -->|"deploys as"| node_k8s_deployment
node_k8s_deployment -->|"exposed by"| node_k8s_service
node_k8s_application -->|"syncs"| node_k8s_deployment
node_k8s_application -->|"syncs"| node_k8s_service

click node_index_html "https://github.com/vikrammadhyasta/agritech/blob/main/index.html"
click node_main_tsx "https://github.com/vikrammadhyasta/agritech/blob/main/src/main.tsx"
click node_app_tsx "https://github.com/vikrammadhyasta/agritech/blob/main/src/App.tsx"
click node_pages_index "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/Index.tsx"
click node_pages_products "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/Products.tsx"
click node_pages_about "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/About.tsx"
click node_pages_contact "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/Contact.tsx"
click node_auth_page "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/auth/AuthPage.tsx"
click node_dash_customer "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/dashboard/CustomerDashboard.tsx"
click node_dash_distributor "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/dashboard/DistributorDashboard.tsx"
click node_dash_farmer "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/dashboard/FarmerDashboard.tsx"
click node_dash_retailer "https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/dashboard/RetailerDashboard.tsx"
click node_navbar "https://github.com/vikrammadhyasta/agritech/blob/main/src/components/layout/Navbar.tsx"
click node_footer "https://github.com/vikrammadhyasta/agritech/blob/main/src/components/layout/Footer.tsx"
click node_dashboard_layout "https://github.com/vikrammadhyasta/agritech/blob/main/src/components/dashboard/DashboardLayout.tsx"
click node_home_sections "https://github.com/vikrammadhyasta/agritech/blob/main/src/components/home/HeroSection.tsx"
click node_nav_link "https://github.com/vikrammadhyasta/agritech/blob/main/src/components/NavLink.tsx"
click node_ui_library "https://github.com/vikrammadhyasta/agritech/blob/main/src/components/ui/button.tsx"
click node_hooks_utils "https://github.com/vikrammadhyasta/agritech/blob/main/src/hooks/use-mobile.tsx"
click node_supabase_client "https://github.com/vikrammadhyasta/agritech/blob/main/src/integrations/supabase/client.ts"
click node_supabase_types "https://github.com/vikrammadhyasta/agritech/blob/main/src/integrations/supabase/types.ts"
click node_dockerfile "https://github.com/vikrammadhyasta/agritech/tree/main/Dockerfile"
click node_jenkinsfile "https://github.com/vikrammadhyasta/agritech/tree/main/Jenkinsfile"
click node_k8s_deployment "https://github.com/vikrammadhyasta/agritech/blob/main/k8s/deployment.yaml"
click node_k8s_service "https://github.com/vikrammadhyasta/agritech/blob/main/k8s/service.yaml"
click node_k8s_application "https://github.com/vikrammadhyasta/agritech/blob/main/k8s/application.yaml"

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_html,node_main_tsx,node_app_tsx,node_pages_index,node_pages_products,node_pages_about,node_pages_contact,node_auth_page,node_dash_customer,node_dash_distributor,node_dash_farmer,node_dash_retailer,node_navbar,node_footer,node_dashboard_layout,node_home_sections,node_nav_link toneBlue
class node_ui_library,node_hooks_utils toneAmber
class node_supabase_client,node_supabase_types toneMint
class node_dockerfile,node_jenkinsfile,node_k8s_deployment,node_k8s_service,node_k8s_application toneRose
```

## Components

### Frontend SPA

React application entry points, pages, layouts, and shared UI

- [Index HTML](https://github.com/vikrammadhyasta/agritech/blob/main/index.html): entry shell · Static document that boots the Vite app · `index.html`
- [Main](https://github.com/vikrammadhyasta/agritech/blob/main/src/main.tsx): react bootstrap · Client entry that mounts the app · `src/main.tsx`
- [App](https://github.com/vikrammadhyasta/agritech/blob/main/src/App.tsx): spa composition · Top-level composition and routing boundary · `src/App.tsx`
- [Home](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/Index.tsx): marketing page · Public landing page · `src/pages/Index.tsx`
- [Products](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/Products.tsx): public page · Public product browsing page · `src/pages/Products.tsx`
- [About](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/About.tsx): public page · Public about page · `src/pages/About.tsx`
- [Contact](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/Contact.tsx): public page · Public contact page · `src/pages/Contact.tsx`
- [Auth](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/auth/AuthPage.tsx): auth page · Authentication flow entry · `src/pages/auth/AuthPage.tsx`
- [Customer](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/dashboard/CustomerDashboard.tsx): dashboard page · Customer role dashboard · `src/pages/dashboard/CustomerDashboard.tsx`
- [Distributor](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/dashboard/DistributorDashboard.tsx): dashboard page · Distributor role dashboard · `src/pages/dashboard/DistributorDashboard.tsx`
- [Farmer](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/dashboard/FarmerDashboard.tsx): dashboard page · Farmer role dashboard · `src/pages/dashboard/FarmerDashboard.tsx`
- [Retailer](https://github.com/vikrammadhyasta/agritech/blob/main/src/pages/dashboard/RetailerDashboard.tsx): dashboard page · Retailer role dashboard · `src/pages/dashboard/RetailerDashboard.tsx`
- [Navbar](https://github.com/vikrammadhyasta/agritech/blob/main/src/components/layout/Navbar.tsx): layout chrome · Primary site navigation · `src/components/layout/Navbar.tsx`
- [Footer](https://github.com/vikrammadhyasta/agritech/blob/main/src/components/layout/Footer.tsx): layout chrome · Primary site footer · `src/components/layout/Footer.tsx`
- [Dash Layout](https://github.com/vikrammadhyasta/agritech/blob/main/src/components/dashboard/DashboardLayout.tsx): dashboard shell · Shared dashboard frame and navigation · `src/components/dashboard/DashboardLayout.tsx`
- [Home Sections](https://github.com/vikrammadhyasta/agritech/blob/main/src/components/home/HeroSection.tsx): landing components · Hero, featured products, stats, about, and contact sections · `src/components/home/HeroSection.tsx`
- [Nav Link](https://github.com/vikrammadhyasta/agritech/blob/main/src/components/NavLink.tsx): navigation helper · Shared link abstraction for menus · `src/components/NavLink.tsx`

### UI System

Reusable shadcn-style components and cross-cutting UI helpers

- [UI Library](https://github.com/vikrammadhyasta/agritech/blob/main/src/components/ui/button.tsx): ui primitives · Reusable shadcn-style component set · `src/components/ui/button.tsx`
- [Hooks + Utils](https://github.com/vikrammadhyasta/agritech/blob/main/src/hooks/use-mobile.tsx): shared helpers · Responsive and notification hooks plus class utilities · `src/hooks/use-mobile.tsx`

### Backend Integration

Supabase client and generated database types

- [Supabase Client](https://github.com/vikrammadhyasta/agritech/blob/main/src/integrations/supabase/client.ts): data client · Browser client for Supabase services · `src/integrations/supabase/client.ts`
- [DB Types](https://github.com/vikrammadhyasta/agritech/blob/main/src/integrations/supabase/types.ts): generated types · Typed database schema bindings · `src/integrations/supabase/types.ts`

### Delivery Pipeline

Build, container, CI/CD, and Kubernetes deployment

- [Dockerfile](https://github.com/vikrammadhyasta/agritech/tree/main/Dockerfile): container build · Packages the built frontend into an image · `Dockerfile`
- [Jenkinsfile](https://github.com/vikrammadhyasta/agritech/tree/main/Jenkinsfile): ci pipeline · Build and publish automation · `Jenkinsfile`
- [Deployment](https://github.com/vikrammadhyasta/agritech/blob/main/k8s/deployment.yaml): k8s manifest · Kubernetes workload definition · `k8s/deployment.yaml`
- [Service](https://github.com/vikrammadhyasta/agritech/blob/main/k8s/service.yaml): k8s manifest · Kubernetes service exposure · `k8s/service.yaml`
- [ArgoCD App](https://github.com/vikrammadhyasta/agritech/blob/main/k8s/application.yaml): gitops manifest · GitOps application sync definition · `k8s/application.yaml`

## Connections

- Index HTML → Main: boots · Browser loads the app entrypoint
- Main → App: mounts · React mounts the root app
- App → Home: routes to · Client-side routing reaches public home
- App → Products: routes to · Routes to product catalog
- App → About: routes to · Routes to about page
- App → Contact: routes to · Routes to contact page
- App → Auth: routes to · Routes to authentication flow
- App → Customer: routes to · Routes to customer dashboard
- App → Distributor: routes to · Routes to distributor dashboard
- App → Farmer: routes to · Routes to farmer dashboard
- App → Retailer: routes to · Routes to retailer dashboard
- Home → Navbar: uses · Public pages share the main navigation
- Home → Footer: uses · Public pages share the footer
- Home → Home Sections: composes · Landing page is assembled from home sections
- Customer → Dash Layout: uses · Role dashboards share the dashboard shell
- Distributor → Dash Layout: uses · Role dashboards share the dashboard shell
- Farmer → Dash Layout: uses · Role dashboards share the dashboard shell
- Retailer → Dash Layout: uses · Role dashboards share the dashboard shell
- Navbar → Nav Link: uses · Navigation is built from shared link abstraction
- Dash Layout → Nav Link: uses · Dashboard shell reuses navigation links
- Home → UI Library: renders with · Pages and sections rely on shared primitives
- Auth → UI Library: renders with · Auth flow uses shared form and dialog primitives
- Customer → UI Library: renders with · Dashboards use shared UI primitives
- Home → Hooks + Utils: uses · Shared responsive and toast behavior
- Auth → Hooks + Utils: uses · Authentication UI uses cross-cutting helpers
- UI Library → Hooks + Utils: depends on · UI primitives rely on shared helper utilities
- App → Supabase Client: reads/writes · App-level flows connect to Supabase services
- Supabase Client → DB Types: typed by · Client uses generated database types
- Jenkinsfile → Dockerfile: builds · CI pipeline produces the container image
- Dockerfile → Deployment: deploys as · Built image is consumed by Kubernetes deployment
- Deployment → Service: exposed by · Service fronts the deployment
- ArgoCD App → Deployment: syncs · ArgoCD syncs workload manifests
- ArgoCD App → Service: syncs · ArgoCD syncs service manifests