🔗 Echain Supply - Blockchain Supply Chain Traceability Platform

A revolutionary blockchain-powered supply chain traceability platform that ensures product authenticity, transparency, and trust from manufacturer to consumer using Stacks blockchain and Clarity smart contracts.

Youtube link : https://www.youtube.com/watch?v=08OGf5A9tD0

📖 Project Description

Echain Supply is a comprehensive decentralized supply chain management platform that leverages Stacks blockchain technology and Clarity smart contracts to provide end-to-end product traceability. The platform enables manufacturers, vendors, warehouses, and customers to track products through every stage of the supply chain, ensuring authenticity, transparency, and trust.

Key innovations include:

Immutable Product Records - All product data stored on Stacks blockchain
QR Code Verification - Instant product authentication via blockchain
Multi-Stakeholder Platform - Dedicated portals for each supply chain participant
Real-time Tracking - Live updates of product journey and status
Smart Contract Automation - Automated verification and compliance checks

🔧 Tech Stack

Frontend Technologies

Technology	Version	Purpose
Next.js	15.2.4	React framework with App Router
React	19	UI library for interactive components
TypeScript	5.0+	Type-safe JavaScript development
Tailwind CSS	v4.1.12	Utility-first CSS framework
Framer Motion	Latest	Animation and gesture library
shadcn/ui	Latest	Pre-built accessible UI components

Backend & Blockchain

Technology	Purpose
Stacks Blockchain	Decentralized smart contract platform
Clarity Language	Smart contract development
Firebase Firestore	Real-time database for off-chain data
Stacks.js	Blockchain interaction library

Development Tools

Tool	Purpose
Clarinet	Clarity smart contract development environment
Stacks CLI	Command-line interface for Stacks
ESLint	Code linting and formatting
Prettier	Code formatting

🚀 Smart Contract Deployment

📍 Contract Addresses

Testnet Deployment

Contract Name: supply-chain-tracker
Contract Address: STHK32FSHBAWT513Y7806RME1BCH44QJKRN2XRQB.product-traceability1
Deployment Transaction: 0x1234567890abcdef...
Network: Stacks Testnet
Block Height: 123456

Mainnet Deployment (Coming Soon)

Contract Name: supply-chain-tracker
Network: Stacks Mainnet
Status: Planned for production release

🔗 Contract Verification

Explorer Link: View on Stacks Explorer
Source Code: Available in /contracts directory
Deployment Script: scripts/deploy-contract.js

⚡ Setup Instructions

Prerequisites

Before running this project, ensure you have:

Node.js 18.0 or higher
npm or pnpm package manager
Git for version control
Stacks Wallet (Hiro Wallet recommended)
Clarinet for smart contract development (optional)

🔧 Installation Steps

1. Clone the Repository

git clone https://github.com/Shashikumar-ezhilarasu/echaindeply-supplychain.git
cd echaindeply-supplychain

2. Install Dependencies

# Install frontend dependencies
npm install

# Or using pnpm (recommended)
pnpm install

3. Environment Configuration

Create a .env.local file in the root directory:

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# Stacks Network Configuration
NEXT_PUBLIC_STACKS_NETWORK=testnet
NEXT_PUBLIC_CONTRACT_ADDRESS=ST1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ1234.supply-chain-tracker
NEXT_PUBLIC_CONTRACT_NAME=supply-chain-tracker

# Application Settings
NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Firebase Setup

Create a new project at Firebase Console
Enable Firestore Database
Configure authentication (optional)
Copy configuration to .env.local

5. Stacks Wallet Setup

Install Hiro Wallet browser extension
Create or import wallet
Switch to Testnet for development
Get testnet STX from faucet

6. Smart Contract Setup (Optional - for developers)

# Install Clarinet
curl -L https://github.com/hirosystems/clarinet/releases/latest/download/clarinet-linux-x64.tar.gz | tar xz
sudo mv clarinet /usr/local/bin

# Navigate to contracts directory
cd contracts

# Check contract syntax
clarinet check

# Run contract tests
clarinet test

# Deploy to testnet
clarinet deploy --testnet

7. Run Development Server

npm run dev
# or
pnpm dev

8. Access Application

Open your browser and navigate to:

http://localhost:3000

🔧 Additional Setup Options

Docker Setup (Alternative)

# Build Docker image
docker build -t echain-supply .

# Run container
docker run -p 3000:3000 echain-supply

Production Build

# Build for production
npm run build

# Start production server
npm start

📱 How to Use the Project

🏭 For Manufacturers

Step 1: Authentication

Navigate to /manufacturer/login
Click "Connect Wallet"
Approve connection in your Stacks wallet
Automatic redirect to manufacturer dashboard

Step 2: Product Creation

Access the dashboard sidebar
Click "Add New Product"
Fill in product details:
- Product name and description
- Batch number and manufacturing date
- Quality certifications
- Origin information
Submit to create blockchain record

Step 3: QR Code Generation

Select products from your inventory
Click "Generate QR Codes"
Bulk generate unique QR codes
Download QR codes for product labeling
Each QR links to blockchain verification

Step 4: Monitor Dashboard

View real-time product statistics
Track QR code generation count
Monitor inventory levels
Access wallet information

🏪 For Vendors & Warehouses

Step 1: Login & Setup

Navigate to respective login portal
Connect Stacks wallet
Access role-specific dashboard

Step 2: Product Scanning

Use QR scanner feature
Scan manufacturer QR codes
Verify product authenticity
Update product status/location

Step 3: Inventory Management

View scanned products
Track product movements
Update checkpoint status
Monitor supply chain flow

👤 For Customers

Step 1: Product Scanning

Open any QR code scanner app
Scan product QR code
Automatically redirected to product page

Step 2: View Product Journey

See animated timeline of product journey
View each supply chain stage:
- Farm Origin - Harvest details and certifications
- Processing - Quality control and facility info
- Distribution - GPS tracking and delivery
- Retail - Store location and pricing

Step 3: Verification & Actions

Verify blockchain authenticity
Download quality certificates
Report any issues
Access complete product history

🔗 Blockchain Interaction Flow

Smart Contract Functions

;; Create new product record
(create-product (product-id uint) (manufacturer principal) (metadata (string-ascii 256)))

;; Update product status
(update-status (product-id uint) (new-status (string-ascii 50)) (updater principal))

;; Verify product authenticity
(verify-product (product-id uint))

;; Transfer product ownership
(transfer-product (product-id uint) (from principal) (to principal))

Frontend Integration

// Connect to Stacks wallet
const { userData, connectWallet } = useStacks();

// Create product on blockchain
const createProduct = async (productData) => {
  const contractCall = await makeContractCall({
    contractAddress: CONTRACT_ADDRESS,
    contractName: CONTRACT_NAME,
    functionName: 'create-product',
    functionArgs: [/* product arguments */],
    senderKey: userSession.loadUserData().appPrivateKey,
  });
};

👥 Team Members

🚀 Development Team

Role	Name	GitHub	Contribution
Lead Developer & Blockchain Architect	Shashikumar Ezhilarasu	@Shashikumar-ezhilarasu	Full-stack development, Smart contracts, System architecture
Lead Developer & Blockchain Architect	Srivatsa	-	Full-stack development, Smart contracts, System architecture
Lead Developer & Blockchain Architect	Dhanush	-	Full-stack development, Smart contracts, System architecture

🎯 Project Responsibilities

Frontend Development - React/Next.js application with modern UI/UX
Smart Contract Development - Clarity contracts for supply chain logic
Blockchain Integration - Stacks.js integration and wallet connectivity
Database Design - Firebase Firestore schema and real-time features
UI/UX Design - Modern interface with animations and responsive design
Documentation - Comprehensive project documentation and guides

📸 Screenshots & Demo

🖼️ Application Screenshots

Hero Sections with Google Gemini Effect

[Add screenshot of animated login pages]

Manufacturer portal with animated background
Vendor login with glassmorphism design
Customer portal with scroll-based animations

Dashboard Interfaces

[Add screenshots of each dashboard]

Manufacturer dashboard with real-time statistics
Collapsible sidebar with wallet integration
QR code generation interface
Product management system

Product Timeline

[Add screenshot of timeline animation]

Animated product journey visualization
Interactive timeline with scroll progress
Rich content cards with product details
Mobile-responsive design

QR Scanning Flow

[Add screenshots of scanning process]

QR code scanning interface
Product verification page
Blockchain confirmation display
Certificate download options

🎥 Demo Videos

Platform Walkthrough

[Add video link showing complete platform tour]

User registration and wallet connection
Dashboard navigation and features
Product creation and QR generation process

Supply Chain Journey

[Add video demonstrating end-to-end flow]

Manufacturer creating product
Vendor/warehouse scanning checkpoints
Customer scanning and verification
Blockchain verification process

Smart Contract Interaction

[Add video showing blockchain features]

Contract deployment process
Transaction creation and confirmation
Real-time blockchain updates
Wallet integration demonstration

📱 Mobile Experience

[Add mobile screenshots]

Responsive design across devices
Touch-friendly QR scanning
Mobile wallet integration
Optimized timeline animations

🏗️ Architecture & Code Quality

📂 Project Structure

echaindeply/
├── contracts/                   # Clarity smart contracts
│   ├── supply-chain-tracker.clar   # Main contract
│   ├── tests/                      # Contract tests
│   └── Clarinet.toml              # Clarinet configuration
├── app/                         # Next.js App Router
│   ├── customer/               # Customer portal pages
│   ├── manufacturer/           # Manufacturer portal pages
│   ├── vendor/                 # Vendor portal pages
│   ├── warehouse/              # Warehouse portal pages
│   └── globals.css             # Global styles
├── components/                  # React components
│   ├── ui/                     # shadcn/ui components
│   └── custom/                 # Custom components
├── hooks/                      # Custom React hooks
├── lib/                        # Utility libraries
├── public/                     # Static assets
├── styles/                     # Additional styles
├── scripts/                    # Deployment scripts
├── .env.example               # Environment variables template
├── README.md                  # Project documentation
└── package.json               # Dependencies and scripts

🔍 Code Quality Standards

Smart Contract Best Practices

;; supply-chain-tracker.clar
;; Main contract for supply chain product tracking

;; Define data structures
(define-map products 
  { product-id: uint } 
  { 
    manufacturer: principal,
    created-at: uint,
    metadata: (string-ascii 256),
    current-status: (string-ascii 50),
    is-verified: bool
  }
)

;; Create new product with validation
(define-public (create-product (product-id uint) (metadata (string-ascii 256)))
  (begin
    ;; Validate input parameters
    (asserts! (> product-id u0) (err u400))
    (asserts! (> (len metadata) u0) (err u401))
    
    ;; Check if product already exists
    (asserts! (is-none (map-get? products { product-id: product-id })) (err u402))
    
    ;; Create product record
    (map-set products 
      { product-id: product-id }
      {
        manufacturer: tx-sender,
        created-at: block-height,
        metadata: metadata,
        current-status: "created",
        is-verified: true
      }
    )
    
    ;; Emit event for frontend listening
    (print { event: "product-created", product-id: product-id, manufacturer: tx-sender })
    (ok product-id)
  )
)

Frontend Code Standards

TypeScript for type safety
ESLint for code linting
Prettier for consistent formatting
Component modularity with single responsibility
Custom hooks for reusable logic
Error boundaries for robust error handling

Testing Coverage

# Run smart contract tests
clarinet test

# Run frontend tests
npm test

# Generate coverage report
npm run test:coverage

🚀 Deployment Guide

📍 Smart Contract Deployment

Testnet Deployment

# Deploy to Stacks testnet
clarinet deploy --testnet

# Verify deployment
stx call_read_only_fn ST1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ1234 supply-chain-tracker get-product-count

Frontend Deployment

# Build production version
npm run build

# Deploy to Vercel
vercel deploy

# Or deploy to Netlify
netlify deploy --prod

🔧 Environment Configuration

Ensure all environment variables are properly configured for production deployment.

📄 License

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

🙏 Acknowledgments

Stacks Foundation - For providing the blockchain infrastructure
Clarity Language - For smart contract development tools
shadcn/ui - For the excellent component library
Next.js Team - For the powerful React framework
Vercel - For deployment and hosting platform

📞 Support & Contact

GitHub Issues: Report bugs or request features
Documentation: Project Wiki
Email: Contact the developer

🔗 Built with ❤️ on Stacks Blockchain by Shashikumar Ezhilarasu

Revolutionizing supply chain transparency through blockchain technology, one scan at a time.

🎯 Key Features

🔒 Blockchain Security - Immutable records on Stacks blockchain
📱 QR Code Traceability - Scan products to view complete journey
👥 Multi-Role Dashboard - Manufacturer, Vendor, Warehouse, Customer portals
🎨 Modern UI/UX - Google Gemini Effect animations & glassmorphism design
📊 Real-time Analytics - Live product statistics and inventory tracking
🔐 Wallet Integration - Secure Stacks wallet connectivity
📈 Interactive Timeline - Animated product journey visualization

🚀 Demo & Media

📸 Screenshots

Add your screenshots here:

Hero sections with Google Gemini Effect
Dashboard interfaces
QR scanning flow
Timeline animations
Wallet integration

🎥 Video Demonstrations

Add your video links here:

Platform walkthrough
QR scanning demo
Dashboard functionality
Blockchain verification process

🏗️ Architecture

Technology Stack

Layer	Technology	Purpose
Frontend	Next.js 15.2.4 + React 19	Modern web application framework
Styling	Tailwind CSS v4.1.12	Utility-first CSS framework
Components	shadcn/ui	Pre-built accessible components
Animations	Framer Motion	Smooth animations and transitions
Backend	Firebase Firestore	Real-time database
Blockchain	Stacks	Decentralized verification layer
Authentication	Stacks Wallet	Blockchain-based authentication
TypeScript	Full type safety	Enhanced developer experience

Project Structure

echaindeply/
├── app/                          # Next.js App Router
│   ├── customer/                 # Customer portal
│   │   ├── [productId]/         # Dynamic product pages
│   │   ├── login/               # Customer authentication
│   │   └── scan-info/           # Product scanning interface
│   ├── manufacturer/            # Manufacturer portal
│   │   ├── dashboard/           # Manufacturing dashboard
│   │   ├── generate-qr/         # QR code generation
│   │   └── login/               # Manufacturer authentication
│   ├── vendor/                  # Vendor portal
│   │   ├── dashboard/           # Vendor management
│   │   ├── login/               # Vendor authentication
│   │   └── product-details/     # Product information
│   ├── warehouse/               # Warehouse portal
│   │   ├── dashboard/           # Warehouse operations
│   │   ├── login/               # Warehouse authentication
│   │   └── scan-checkpoint/     # Checkpoint scanning
│   ├── globals.css              # Global styles
│   ├── layout.js                # Root layout
│   └── page.js                  # Homepage
├── components/                   # Reusable components
│   ├── ui/                      # shadcn/ui components
│   │   ├── google-gemini-effect.tsx    # Hero animations
│   │   ├── timeline.tsx         # Product journey timeline
│   │   └── [other-ui-components] # Various UI components
│   ├── sidebar-demo.tsx         # Dashboard sidebar
│   ├── timeline-demo.tsx        # Timeline implementation
│   └── [other-components]       # Feature components
├── hooks/                       # Custom React hooks
│   ├── use-mobile.ts           # Mobile detection
│   ├── use-toast.ts            # Toast notifications
│   └── use-stacks.js           # Stacks blockchain integration
├── lib/                         # Utility libraries
│   ├── firebase.js             # Firebase configuration
│   ├── utils.ts                # General utilities
│   └── stx-utils.js            # Stacks utilities
├── public/                      # Static assets
└── styles/                      # Additional styles

🎨 User Interfaces

1. Authentication Portals

Each user role has a dedicated login portal with Google Gemini Effect animations:

🏭 Manufacturer Portal - Product creation and QR generation
🏪 Vendor Portal - Inventory management and product scanning
🏬 Warehouse Portal - Checkpoint scanning and logistics
👤 Customer Portal - Product verification and traceability

2. Dashboard Features

Manufacturer Dashboard

Real-time Statistics - Product count, QR codes generated, inventory levels
Product Management - Create, edit, delete products
QR Code Generation - Bulk QR creation with blockchain verification
Collapsible Sidebar - Space-efficient navigation
Wallet Integration - Stacks address display and management

Customer Scan Interface

Product Timeline - Animated journey from origin to shelf
Verification Status - Blockchain authenticity confirmation
Interactive Elements - Download certificates, report issues
Rich Content - Images, metadata, and quality scores

⚡ Quick Start

Prerequisites

Node.js 18+
npm or pnpm
Stacks wallet (for blockchain features)
Firebase account (for database)

Installation

Clone the repository

git clone https://github.com/Shashikumar-ezhilarasu/echaindeply-supplychain.git
cd echaindeply-supplychain

Install dependencies

npm install
# or
pnpm install

Environment Setup Create a .env.local file:

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# Stacks Network Configuration
NEXT_PUBLIC_STACKS_NETWORK=testnet

Run the development server

npm run dev
# or
pnpm dev

Open your browser Navigate to http://localhost:3000

🔧 Configuration

Firebase Setup

Create a Firebase project
Enable Firestore database
Add your web app configuration to .env.local

Stacks Wallet Integration

Install a Stacks wallet (Hiro Wallet recommended)
Switch to testnet for development
Fund your wallet with testnet STX

shadcn/ui Components

The project uses shadcn/ui with the following configuration:

{
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

📱 Usage Guide

For Manufacturers

Login - Connect your Stacks wallet
Create Products - Add product details and specifications
Generate QR Codes - Create unique blockchain-verified QR codes
Monitor Dashboard - Track real-time statistics and inventory

For Vendors & Warehouses

Login - Connect your Stacks wallet
Scan Products - Use QR scanner for product verification
Update Status - Log product movements and checkpoints
Manage Inventory - Track products through the supply chain

For Customers

Scan QR Code - Use any QR scanner app
View Timeline - See complete product journey
Verify Authenticity - Check blockchain confirmation
Access Details - Download certificates and quality reports

🛠️ Development

Adding New Components

npx shadcn-ui@latest add [component-name]

Code Structure

Follow Next.js App Router conventions
Use TypeScript for type safety
Implement proper error boundaries
Follow accessibility guidelines

Styling Guidelines

Use Tailwind CSS utility classes
Maintain dark theme consistency
Implement responsive design
Use CSS custom properties for themes

🚀 Deployment

Vercel (Recommended)

npm run build
vercel deploy

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Write meaningful commit messages
Add tests for new features
Update documentation
Follow code style conventions
Ensure accessibility compliance

📄 License

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

🙏 Acknowledgments

shadcn/ui - For the excellent component library
Aceternity UI - For animation inspirations
Stacks Foundation - For blockchain infrastructure
Vercel - For deployment platform
Next.js Team - For the amazing framework

📞 Support

Documentation: Project Wiki
Issues: GitHub Issues
Discussions: GitHub Discussions

🔮 Roadmap

Built with ❤️ by Shashikumar Ezhilarasu

Revolutionizing supply chain transparency, one scan at a time.

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
app		app
components		components
hooks		hooks
lib		lib
public		public
styles		styles
.gitignore		.gitignore
QR.png		QR.png
README.md		README.md
app-structure.tsx		app-structure.tsx
components.json		components.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Shashikumar-ezhilarasu/echaindeploy-supplychain

Folders and files

Latest commit

History

Repository files navigation

🔗 Echain Supply - Blockchain Supply Chain Traceability Platform

📖 Project Description

🔧 Tech Stack

Frontend Technologies

Backend & Blockchain

Development Tools

🚀 Smart Contract Deployment

📍 Contract Addresses

Testnet Deployment

Mainnet Deployment (Coming Soon)

🔗 Contract Verification

⚡ Setup Instructions

Prerequisites

🔧 Installation Steps

1. Clone the Repository

2. Install Dependencies

3. Environment Configuration

4. Firebase Setup

5. Stacks Wallet Setup

6. Smart Contract Setup (Optional - for developers)

7. Run Development Server

8. Access Application

🔧 Additional Setup Options

Docker Setup (Alternative)

Production Build

📱 How to Use the Project

🏭 For Manufacturers

Step 1: Authentication

Step 2: Product Creation

Step 3: QR Code Generation

Step 4: Monitor Dashboard

🏪 For Vendors & Warehouses

Step 1: Login & Setup

Step 2: Product Scanning

Step 3: Inventory Management

👤 For Customers

Step 1: Product Scanning

Step 2: View Product Journey

Step 3: Verification & Actions

🔗 Blockchain Interaction Flow

Smart Contract Functions

Frontend Integration

👥 Team Members

🚀 Development Team

🎯 Project Responsibilities

📸 Screenshots & Demo

🖼️ Application Screenshots

Hero Sections with Google Gemini Effect

Dashboard Interfaces

Product Timeline

QR Scanning Flow

🎥 Demo Videos

Platform Walkthrough

Supply Chain Journey

Smart Contract Interaction

📱 Mobile Experience

🏗️ Architecture & Code Quality

📂 Project Structure

🔍 Code Quality Standards

Smart Contract Best Practices

Frontend Code Standards

Testing Coverage

🚀 Deployment Guide

📍 Smart Contract Deployment

Testnet Deployment

Frontend Deployment

🔧 Environment Configuration

📄 License

🙏 Acknowledgments

📞 Support & Contact

🎯 Key Features

🚀 Demo & Media

📸 Screenshots

🎥 Video Demonstrations

🏗️ Architecture

Packages