saveinmed/marketplace

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.

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

npm test

For the complete test matrix (with/without DB and Playwright), see: docs/TESTES.md