Fake Product Identification for Small and Medium Firms (FPISMF) using Blockchain-Inspired Cryptographic Ledger

---

🔗 Live Demo

👉 View the Live Website

---

Overview

FPISMF is a final-year academic project designed to demonstrate product authenticity verification and supply-chain traceability for small and medium-sized firms. The application combines QR code generation and scanning, role-based workflows, Firebase cloud services (Authentication and Firestore), and a custom cryptographic transaction ledger that applies SHA-256 block hashing and AES data encryption concepts to record supply-chain custody transitions.

---

📸 Screenshots

Authentication & Role Selection	Manufacturer QR & Batch Generator

Distributor Intake & Transfer	Retailer Catalog & Order Management

Customer Verification & Timeline	Admin Stakeholder Approval

---

Problem Statement

Counterfeit goods pose significant economic and safety challenges across global supply chains. While large multinational enterprises can deploy dedicated private consortium blockchain networks or specialized hardware tracking systems, Small and Medium Enterprises (SMEs) often find these solutions cost-prohibitive and difficult to operate. There is a need for a lightweight, accessible web-based prototype that demonstrates how cryptographic hashing, unique serialization, and role-based access control can provide transparent product traceability without complex infrastructure requirements.

---

Proposed Solution

FPISMF provides a role-based web application prototype where:

1. Manufacturers generate unique QR codes and batch metadata, recording a genesis transaction.
2. Distributors and Retailers scan and log product custody changes into an append-only cryptographic transaction log.
3. Consumers can scan product QR codes using standard web camera or image uploads to inspect product provenance, verify authenticity against registered database records, and submit counterfeit reports if suspicious items are found.
4. Administrators approve stakeholder registrations, monitor product reports, and manage flagged listings.

---

Key Features

• Custom Cryptographic Transaction Ledger: Each supply chain event (creation, transit transfer, receipt, retail listing, sale) records a transaction containing the actor IDs, timestamps, previous block hash, and a computed SHA-256 hash using crypto-js.
• Client-Side AES Encryption: Client-side AES encryption (via crypto-js) is applied to product brand and description fields at batch creation as an academic demonstration of field-level data obfuscation before storage.
• Dynamic QR Code Generation & Scanning: Generates downloadable QR code labels for products and batches, with integrated camera and file-based scanning powered by html5-qrcode.
• Canvas-Based 2D Image Preprocessing: Includes a multi-pass HTML5 Canvas filtering utility (contrast enhancement, adaptive thresholding, and binarization) to assist QR decoding when uploaded images suffer from poor lighting or low contrast.
• Role-Based Access Control (RBAC): Enforces access separation across five distinct stakeholder roles with Firebase Authentication and Firestore Security Rules.
• Account Verification Lifecycle: Stakeholder accounts (Manufacturer, Distributor, Retailer) require administrative approval before gaining operational ledger access.
• Product Verification & Reporting: Consumers can check product status (e.g., whether a product is genuine, already sold, or flagged) and submit incident reports for administrative review.
• Document Exporting: Supports exporting verification records and compliance documents in PDF (jspdf) and DOCX (docx) formats.

---

User Roles

Role	Description & Available Actions
System Administrator	Reviews and approves/rejects stakeholder accounts, monitors system statistics, reviews consumer fraud reports, and flags or unlists suspicious products.
Manufacturer	Creates production batches, generates serialized product QR labels, logs initial genesis ledger transactions, and initiates dispatch to distributors.
Distributor	Scans incoming consignments, confirms receipt into the transaction ledger, and logs transfers to authorized retailers.
Retailer	Scans and accepts inventory from distributors, lists products with retail pricing, and marks units as sold to consumers upon purchase.
Consumer	Scans product QR codes to view the item's provenance history and authenticity status, places mock purchase orders, and submits reports on suspect products.

---

Supply Chain Workflow

+------------------+       +------------------+       +------------------+
|   MANUFACTURER   | ----> |   DISTRIBUTOR    | ----> |     RETAILER     |
| - Creates Batch  |       | - Scans Intake   |       | - Scans Intake   |
| - Generates QRs  |       | - Logs Transfer  |       | - Lists for Sale |
| - Mints Genesis  |       | - Chained SHA-256|       | - Marks as Sold  |
+------------------+       +------------------+       +------------------+
                                                               |
                                                               v
                                                      +------------------+
                                                      |     CONSUMER     |
                                                      | - Scans QR Code  |
                                                      | - Views History  |
                                                      | - Reports Fraud  |
                                                      +------------------+

---

Technology Stack

• Frontend Framework: React 19, TypeScript 5.8, Vite 6
• Styling: Tailwind CSS v4, Lucide React (icons), Motion (transitions)
• Backend & Database: Google Firebase Authentication (Email/Password), Google Cloud Firestore (NoSQL Document Store & Security Rules)
• Cryptography: crypto-js (SHA-256 transaction hashing and client-side AES string encryption via CryptoJS.AES)
• QR Code Engine: html5-qrcode (webcam & image scanning), react-qr-code and qrcode (generation)
• Document Generation: jspdf (PDF generation), docx (Word report exports)

---

Project Structure

├── docs/
│   ├── architecture.md          # Technical description of ledger data model & rules
│   ├── setup.md                 # Firebase configuration & deployment steps
│   └── screenshots/             # Interface screenshots & UI artifacts
├── src/
│   ├── components/              # Role-specific dashboard components
│   │   ├── AdminDashboard.tsx   # Account approval & report management
│   │   ├── Auth.tsx             # Login & registration forms
│   │   ├── CustomerDashboard.tsx# QR scanner, product verification & reporting
│   │   ├── DistributorDashboard.tsx # Ingestion & distributor transfer workflows
│   │   ├── ErrorBoundary.tsx    # React runtime error boundary
│   │   ├── LoadingOverlay.tsx   # Interactive loading & scanning indicators
│   │   ├── ManufacturerDashboard.tsx# Batch creation & QR label export
│   │   ├── RetailerDashboard.tsx# Inventory intake & customer sales
│   │   ├── Settings.tsx         # User profile details
│   │   └── StatusModal.tsx      # Feedback and confirmation modals
│   ├── utils/                   # Helper functions
│   │   ├── blockchain.ts        # SHA-256 hash chaining & AES helper functions
│   │   ├── firestore.ts         # Firestore error handling helpers
│   │   └── qrReconstruction.ts  # Canvas 2D thresholding & contrast filters
│   ├── App.tsx                  # Root component & auth state coordinator
│   ├── firebase.ts              # Firebase client initialization
│   ├── index.css                # Global CSS styles
│   ├── main.tsx                 # Application entry point
│   └── types.ts                 # Shared TypeScript interfaces & types
├── .env.example                 # Template for environment variables
├── .gitignore                   # Git exclusion rules
├── firebase.json                # Firebase hosting & index config
├── firestore.indexes.json       # Firestore composite index definitions
├── firestore.rules              # Firestore security rules
├── LICENSE                      # MIT License
├── package.json                 # Project dependencies & scripts
├── tsconfig.json                # TypeScript compiler configuration
└── vite.config.ts               # Vite configuration

---

Installation

Prerequisites

• Node.js (v18.0.0 or later, v20+ recommended)
• npm (v9+) or compatible package manager
• A Google Firebase account (free Spark plan is sufficient)

Clone & Install

# Clone the repository
git clone https://github.com/PplCallMeSk-15/Fake-Product-Identification-Blockchain.git
cd Fake-Product-Identification-Blockchain

# Install dependencies
npm install

---

Environment Configuration

1. Create a .env file in the project root by copying .env.example:

   cp .env.example .env

2. Obtain your Firebase Web App configuration from the Firebase Console under Project Settings > General > Your apps > Web app.

3. Populate .env with your project keys:

   VITE_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY
   VITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your-project-id
   VITE_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
   VITE_FIREBASE_APP_ID=YOUR_APP_ID
   VITE_FIREBASE_FIRESTORE_DATABASE_ID=(default)

4. Deploy Firestore security rules and composite indexes:

   npm install -g firebase-tools
   firebase login
   firebase use your-project-id
   firebase deploy --only firestore:rules,firestore:indexes

---

Running the Project

Development Server

npm run dev

The application will start on http://localhost:3000.

Type Checking & Linting

npm run lint

Production Build

npm run build
npm run preview

---

Usage & Testing the Workflows

To test the system locally, create accounts for each stakeholder role through the registration interface:

1. Create an Administrator Account:
   • Register a new account with your designated admin email.
   • In Firestore, navigate to the users collection and set role: "admin" and isApproved: true on your user document.
2. Register Stakeholder Accounts:
   • Register separate accounts selecting Manufacturer, Distributor, and Retailer roles.
   • Log in as the Admin to approve each pending stakeholder account from the Admin Dashboard.
3. Register a Consumer Account:
   • Register a user with the Customer role (customer accounts are active immediately).
4. Execute the Lifecycle:
   • Manufacturer: Log in and navigate to the batch creation tab. Enter batch details, create products, and download the generated QR code stickers.
   • Distributor: Scan product QR codes or enter product IDs to receive goods from the manufacturer, then transfer them to a retailer.
   • Retailer: Scan and accept goods, configure retail pricing in the catalog, and mark items as sold.
   • Customer: Use the Verification Scanner to scan a generated QR code (via webcam or image upload) to verify provenance and authenticity.

---

Academic Project

• Project Title: Fake Product Identification for Small and Medium Firms (FPISMF) using Blockchain Technology
• Degree: Bachelor of Technology (B.Tech) in Computer Science & Engineering
• Domain: Cryptographic Applications, Supply Chain Traceability, Cloud-Based Web Engineering

---

Future Improvements

• Public / Private Blockchain Network Integration: Transitioning the ledger from Firestore-stored transaction chains to a live blockchain network (e.g., Ethereum, Polygon, or Hyperledger Fabric) using smart contracts.
• Decentralized Storage: Utilizing IPFS or Arweave for decentralized storage of product images and batch compliance certificates.
• Mobile Application: Building native iOS/Android mobile clients with hardware-accelerated QR code scanning and offline verification caching.
• Cryptographic Digital Signatures: Implementing asymmetric public-private key pairs (ECDSA / Ed25519) so manufacturers and distributors cryptographically sign state updates.
• Automated Anomaly Detection: Implementing advanced fraud analytics to detect geographically impossible rapid scans or duplicate scan anomalies in real time.

---

License

This project is open-source and available under the MIT License.