LitterByte: Waste2Wealth 🌱

A community-driven waste management platform that incentivizes environmental sustainability through blockchain-powered rewards. Report waste, collect litter, earn points, and make cities greener!

Features

• 🗑️ Report Waste - Submit waste reports with location, type, amount, and verification
• ♻️ Collect Waste - Accept collection tasks and earn rewards
• 🏆 Rewards System - Earn points for reporting and collecting waste, redeem for rewards
• 📊 Impact Dashboard - Track real-time statistics on waste collected, CO2 offset, and community contributions
• 🎯 Leaderboard - See top contributors in the community
• 🔐 Web3Auth - Secure authentication using Web3Auth with Ethereum wallet integration
• 🗺️ Google Maps Integration - Location-based waste reporting and tracking
• 🤖 AI Verification - Google Gemini AI for waste verification

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Database: PostgreSQL (Neon) with Drizzle ORM
• Authentication: Web3Auth (Sapphire Network)
• Styling: Tailwind CSS + shadcn/ui components
• Maps: Google Maps API
• AI: Google Gemini API
• Blockchain: Ethereum (Sepolia Testnet)

Getting Started

Prerequisites

• Node.js 18+ and npm
• PostgreSQL database (Neon recommended)
• Web3Auth Client ID
• Google Maps API Key
• Google Gemini API Key

Environment Variables

Create a .env file in the root directory:

# Database
DATABASE_URL=postgresql://user:password@host/database?sslmode=require

# Web3Auth (use NEXT_PUBLIC_ prefix for client-side access)
NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID=your_web3auth_client_id
NEXT_PUBLIC_WEB3_AUTH_NETWORK=devnet  # Change to 'mainnet' for production

# Google Services
GEMINI_API_KEY=your_gemini_api_key
GOOGLE_MAPS_API_KEY=your_google_maps_api_key

Installation

# Install dependencies
npm install

# Push database schema
npm run db:push

# Run development server
npm run dev

Open http://localhost:3000 to see the app.

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run db:push - Push database schema to Neon
• npm run db:studio - Open Drizzle Studio (database GUI)

Project Structure

app/
  ├── Collection/     # Waste collection tasks
  ├── LeaderBoard/    # User rankings
  ├── Reports/        # Waste reporting interface
  ├── Rewards/        # Rewards redemption
  └── Settings/       # User settings
components/
  ├── ui/            # shadcn/ui components
  ├── Header.tsx     # Navigation with Web3Auth
  └── ImpactCard.tsx # Impact statistics display
utils/database/
  ├── actions.ts     # Database operations
  ├── schema.ts      # Drizzle schema definitions
  └── dbConfig.jsx   # Database configuration

Database Schema

The app uses the following main tables:

• Users - User profiles and authentication
• Reports - Waste reports submitted by users
• CollectedWaste - Completed waste collection records
• Rewards - User points and reward records
• Transactions - Point earning and redemption history
• Notifications - User notifications

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables in Vercel project settings:
   • DATABASE_URL
   • NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID (use production client ID)
   • NEXT_PUBLIC_WEB3_AUTH_NETWORK=mainnet
   • GEMINI_API_KEY
   • GOOGLE_MAPS_API_KEY
4. Deploy!

Important: For production, create a separate Web3Auth client ID for mainnet from the Web3Auth Dashboard.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - feel free to use this project for your own purposes.