99 lines
2.3 KiB
Markdown
99 lines
2.3 KiB
Markdown
# SaveInMed Marketplace Frontend
|
|
|
|
The Marketplace is the customer-facing B2B application where pharmacies purchase products from distributors.
|
|
|
|
## 🏗 Architecture
|
|
|
|
The frontend is built with React and Vite, utilizing a component-based architecture state management.
|
|
|
|
```mermaid
|
|
graph TD
|
|
%% User
|
|
User((User))
|
|
|
|
%% Core
|
|
subgraph "Application Core"
|
|
App[App Root]
|
|
Router[React Router]
|
|
Store[Zustand Store]
|
|
Query[TanStack Query]
|
|
end
|
|
|
|
%% Pages
|
|
subgraph "Pages / Routes"
|
|
LoginP[Login/Auth]
|
|
HomeP[Home / Catalog]
|
|
ProdP[Product Details]
|
|
CartP[Shopping Cart]
|
|
CheckoutP[Checkout]
|
|
ProfileP[User Profile]
|
|
OrdersP[Order History]
|
|
end
|
|
|
|
%% Feature Components
|
|
subgraph "Smart Components"
|
|
AuthForm[Auth Forms]
|
|
ProdGrid[Product Grid]
|
|
CartWidget[Cart Widget]
|
|
PayWidget[Payment Widget]
|
|
AddressForm[Address Manager]
|
|
end
|
|
|
|
%% API Layer
|
|
subgraph "API Integration"
|
|
API[API Client (Axios)]
|
|
Backend[Backend API]
|
|
end
|
|
|
|
%% Flow
|
|
User --> App
|
|
App --> Router
|
|
App --> Store
|
|
|
|
Router --> LoginP
|
|
Router --> HomeP
|
|
Router --> ProdP
|
|
Router --> CartP
|
|
Router --> CheckoutP
|
|
Router --> ProfileP
|
|
Router --> OrdersP
|
|
|
|
HomeP --> ProdGrid
|
|
CartP --> CartWidget
|
|
CheckoutP --> PayWidget
|
|
CheckoutP --> AddressForm
|
|
|
|
ProdGrid --> Store
|
|
CartWidget --> Store
|
|
PayWidget --> Store
|
|
|
|
Store --> API
|
|
Query --> API
|
|
API --> Backend
|
|
|
|
%% Styling
|
|
style User fill:#f9f,stroke:#333,stroke-width:2px
|
|
style Backend fill:#f87171,stroke:#333,stroke-width:2px
|
|
style Store fill:#60a5fa,stroke:#333
|
|
```
|
|
|
|
## 🛠 Tech Stack
|
|
- **Framework**: React 18 + Vite
|
|
- **Styling**: TailwindCSS
|
|
- **State**: Zustand + TanStack Query
|
|
- **Routing**: React Router DOM
|
|
- **HTTP**: Axios
|
|
|
|
## 📦 Key Modules
|
|
- **Authentication**: JWT-based login and session management
|
|
- **Catalog**: Virtualized product lists with search and filter
|
|
- **Checkout**: Multi-step checkout with payment integration
|
|
- **Dashboard**: User order history and status tracking
|
|
|
|
## 🧪 Tests
|
|
|
|
```bash
|
|
npm test
|
|
```
|
|
|
|
> For the complete test matrix (with/without DB and Playwright), see: [docs/TESTES.md](../docs/TESTES.md)
|