QaRdrobe - Digital Product Passport Platform

A full-stack solution for EU Digital Product Passport (DPP) compliance in the fashion industry, powered by the Polygon blockchain.

---

QaRdrobe is a comprehensive platform designed to create and manage Digital Product Passports (DPP) for the fashion industry. It ensures compliance with upcoming EU regulations by enabling brands to register garments, generate unique QR codes, and provide complete, transparent traceability of a product's lifecycle—from its origin to its end-of-life. The platform leverages the Polygon blockchain to guarantee the immutability and veracity of key data.

🎯 Why QaRdrobe? The DPP Mandate

The European Union's push for a circular economy makes the Digital Product Passport (DPP) a mandatory requirement for textiles sold within the EU. QaRdrobe is designed to solve this challenge by providing brands with an easy-to-use tool to:

• Ensure Regulatory Compliance: Effortlessly meet all DPP data requirements.
• Enhance Consumer Trust: Offer verifiable transparency about a product's journey and sustainability claims.
• Enable Circularity: Facilitate second-life programs and provide clear end-of-life instructions.

✨ Key Features

• Detailed Garment Registration: An intuitive interface for registering comprehensive garment details, from material composition to CO₂ impact.
• DPP QR Code Generation: Automatically creates unique QR codes for each garment, linking to its public-facing Digital Product Passport.
• Blockchain Traceability: Immutably records essential garment data on a Polygon Smart Contract for maximum trust and transparency.
• Inventory Management: A dashboard for brands to view, search, and filter all their registered garments.
• Brand Authentication: Secure registration and login system for brands to manage their own product portfolios.

🚀 Technology Stack

Component	Core Technology
Frontend	React, Vite, TypeScript, Tailwind CSS, Shadcn/ui, Framer Motion
Backend	Node.js, Express, TypeScript, Supabase (Auth & DB)
Database	Supabase (PostgreSQL) with Edge Functions
Blockchain	Solidity, Hardhat, Ethers.js, Polygon (Amoy Testnet)
CI/CD & Testing	GitHub Actions, Jest, Supertest, Vitest

🏛️ Overall Architecture

QaRdrobe is designed as a monorepo containing three distinct, synergistic modules. This structure allows for a clear separation of concerns, facilitating maintenance and scalability.

%%{ init: { "theme": "base", "flowchart": { "curve": "basis" } }}%%

graph TD
    %% Actors
    subgraph "End User"
        U[👤 End User / Consumer]
    end

    subgraph "Brand"
        B[🏢 Fashion Brand]
    end

    %% QaRdrobe Platform
    subgraph "QaRdrobe Platform"
        subgraph "Frontend (React + Vite)"
            FE[frontendModule]
        end

        subgraph "Backend (Node.js + Express)"
            BE[backendModule]
        end

        subgraph "Smart Contract (Solidity)"
            SC[smartContractModule]
        end
    end

    %% External Services
    subgraph "External Infrastructure"
        DB[(Supabase DB)]
        AUTH[Supabase Auth]
        EDGE[Supabase Edge Function]
        POLY(Polygon Blockchain)
    end

    %% Data Flow
    U -- "Scans QR" --> FE
    B -- "Manages Garments" --> FE
    FE -- "API Requests" --> BE
    FE -- "Auth" --> AUTH

    BE -- "CRUD" --> DB
    BE -- "Enqueue Job" --> DB
    BE -- "Verify JWT" --> AUTH

    DB -- "Realtime" --> FE
    DB -- "Trigger" --> EDGE
    EDGE -- "Read Job" --> DB
    EDGE -- "Executes Tx" --> POLY
    EDGE -- "Updates" --> DB

    SC -- "Deployed on" --> POLY

    %% Styles for readability on both light & dark BG
    classDef actor fill:#F8F8F8,stroke:#4B5563,color:#333333,stroke-width:1px;
    classDef layer fill:#E8EEF8,stroke:#6366F1,color:#222222,stroke-width:1px;
    classDef infra fill:#3ECF8E,stroke:#047857,color:#ffffff,stroke-width:1px;
    classDef chain fill:#8247E5,stroke:#6d34c1,color:#ffffff,stroke-width:1px;

    class U,B actor;
    class FE,BE,SC layer;
    class DB,AUTH,EDGE infra;
    class POLY chain;

    %% Dashed edge for Edge‑>Chain
    style EDGE stroke-dasharray: 5 5;

Loading

🎨 Diagram Previews & Offline Export

Mermaid diagrams render natively on GitHub, GitLab and modern Markdown viewers. If your viewer lacks Mermaid support or you need static graphics (e.g., PPT, PDF), generate SVG fallbacks with:

npm run docs:build   # renders every ```mermaid block → README.md.svg

• SVGs are saved next to each Markdown file, so links remain relative.

• The CI workflow re‑generates them on every push—no manual upkeep.

• Tip (VS Code): install Markdown Preview Mermaid Support for live previews while editing.

📖 Interactive API Reference

The complete and updated backend API documentation is available and automatically served when the application is running in development mode.

• URL: https://qardrobe.onrender.com/api-docs/

The documentation is generated from the source code comments (/backendModule/src/controllers) using swagger-jsdoc. To manually regenerate the swagger.json file, run the following command from the backendModule directory:

npm run swagger

📄 Documentation

Detailed documentation for QaRdrobe, including design decisions, technical specifications, and user guides, is available on Notion.

• Notion Documentation: https://deadpan-rumba-730.notion.site/Documentaci-n-QaRdrobe-21457869b40580258818f06f9f202a7b

⚙️ Getting Started

Follow these instructions to set up and run the QaRdrobe platform locally.

Prerequisites

Ensure you have the following installed on your system:

• Node.js: v18.x or higher
• npm: v9.x or higher (comes with Node.js)
• Docker Desktop: For containerized development environment
• Git: For cloning the repository

Installation

1. Clone the repository:

   git clone https://github.com/ieshm-2daw/proyectointegrado-abrahammordev.git
   cd proyectointegrado-abrahammordev

2. Backend Module Setup:

   cd backendModule
   npm install
   cp .env.docker .env
   # Configure your Supabase credentials in .env
   cd ..

3. Frontend Module Setup:

   cd frontendModule
   npm install
   cp .env.docker .env
   # Configure your Supabase credentials and backend API URL in .env
   cd ..

4. Smart Contract Module Setup:

   cd smartContractModule
   npm install
   cp .env.docker .env
   # Configure your Polygon Amoy RPC URL and private key in .env
   cd ..

Running the Application

The easiest way to run the entire application is using Docker Compose:

1. Start all services:

   docker-compose up --build

   This command will:

   • Build Docker images for the backend, frontend, and smart contract modules.
   • Start all services, including Supabase Studio (for database management) and a local Hardhat blockchain node.

2. Access the applications:

   • Frontend (Local): http://localhost:5173
   • Frontend (Deployed): https://app.qardrobe.com
   • Backend API Documentation: http://localhost:3000/api-docs
   • Supabase Studio: http://localhost:8000 (Use supabase as username and password)

🧪 Testing

Each module has its own set of tests.

• Backend Tests:

  cd backendModule
  npm test

• Frontend Tests:

  cd frontendModule
  npm test

• Smart Contract Tests:

  cd smartContractModule
  npm test

🤝 Contributing

We welcome contributions to QaRdrobe! Please see our CONTRIBUTING.md for guidelines on how to contribute.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact

For any questions or inquiries, please open an issue on GitHub.