ETHPark - Decentralized Parking Marketplace

A decentralized, peer-to-peer parking marketplace built on Ethereum. Think "Airbnb for parking spots" but without a central company.

🚀 Features

• For Drivers: Find and book parking spots instantly with secure blockchain payments
• For Hosts: List your empty parking spot and earn passive income in ETH
• Trustless Escrow: Smart contract holds payments securely until booking ends
• No Middleman: Direct peer-to-peer transactions on the blockchain

🛠️ Tech Stack

• Frontend: React + Vite
• Styling: Tailwind CSS (Blue color theme)
• Web3: ethers.js v5
• Network: Ethereum Sepolia Testnet

📋 Prerequisites

• Node.js (v16 or higher)
• MetaMask browser extension
• Sepolia Testnet ETH (get from Sepolia Faucet)

🚀 Getting Started

1. Install Dependencies

npm install

2. Configure Smart Contract

Open src/contract.js and replace YOUR_SEPOLIA_CONTRACT_ADDRESS_HERE with your deployed contract address:

export const CONTRACT_ADDRESS = "0xYourContractAddressHere";

3. Run Development Server

npm run dev

The app will open at http://localhost:3000

4. Connect MetaMask

1. Make sure MetaMask is installed
2. Switch to Sepolia Testnet in MetaMask
3. Click "Connect Wallet" in the app
4. Approve the connection

🎯 How It Works

The Workflow (User Journey)

Alice (The Host)

1. Alice connects her MetaMask wallet
2. Goes to "List Your Spot" tab
3. Enters location (e.g., "123 Main St") and price (e.g., "0.01 ETH")
4. Clicks "List My Spot" and confirms transaction
5. Her spot is now live on the blockchain

Bob (The Driver)

1. Bob connects his wallet
2. Sees available spots on "Find Parking" tab
3. Finds Alice's spot: "123 Main St - 0.01 ETH"
4. Clicks "Book Now" and confirms payment
5. 0.01 ETH is sent to the smart contract (escrow)
6. The spot shows as "BOOKED"

The Payoff

1. Booking period ends (2 minutes in demo)
2. Alice sees "Ready to Claim" status
3. She clicks "Claim Payment"
4. Smart contract transfers 0.01 ETH to Alice's wallet

🏗️ Smart Contract Functions

// Host lists a new parking spot
function listSpot(string calldata _location, uint256 _price) external

// Driver books a spot (payable)
function bookSpot(uint256 _spotId) external payable

// Host claims payment after booking ends
function claimPayment(uint256 _spotId) external

// Get total number of spots
function nextSpotId() public view returns (uint256)

// Get spot details
function getSpot(uint256 _spotId) public view returns (...)

🎨 UI Components

• Header: Title, logo, and wallet connection
• Tabs: Switch between Driver and Host views
• DriverView: Browse and book available parking spots
• HostView: List new spots and manage your listings
• LoadingOverlay: Shows during transaction processing
• Notification: Success/error messages (toast style)

🎯 Hackathon Tracks

• Traffic Track: Addressing urban traffic congestion by making parking more efficient
• ETH-Based Track: Using Ethereum smart contracts for trustless, decentralized peer-to-peer payments

📝 Build Commands

# Development
npm run dev

# Production Build
npm run build

# Preview Production Build
npm run preview

🔒 Security Features

• Trustless Escrow: Payments held in smart contract until booking ends
• No Middleman: Direct peer-to-peer transactions
• Transparent: All transactions on public blockchain
• Immutable: Smart contract code cannot be changed

📱 Responsive Design

The app is fully responsive and works on:

• Desktop browsers
• Tablets
• Mobile devices

🎨 Design System

• Primary Colors: Blue shades (no gradients)
• Background: Light blue (primary-50)
• Buttons: Solid blue (primary-600)
• Hover States: Darker blue (primary-700)
• Text: Dark blue (primary-700) and medium blue (primary-600)

🤝 Contributing

This is a hackathon MVP. Feel free to fork and improve!

📄 License

MIT

🙏 Acknowledgments

Built for the HackBios 2025 Hackathon