A modern, responsive frontend for a decentralized raffle system built with Next.js, Web3 integration, and smart contract interaction capabilities.

• 🎟️ Enter Raffle: Seamlessly participate in decentralized raffles with ETH
• 👛 Wallet Integration: Connect with popular wallets via RainbowKit
• 📊 Real-time Updates: Live raffle statistics and player counts
• 🏆 Winner Display: View recent winners and raffle history
• ⚡ Multi-chain Support: Works on Sepolia testnet and Hardhat local network
• 📱 Responsive Design: Mobile-friendly interface with modern UI
• 🔄 Auto-refresh: Smart polling for real-time blockchain state updates
• ⛽ Gas Optimization: Efficient contract interactions

The frontend connects to a decentralized raffle smart contract that handles:

• Entry fee collection
• Random winner selection using Chainlink VRF
• Automated prize distribution
• Raffle state management

Backend Repository: smartcontract-raffle

raffle-frontend/
├── components/              # React components
│   ├── Header.js           # Wallet connection header
│   ├── ManualHeader.js     # Alternative header component
│   └── RaffleEntrance.js   # Main raffle interface
├── constants/              # Smart contract configuration
│   ├── abi.json           # Contract ABI
│   ├── contractAddresses.json # Deployed contract addresses
│   └── index.js           # Constants exports
├── pages/                  # Next.js pages
│   ├── _app.js            # App configuration with providers
│   └── index.js           # Homepage
├── styles/                 # CSS modules
│   ├── globals.css        # Global styles
│   ├── Home.module.css    # Homepage styles
│   └── RaffleEntrance.module.css # Raffle component styles
└── public/                 # Static assets

• Node.js 16+ and Yarn
• MetaMask or compatible Web3 wallet
• Access to Sepolia testnet ETH (for testing)
• Backend setup required - Smart contracts must be deployed first

⚠️ Important: You must run the backend first to deploy contracts and generate the necessary ABI/address files!

1. Clone and setup the smart contract repository

   git clone https://github.com/Shreyassp002/smartcontract-raffle
   cd smartcontract-raffle
   yarn install

2. Start local blockchain with deployed contracts

   # This command does BOTH:
   # - Starts Hardhat local network (localhost:8545)
   # - Automatically deploys all contracts
   yarn hardhat node

   Keep this terminal running! You'll see output like:

   Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/
   Contract deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
   

1. Clone the frontend repository (in a new terminal)

   git clone https://github.com/Shreyassp002/raffle-frontend.git
   cd raffle-frontend

2. Install dependencies

   yarn install

3. 🎉 No configuration needed!

   The backend deployment automatically generates:

   • constants/abi.json - Complete contract ABI
   • constants/contractAddresses.json - All deployed addresses

   These files are automatically updated when you run the backend!

4. Start the frontend

   yarn run dev

5. Open your browser

   Navigate to http://localhost:3000

For Sepolia testnet deployment:

# In the backend repository
yarn hardhat deploy --network sepolia

This will update the frontend's contract addresses automatically.

The application is pre-configured for:

• Sepolia Testnet (Chain ID: 11155111) - Primary testnet
• Hardhat Local (Chain ID: 31337) - Local development

To add more networks, modify pages/_app.js:

const config = getDefaultConfig({
   appName: "Decentralized Raffle",
   projectId: "your-project-id",
   chains: [
      sepolia,
      hardhat,
      // Add more chains here
   ],
})

Create a .env.local file for sensitive configurations:

NEXT_PUBLIC_PROJECT_ID=your_rainbow_kit_project_id
NEXT_PUBLIC_SEPOLIA_RPC_URL=your_sepolia_rpc_url

• Smart Contracts: smartcontract-raffle - Backend contracts and deployment scripts