# douglasteyh/vuejs-clickfarmafront architecture

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

- Interactive diagram: https://gitdiagram.com/douglasteyh/vuejs-clickfarmafront
- Repository: https://github.com/douglasteyh/vuejs-clickfarmafront

## Overview

ClickFarma is an online pharmacy marketplace with a Vue storefront and Spring backend. Customers browse products, manage a cart, check out, pay, and track orders; the platform also supports prescriptions, AI assistance, and separate administrative, pharmacy, and courier operations. The README documents the broad capabilities and MySQL stack; sampled backend code confirms the order, product, authentication, and prescription-processing layers. Several listed subsystems were not sampled, so their internal call paths are not asserted.

Main entry points: [`frontend/src/services/api.js`](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/services/api.js) (API Client), [`frontend/src/main.js`](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/main.js) (Vue App), [`frontend/src/views`](https://github.com/douglasteyh/vuejs-clickfarmafront/tree/main/frontend/src/views) (Storefront Views), [`backend/src/main/java/com/clickfarma/backend/controller/AuthController.java`](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/AuthController.java) (Authentication API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer Storefront"]
  node_webapp["Vue App<br/>[main.js]"]
  node_storefront_views["Storefront Views"]
  node_cart_checkout["Cart &amp; Checkout"]
  node_order_ui["Order Tracking UI"]
  node_client_state["Client State<br/>[index.js]"]
  node_api_client["API Client<br/>[api.js]"]
end

subgraph group_commerce["Commerce Backend"]
  node_auth_api["Authentication API"]
  node_catalog_api["Catalog API"]
  node_product_service["Product Service"]
  node_product_data[("Product Data")]
  node_orders_api["Orders API"]
  node_order_service["Order Service<br/>[PedidoService.java]"]
  node_payment_service["Payment Service"]
  node_order_data[("Order Data")]
  node_prescription_api["Prescription API"]
  node_prescription_ocr["Prescription Processing"]
end

subgraph group_operations["Marketplace Operations"]
  node_admin_ops["Admin Dashboard<br/>[AdminDashboard.vue]"]
  node_pharmacy_ops["Pharmacy Portal"]
  node_courier_ops["Courier Portal"]
  node_dashboard_service["Dashboard Service"]
end

subgraph group_platform["Platform Services"]
  node_identity_security["JWT Security"]
  node_user_data[("User Data")]
  node_file_storage["Image Storage"]
end

node_customer(("Customer"))
node_mysql[("MySQL")]
node_ai_provider{{"AI Provider"}}

node_customer -->|"uses"| node_webapp
node_webapp -->|"mounts"| node_storefront_views
node_webapp -->|"installs"| node_client_state
node_storefront_views -.->|"includes"| node_cart_checkout
node_storefront_views -.->|"includes"| node_order_ui
node_client_state -->|"calls"| node_api_client
node_webapp -->|"configures"| node_api_client
node_api_client -.->|"requests"| node_auth_api
node_api_client -.->|"requests"| node_catalog_api
node_api_client -.->|"requests"| node_orders_api
node_api_client -.->|"requests"| node_prescription_api
node_auth_api -->|"reads and writes"| node_user_data
node_auth_api -->|"authenticates with"| node_identity_security
node_catalog_api -->|"delegates to"| node_product_service
node_product_service -->|"uses"| node_product_data
node_product_service -->|"stores images via"| node_file_storage
node_orders_api -->|"delegates to"| node_order_service
node_orders_api -->|"uses"| node_payment_service
node_order_service -->|"reads and writes"| node_order_data
node_order_service -.->|"creates payment"| node_payment_service
node_prescription_api -->|"processes with"| node_prescription_ocr
node_prescription_ocr -->|"matches medicines"| node_product_data
node_admin_ops -.->|"loads metrics"| node_dashboard_service
node_pharmacy_ops -.->|"uses"| node_api_client
node_courier_ops -.->|"uses"| node_api_client
node_dashboard_service -.->|"queries"| node_mysql
node_product_data -.->|"persists products"| node_mysql
node_order_data -.->|"persists orders"| node_mysql
node_user_data -.->|"persists users"| node_mysql
node_prescription_ocr -.->|"uses"| node_ai_provider

click node_webapp "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/main.js"
click node_storefront_views "https://github.com/douglasteyh/vuejs-clickfarmafront/tree/main/frontend/src/views"
click node_cart_checkout "https://github.com/douglasteyh/vuejs-clickfarmafront/tree/main/frontend/src/components/checkout"
click node_order_ui "https://github.com/douglasteyh/vuejs-clickfarmafront/tree/main/frontend/src/components/orders"
click node_client_state "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/store/index.js"
click node_api_client "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/services/api.js"
click node_auth_api "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/AuthController.java"
click node_catalog_api "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/ProdutoController.java"
click node_product_service "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/ProdutoService.java"
click node_product_data "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/repository/ProdutoRepository.java"
click node_orders_api "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/PedidoController.java"
click node_order_service "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/PedidoService.java"
click node_payment_service "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/PagamentoService.java"
click node_order_data "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/repository/PedidoRepository.java"
click node_prescription_api "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/ReceitaController.java"
click node_prescription_ocr "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/GroqProcessadorReceitaService.java"
click node_admin_ops "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/views/admin/AdminDashboard.vue"
click node_pharmacy_ops "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/views/pharmacy/PharmacyDashboard.vue"
click node_courier_ops "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/views/courier/CourierDashboard.vue"
click node_dashboard_service "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/DashboardService.java"
click node_identity_security "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/security/SecurityConfig.java"
click node_user_data "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/repository/UsuarioRepository.java"
click node_file_storage "https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/FileStorageService.java"

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_webapp,node_storefront_views,node_cart_checkout,node_order_ui,node_client_state,node_api_client toneBlue
class node_auth_api,node_catalog_api,node_product_service,node_product_data,node_orders_api,node_order_service,node_payment_service,node_order_data,node_prescription_api,node_prescription_ocr,node_mysql toneAmber
class node_admin_ops,node_pharmacy_ops,node_courier_ops,node_dashboard_service toneMint
class node_identity_security,node_user_data,node_file_storage toneRose
class node_customer,node_ai_provider toneIndigo
```

## Components

### Customer Storefront

- [Vue App](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/main.js): `frontend/src/main.js`
- [Storefront Views](https://github.com/douglasteyh/vuejs-clickfarmafront/tree/main/frontend/src/views): `frontend/src/views`
- [Cart & Checkout](https://github.com/douglasteyh/vuejs-clickfarmafront/tree/main/frontend/src/components/checkout): `frontend/src/components/checkout`
- [Order Tracking UI](https://github.com/douglasteyh/vuejs-clickfarmafront/tree/main/frontend/src/components/orders): `frontend/src/components/orders`
- [Client State](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/store/index.js): `frontend/src/store/index.js`
- [API Client](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`

### Commerce Backend

- [Authentication API](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/AuthController.java): `backend/src/main/java/com/clickfarma/backend/controller/AuthController.java`
- [Catalog API](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/ProdutoController.java): `backend/src/main/java/com/clickfarma/backend/controller/ProdutoController.java`
- [Product Service](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/ProdutoService.java): `backend/src/main/java/com/clickfarma/backend/service/ProdutoService.java`
- [Product Data](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/repository/ProdutoRepository.java): `backend/src/main/java/com/clickfarma/backend/repository/ProdutoRepository.java`
- [Orders API](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/PedidoController.java): `backend/src/main/java/com/clickfarma/backend/controller/PedidoController.java`
- [Order Service](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/PedidoService.java): `backend/src/main/java/com/clickfarma/backend/service/PedidoService.java`
- [Payment Service](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/PagamentoService.java): `backend/src/main/java/com/clickfarma/backend/service/PagamentoService.java`
- [Order Data](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/repository/PedidoRepository.java): `backend/src/main/java/com/clickfarma/backend/repository/PedidoRepository.java`
- [Prescription API](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/controller/ReceitaController.java): `backend/src/main/java/com/clickfarma/backend/controller/ReceitaController.java`
- [Prescription Processing](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/GroqProcessadorReceitaService.java): `backend/src/main/java/com/clickfarma/backend/service/GroqProcessadorReceitaService.java`

### Marketplace Operations

- [Admin Dashboard](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/views/admin/AdminDashboard.vue): `frontend/src/views/admin/AdminDashboard.vue`
- [Pharmacy Portal](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/views/pharmacy/PharmacyDashboard.vue): `frontend/src/views/pharmacy/PharmacyDashboard.vue`
- [Courier Portal](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/frontend/src/views/courier/CourierDashboard.vue): `frontend/src/views/courier/CourierDashboard.vue`
- [Dashboard Service](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/DashboardService.java): `backend/src/main/java/com/clickfarma/backend/service/DashboardService.java`

### Platform Services

- [JWT Security](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/security/SecurityConfig.java): `backend/src/main/java/com/clickfarma/backend/security/SecurityConfig.java`
- [User Data](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/repository/UsuarioRepository.java): `backend/src/main/java/com/clickfarma/backend/repository/UsuarioRepository.java`
- [Image Storage](https://github.com/douglasteyh/vuejs-clickfarmafront/blob/main/backend/src/main/java/com/clickfarma/backend/service/FileStorageService.java): `backend/src/main/java/com/clickfarma/backend/service/FileStorageService.java`

### Other components

- **Customer**
- **MySQL**
- **AI Provider**

## Connections

- Customer → Vue App: uses (evidence: `README.md`)
- Vue App → Storefront Views: mounts (evidence: `frontend/src/main.js`)
- Vue App → Client State: installs (evidence: `frontend/src/main.js`)
- Storefront Views → Cart & Checkout: includes
- Storefront Views → Order Tracking UI: includes
- Client State → API Client: calls (evidence: `frontend/src/store/index.js`)
- Vue App → API Client: configures (evidence: `frontend/src/main.js`)
- API Client → Authentication API: requests
- API Client → Catalog API: requests
- API Client → Orders API: requests
- API Client → Prescription API: requests
- Authentication API → User Data: reads and writes (evidence: `backend/src/main/java/com/clickfarma/backend/controller/AuthController.java`)
- Authentication API → JWT Security: authenticates with (evidence: `backend/src/main/java/com/clickfarma/backend/controller/AuthController.java`)
- Catalog API → Product Service: delegates to (evidence: `backend/src/main/java/com/clickfarma/backend/controller/ProdutoController.java`)
- Product Service → Product Data: uses
- Product Service → Image Storage: stores images via (evidence: `backend/src/main/java/com/clickfarma/backend/controller/ProdutoController.java`)
- Orders API → Order Service: delegates to (evidence: `backend/src/main/java/com/clickfarma/backend/controller/PedidoController.java`)
- Orders API → Payment Service: uses (evidence: `backend/src/main/java/com/clickfarma/backend/controller/PedidoController.java`)
- Order Service → Order Data: reads and writes (evidence: `backend/src/main/java/com/clickfarma/backend/service/PedidoService.java`)
- Order Service → Payment Service: creates payment (evidence: `backend/src/main/java/com/clickfarma/backend/service/PedidoService.java`)
- Prescription API → Prescription Processing: processes with (evidence: `backend/src/main/java/com/clickfarma/backend/controller/ReceitaController.java`)
- Prescription Processing → Product Data: matches medicines (evidence: `backend/src/main/java/com/clickfarma/backend/service/GroqProcessadorReceitaService.java`)
- Admin Dashboard → Dashboard Service: loads metrics
- Pharmacy Portal → API Client: uses
- Courier Portal → API Client: uses
- Dashboard Service → MySQL: queries
- Product Data → MySQL: persists products
- Order Data → MySQL: persists orders
- User Data → MySQL: persists users
- Prescription Processing → AI Provider: uses