Chilly is a comprehensive decentralized application (dApp) with smart contracts for on-chain order tracking and a modern Next.js frontend. Built with transparency, immutability, and Web3 integration.
chilly/
├── contracts/ # Smart Contract Layer (Hardhat)
│ ├── contracts/ # Solidity contracts
│ ├── scripts/ # Deployment scripts
│ ├── test/ # Contract tests
│ └── README.md # Contract documentation
│
└── frontend/ # Frontend Layer (Next.js)
├── app/ # Next.js App Router pages
│ ├── dashboard/ # Dashboard & order management
│ ├── analytics/ # Analytics page
│ └── ...
├── components/ # React components
├── lib/ # Utilities & Web3 config
└── public/ # Static assets
- 📦 Order Creation - Create immutable order records on-chain
- 🔄 Status Updates - Track order lifecycle (Pending → Confirmed → Processing → Shipped → Delivered)
- 🔗 Tracking Numbers - Add and update shipping tracking information
- 📝 Order History - Complete audit trail with timestamps and actors
- ❌ Order Cancellation - Cancel orders before delivery with reason tracking
- 🔐 Access Control - Only order participants can update orders
- 📊 Batch Operations - Efficient queries for multiple orders
- 🔔 Events - Real-time blockchain events for all state changes
- 🔗 Web3 Integration - Reown AppKit with 300+ wallet support (MetaMask, WalletConnect, etc.)
- 📧 Email Login - Passwordless authentication without a wallet
- 🌐 Social Logins - Google, X, GitHub, Discord, Apple
- 📦 Order Tracking - Create, update, and monitor orders with full transparency
- 📊 Interactive Dashboard - Comprehensive dashboard with order statistics, filtering, and real-time updates
- 🌍 Multi-chain Support - Ethereum Mainnet, Sepolia, Polygon, Arbitrum
- 🎨 Modern UI - Beautiful, responsive interface with Tailwind CSS and dark mode
- 🔍 Advanced Filtering - Filter by status, network, search across all fields
- 📈 Order Analytics - Analytics dashboard with charts and insights
- 📄 Order Details - Detailed view for each order with blockchain information
- 📤 Data Export - Export orders to JSON or CSV format
- 🔗 Block Explorer Integration - Direct links to view transactions on Etherscan
- ⛓️ Smart Contract Integration - Fully functional Solidity contract for on-chain order management
- 💰 Escrow System - Secure payment handling with automatic release on delivery
- 🔐 Dispute Resolution - Built-in dispute mechanism for order conflicts
- Node.js 18.x or higher
- npm, yarn, or pnpm
- A Web3 wallet (MetaMask recommended) or email for login
- Reown Project ID from cloud.reown.com
- Private key (for contract deployment to testnets/mainnet)
cd contracts
npm install
# Compile contracts
npm run compile
# Run tests
npm test# Deploy to testnet
npm run deploy:sepoliaNote: Smart contract tests are written in TypeScript and cover constructor, order creation, and order confirmation functionality. See contracts/test.md for a comprehensive list of test coverage.
See contracts/README.md for detailed documentation.
cd frontend
npm installCreate .env.local in the frontend folder:
# Get your Project ID from https://cloud.reown.comNEXT_PUBLIC_PROJECT_ID=your_project_id_here# Contract addresses (after deployment)NEXT_PUBLIC_CONTRACT_ADDRESS_SEPOLIA=deployed_contract_addressNEXT_PUBLIC_CONTRACT_ADDRESS_POLYGON=deployed_contract_addressNEXT_PUBLIC_CONTRACT_ADDRESS_ARBITRUM=deployed_contract_address# Optional: Configure default networkNEXT_PUBLIC_CHAIN_ID=1Note: Create a free account at Reown Cloud to get your Project ID.
Run the development server:
npm run devOpen http://localhost:3000 and connect your wallet!
npm run devOpen http://localhost:3000 in your browser
Connect your wallet using the connect button in the header
Navigate to the Dashboard to start creating and managing orders
The dashboard is the main interface for managing orders:
- View Orders: See all your orders in a grid layout with key information
- Filter Orders: Filter by status (pending, confirmed, processing, shipped, delivered, cancelled, disputed) or network
- Search: Search across order numbers, product names, and addresses
- Create Orders: Click "Create Order" to add new orders to the blockchain
- View Statistics: See real-time statistics about your orders
- Pending: Order created but not yet confirmed
- Confirmed: Order confirmed by seller
- Processing: Order being prepared
- Shipped: Order has been shipped
- Delivered: Order successfully delivered
- Cancelled: Order cancelled
- Disputed: Order under dispute
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
Frontend (.env.local):
NEXT_PUBLIC_PROJECT_ID- Your Reown AppKit Project ID from cloud.reown.com (Required)NEXT_PUBLIC_CHAIN_ID- Default chain ID (Optional, default: 1 for Ethereum Mainnet)NEXT_PUBLIC_RPC_URL- Custom RPC URL for blockchain interactions (Optional)
Smart Contracts (contracts/.env):
PRIVATE_KEY- Deployer private key (Required for deployment)SEPOLIA_RPC_URL- Sepolia testnet RPC URLMAINNET_RPC_URL- Mainnet RPC URLETHERSCAN_API_KEY- Etherscan API key for contract verification- See contracts/README.md for full configuration
- Framework: Next.js 16 - React framework with App Router
- Language: TypeScript - Type-safe JavaScript
- Styling: Tailwind CSS v4 - Utility-first CSS framework with dark mode
- Web3:
- wagmi - React Hooks for Ethereum
- viem - TypeScript Ethereum library
- Reown AppKit - Wallet connection UI (formerly WalletConnect)
- @tanstack/react-query - Data fetching and caching
- Smart Contracts:
- Utilities:
- date-fns - Date formatting utilities
chilly/
├── app/ # Next.js App Router pages
│ ├── dashboard/ # Dashboard pages
│ │ ├── orders/ # Order detail pages
│ │ │ └── [id]/ # Dynamic order detail route
│ │ └── page.tsx # Dashboard with order management
│ ├── analytics/ # Analytics page
│ │ └── page.tsx # Analytics dashboard
│ ├── layout.tsx # Root layout with Web3 provider
│ ├── page.tsx # Home/landing page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── dashboard/ # Dashboard-specific components
│ │ ├── OrderCard.tsx # Individual order card component
│ │ ├── OrderList.tsx # List of orders with loading states
│ │ ├── OrderFilters.tsx # Filtering and search components
│ │ ├── OrderStats.tsx # Statistics display component
│ │ ├── OrderStatusUpdate.tsx # Status update component
│ │ └── CreateOrderModal.tsx # Modal for creating new orders
│ ├── Header.tsx # Navigation header
│ ├── Hero.tsx # Hero section
│ ├── Features.tsx # Features showcase
│ ├── HowItWorks.tsx # How it works section
│ ├── CTA.tsx # Call to action
│ └── Footer.tsx # Footer component
├── lib/ # Utilities and configurations
│ ├── types.ts # TypeScript type definitions
│ ├── web3.ts # Web3 configuration (wagmi, Reown)
│ ├── Web3Provider.tsx # Web3 context provider
│ ├── mockData.ts # Mock data for development
│ └── exportUtils.ts # Export utilities (JSON, CSV)
├── public/ # Static assets
└── contracts/ # Smart contracts
├── OrderTracking.sol # Main order tracking contract
├── hardhat.config.js # Hardhat configuration
├── scripts/ # Deployment scripts
│ └── deploy.js # Contract deployment script
└── README.md # Contract documentation
We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with ❤️ by the open-source community
- Special thanks to all contributors
Made with Next.js and Web3 🌶️