A fully decentralized, serverless Web3 eCommerce storefront that allows users to purchase coffee using cryptocurrency. The project features a Next.js frontend, a hyper-fast Cloudflare Workers serverless backend, and custom Solidity smart contracts on the Ethereum Sepolia Testnet for handling payments and loyalty rewards.
This repository is built as a monorepo containing three distinct layers:
- Framework: Next.js
- Hosting: Vercel
- Web3 Integration: Ethers.js / Wagmi (Wallet connection and contract interaction)
- Features: Reads coffee menus from the backend and processes on-chain transactions via MetaMask.
- Framework: Cloudflare Workers (Serverless)
- Storage: Cloudflare KV / Upstash Redis
- CI/CD: Automated GitLab dual-push pipeline for seamless deployments.
- Features: A backend-less API architecture that securely serves menu items and handles off-chain logic without managing traditional servers.
- Framework: Hardhat (with Hardhat Ignition)
- Network: Ethereum Sepolia Testnet
- Features: Handles secure multi-currency checkouts (ETH, USDC) and an ERC20-based customer loyalty rewards system.
Both smart contracts are fully verified and interactive on Etherscan:
- Crypto Coffee Token (CCT) - Loyalty ERC20:
0x279a71b485FCFCEB5421c8A573B21CC9eb0523dE - Cafe Coffee Payment Engine:
0x491b302C0BEEAd5Dfa9E32aA1386ca41D3E75209
- Node.js (v18+)
- MetaMask browser extension (configured to Sepolia Testnet)
- Sepolia Testnet ETH for gas fees
Navigate to the blockchain directory, install dependencies, and set up your local environment:
cd blockchain
npm install- Launch Ganache GUI or run Ganache CLI in a separate terminal:
ganache-cli -p 7545
- Compile and deploy your contracts locally to your Ganache instance using Hardhat Ignition:
npx hardhat ignition deploy ./ignition/modules/Deployer.ts --network ganache
Create a .env file in the /blockchain directory:
SEPOLIA_RPC_URL="your_alchemy_or_infura_url"
SEPOLIA_PRIVATE_KEY="your_wallet_private_key"
ETHERSCAN_API_KEY="your_etherscan_key"- Run the Hardhat Ignition script targeting Sepolia:
npx hardhat ignition deploy ./ignition/modules/Deployer.ts --network sepolia
- Verify your smart contracts on Etherscan using the modern verification syntax (providing constructor strings if applicable):
# Verify Loyalty Token npx hardhat verify --network sepolia 0x279a71b485FCFCEB5421c8A573B21CC9eb0523dE "Crypto Coffee Token" "CCT" # Verify Payment Engine (Passing USDC, WETH, and CCT addresses as constructor args) npx hardhat verify --network sepolia 0x491b302C0BEEAd5Dfa9E32aA1386ca41D3E75209 "0x694AA1769357215DE4FAC081bf1f309aDC325306" "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238" "0x279a71b485FCFCEB5421c8A573B21CC9eb0523dE"
Navigate to the backend directory and run the Cloudflare Worker locally:
cd cafe-coffee-backend
npm install
npx wrangler devProduction backend deployments are handled automatically via GitLab CI/CD upon merging to the main branch.
Configure non-sensitive public environment paths directly within your local wrangler.toml file under the [vars] block. Sensitive variables (like Upstash Redis passwords or Database Connection Strings) are added safely through the Cloudflare Dashboard > Workers & Pages > Settings > Variables and Secrets setting as encrypted Secrets.
Production pushes are systematically deployed on code updates via the GitLab CI/CD runner execution.
Navigate to the frontend directory, configure your environment variables, and start the Next.js development server:
cd frontend
npm installCreate a .env file in the /frontend directory:
NEXT_PUBLIC_CAFE_TOKEN_ADDRESS=0x5601f212Bf7c05427c73aC13585F7b3dD14DE2de
NEXT_PUBLIC_CAFE_PAYMENT_ADDRESS=0xC2397c34628D921dd560000090f92938135Ee6D1
NEXT_PUBLIC_USDC_ADDRESS=0x6a07246d11564b44764E5ff765121fD931371c28
NEXT_PUBLIC_MockV3Aggregator_ADDRESS=0x069c6727837B29fC38e013aFE6a796FC6729202F
NEXT_PUBLIC_BACKEND_URL=http://127.0.0.1:8787
NEXT_PUBLIC_NODE_ENV=developmentUsing all the contracts over here as local contracts deployed locally in Ganache
Start your Next.js development server:
npm run devOpen http://localhost:3000 with your browser to experience the localized sandbox flow!
When linking this repository layout inside Vercel:
- Ensure the Root Directory setting is explicitly set to frontend
- Configure your Framework Preset field to explicitly use Next.js to guarantee the builder targets the hidden .next production output directory rather than a static fallback.
- Import your environment variables into the Production and Preview scopes via Vercel's .env configuration dashboard before starting your build pipeline execution.
Contributions are welcome! Please feel free to submit a Pull Request. Developed with ❤️ by Diprajit Chakraborty