Cryptocart: Web2.5 E-Commerce Architecture

A fully functioning Web2.5 E-Commerce platform that bridges the gap between decentralized Smart Contracts and high-speed traditional databases.

This project demonstrates how to build a trustless escrow payment system on Ethereum while maintaining a blazing-fast, Web2-style user experience using event-driven webhooks.

🏗️ System Architecture

This monorepo is divided into three core microservices:

1. cryptocart-web3 (Smart Contracts): Solidity contracts deployed on the Sepolia testnet using Hardhat. It handles adding products, holding funds in escrow, and releasing funds upon delivery confirmation.
2. cryptocart-indexer (The Graph): A custom subgraph deployed to The Graph network. It indexes blockchain events (ProductAdded, ProductPurchased) to provide a lightning-fast GraphQL endpoint for the frontend, bypassing slow RPC node queries.
3. cryptocart-frontend (React + Vercel + Supabase): - A modern React/Vite UI.
   • Hybrid Data: Pulls core transactional data from The Graph, and merges it with rich metadata (descriptions, categories) from a Supabase PostgreSQL database.
   • Webhooks: Utilizes Vercel Serverless Functions (/api/webhook) to catch Alchemy blockchain events and automatically update the Supabase database in real-time.

🚀 Tech Stack

• Blockchain: Solidity, Ethers.js, Hardhat, Sepolia Testnet
• Infrastructure: Alchemy (RPC & Notify Webhooks), The Graph (Indexing)
• Backend: Supabase (PostgreSQL), Vercel Serverless Functions
• Frontend: React, Vite, Tailwind CSS

🛠️ Local Setup Instructions

1. Environment Variables

Copy the .env.example file and create actual .env files in both the cryptocart-web3 and cryptocart-frontend directories. Fill in your Alchemy, Supabase, and Wallet credentials.

2. Smart Contracts

cd cryptocart-web3
npm install
npx hardhat run scripts/deploy.js --network sepolia

(Note the deployed contract address and update the frontend/subgraph configs).

3. Start the Frontend & Webhook Tunnel

To test the webhook locally, you need to simulate the Vercel environment and open an Ngrok tunnel for Alchemy to reach.

cd cryptocart-frontend
npm install
npx vercel dev

In a separate terminal, open the tunnel:

ngrok http 3000

Update your Alchemy Custom Webhook dashboard with the generated Ngrok URL.

🤝 Contributing

This was built as a proof-of-concept for Web2.5 event-driven architecture. Feel free to fork, open PRs, or use the webhook logic in your own Web3 projects!