# shreyas-sv1/medibuddy-coding-test architecture

> Architecture diagram of the GitHub repository shreyas-sv1/medibuddy-coding-test, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/shreyas-sv1/medibuddy-coding-test
- Repository: https://github.com/shreyas-sv1/medibuddy-coding-test

## Overview

This is a small React medicine-brand search application. A user enters a query, the app searches the FDA drug-label API, and matching results are shown as medicine cards. The sampled source establishes the search, API, and display flow; the README describes only the Vite template and provides no additional product capabilities.

Main entry points: [`src/App.jsx`](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/App.jsx) (Search app), [`src/services/drupApi.js`](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/services/drupApi.js) (FDA API client), [`src/components/SearchBar.jsx`](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/components/SearchBar.jsx) (Search bar), [`src/main.jsx`](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Search interface"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Search app<br/>[App.jsx]"]
  node_search["Search bar<br/>[SearchBar.jsx]"]
  node_card["Medicine card<br/>[MedicineCard.jsx]"]
end

subgraph group_lookup["Medicine lookup"]
  node_api_service["FDA API client<br/>[drupApi.js]"]
end

node_user(("User"))
node_fda["FDA drug-label API"]

node_user -->|"enters query"| node_search
node_entry -->|"mounts"| node_app
node_search -->|"calls onSearch"| node_app
node_app -->|"calls search"| node_api_service
node_api_service -->|"fetches labels"| node_fda
node_fda -->|"returns results"| node_api_service
node_api_service -->|"returns medicines"| node_app
node_app -->|"renders"| node_search
node_app -->|"renders results"| node_card

click node_entry "https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/main.jsx"
click node_app "https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/App.jsx"
click node_search "https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/components/SearchBar.jsx"
click node_card "https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/components/MedicineCard.jsx"
click node_api_service "https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/services/drupApi.js"

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_entry,node_app,node_search,node_card,node_user toneBlue
class node_api_service toneAmber
class node_fda toneMint
```

## Components

### Search interface

- [React entry](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/main.jsx): `src/main.jsx`
- [Search app](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/App.jsx): `src/App.jsx`
- [Search bar](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/components/SearchBar.jsx): `src/components/SearchBar.jsx`
- [Medicine card](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/components/MedicineCard.jsx): `src/components/MedicineCard.jsx`

### Medicine lookup

- [FDA API client](https://github.com/shreyas-sv1/medibuddy-coding-test/blob/main/src/services/drupApi.js): `src/services/drupApi.js`

### Other components

- **User**
- **FDA drug-label API**

## Connections

- User → Search bar: enters query
- React entry → Search app: mounts
- Search bar → Search app: calls onSearch
- Search app → FDA API client: calls search
- FDA API client → FDA drug-label API: fetches labels
- FDA drug-label API → FDA API client: returns results
- FDA API client → Search app: returns medicines
- Search app → Search bar: renders
- Search app → Medicine card: renders results