Digital Product Passport Consumer App (Frontend)

What is digital product passport consumer application?

The digital product passport consumer application provides a user interface to request a battery passport from a battery manufacturer using the standardized components and technologies in a Catena-X network. The passport will be displayed in a human-readable from any browser. The data exchange standards given by Catena-X are used to provide the battery passport to different personas (roles) in the network.

In particular, the appliction is used to access the battery passport data provided by battery manufacturer. By scanning QR-code or knowing the manufacturer and battery-ID, a user can request the passport through Eclipse Dataspace Connectors (EDCs) over the Catena-X network. The passport provider will provide data attributes that is only visible to a permitted signed-in user.

Getting Started

To get Started you can have a look into our documentation:

Name	Description
Arc42	Arc42 of Digital Product Pass
Administration Guide	Backend documentation Product Passport App
Backend Documentation	Backend documentation Product Passport App
Deployment in Hotel Budapest	Technical Guide - Deployment in ArgoCD Hotel Budapest (integration environment)
Docker Overview	Overview on general docker commands
Keycloak Overview	This guide describes how to setup a keycloak instance in local docker container and import existing realm.json file.
Short Introduction into the project	Battery Pass Allpication infrastructure, installation guide, technical usage guide
Code Scaning with Kics and Trivy	Infrastructure As Code (IaC) with KICS intends to find security vulnerabilities by scanning the code and upload results to the security dashboard in github
Release Guideance	Product Battery Pass Consumer App Release Guide
Secret Management	Secrets management with CX HashiCorp Vault and ArgoCD Vault Plugin (AVP) - client credentials, database passwords, access tokens
Cypress Overview	Documentation for Battery Passport App E2E Cypress test
End User Manual	End User Manual Product Viewer App
Postman Overview	Technical guide depicts the battery pass end-to-end API calls through the postman REST client
Changelog	Changelog

Prerequisites:

• Git
• Code editor (VS Code/ IntelliJ recommended)
• Nodejs 16 (Node Package Manager - npm)
• Vuejs
• Docker
• Git Bash (for windows operating system only)

Installation

Clone project repository

git clone https://github.com/eclipse-tractusx/digital-product-pass.git

Install dependencies

cd digital-product-pass/
npm install --legacy-peer-deps

Run Project

Compiles and minifies for production

npm run build

Method 1: Without Docker

Compiles and hot-reloads for development

npm run serve

Method 2: With Docker

The Dockerfile is located in the project root directory.

# build docker image
docker build -t consumer-ui:latest .

# run docker image
docker run -p 8080:8080 --name consumer-ui -d consumer-ui:latest

# check logs
docker logs consumer-ui

# stop and remove docker container
docker stop consumer-ui; docker rm consumer-ui;

You can run the application in docker container with existing image from GitHub packages.

# pull the image 
# Replace placeholder <LATEST_TAG> with the most recent tag in registry

docker pull ghcr.io/eclipse-tractusx/digital-product-pass/consumer-ui:<LATEST_TAG>

# run docker image
docker run -p 8080:8080 --name consumer-ui -d ghcr.io/eclipse-tractusx/digital-product-pass/consumer-ui:<LATEST_TAG>

The consumer frontend is available in browser at http://localhost:8080

Coding styles

How to set up a code editor

See VSCode configuration.

License

Apache-2.0