Pro Play is a comprehensive esports Farcaster mini app that brings the excitement of competitive gaming to the Farcaster ecosystem. Follow your favorite teams, tournaments, and players while making predictions and staying up-to-date with live matches.
- Live Scores: Real-time match updates from PandaScore API
- Match Predictions: Stake on matches using Base Sepolia
- Team Following: Follow your favorite esports teams across multiple games
- Notifications: Get alerts for upcoming matches via Farcaster
- Predictions: Make predictions and compete in prize pools
- Share: Share matches and predictions as Farcaster casts
- Next.js 14
- shadcn/ui components
- Farcaster Mini App SDK
- Ethers.js for blockchain interactions
- Express.js API server
- PandaScore for esports data
- Base Sepolia for smart contracts
- Supabase for user data
- Neynar SDK for Farcaster integration
- Clone the repository:
git clone https://github.com/nonyonah/proplay.git
cd proplay- Install dependencies:
npm install- Set up environment variables:
Create a
.envfile in the root:
NEXT_PUBLIC_API_BASE_URL=http://localhost:3001Create a .env file in the /api directory:
PORT=3001
PANDASCORE_TOKEN=your_pandascore_token
NEYNAR_API_KEY=your_neynar_api_key
BASE_RPC_URL=https://sepolia.base.org
PREDICTION_POOL_ADDRESS=your_contract_address
BASE_USDC_ADDRESS=your_base_usdc_address
SUPABASE_URL=your_supabase_project_url
SUPABASE_KEY=your_supabase_anon_key- Set up the database:
- Create a new Supabase project
- Run the SQL script in
api/db/init.sql
- Deploy the smart contract:
- Deploy
api/contracts/PredictionPool.solto Base Sepolia - Update PREDICTION_POOL_ADDRESS in
.env
- Start the development servers:
In one terminal:
npm run devIn another terminal:
npm run dev:apiThe app will be available at:
- Frontend: http://localhost:3000
- Backend API: http://localhost:3001
├── app/ # Next.js app directory
├── components/ # React components
├── lib/ # Shared utilities
├── api/ # Backend server
│ ├── routes/ # API routes
│ ├── contracts/ # Smart contracts
│ ├── config/ # Server config
│ └── utils/ # Helper functions
└── public/ # Static assets
For detailed API documentation and backend setup, see API Documentation.
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Open a pull request
ISC License
- PandaScore for esports data
- Base for the L2 infrastructure
- Farcaster for the frame platform
- shadcn/ui for the component library
- Tournament Tracking: Stay updated on major tournaments and competitions
- Player Profiles: Follow individual players and get personalized updates
- Match Predictions: Place predictions on upcoming matches
- Live Match Updates: Real-time updates on ongoing matches
- Social Sharing: Share match results and predictions as Farcaster casts
- League of Legends (LoL) - Follow LEC, LCS, LCK, and international tournaments
- Counter-Strike 2 (CS2) - Track major tournaments like IEM Cologne
- Valorant - Stay updated with VCT Masters and regional competitions
- Dota 2 - Follow The International and major tournaments
- Personalized Onboarding: Set up your gaming preferences, favorite teams, and players
- Smart Filtering: Filter matches by game, date, and tournament
- Wallet Integration: Connect your wallet for prediction features
- Dark/Light Theme: Customizable theme preferences
- Mobile-First Design: Optimized for mobile Farcaster clients
- Node.js 18+
- pnpm (recommended) or npm
- Farcaster account
- Clone the repository:
git clone https://github.com/nonyonah/proplay.git
cd proplay- Install dependencies:
pnpm install- Start the development server:
pnpm dev- Open http://localhost:3000 in your browser
pnpm build
pnpm start- Framework: Next.js 15.2.4 with React 19
- Styling: Tailwind CSS with custom components
- UI Components: Radix UI primitives
- Farcaster Integration: @farcaster/miniapp-sdk
- Forms: React Hook Form with Zod validation
- Charts: Recharts for data visualization
- Icons: Lucide React
- Theme: next-themes for dark/light mode
- TypeScript: Full type safety
- Login Page: Farcaster authentication
- Onboarding Flow: 3-step preference setup
- Home Page: Main dashboard with match listings
- Followed Matches: Matches from followed teams
- Predictions Page: Make and track predictions
- Live Matches: Real-time match updates
- Match Cards: Interactive match information display
- Share Cast Modal: Share matches to Farcaster
- Wallet Modal: Wallet connection interface
- Theme Provider: Dark/light mode management
- Authentication: Users log in with their Farcaster account
- Onboarding:
- Select favorite esports games
- Choose a favorite team
- Pick a favorite player
- Personalization: App customizes content based on preferences
- Engagement:
- Follow matches and tournaments
- Make predictions on outcomes
- Share results and predictions
- Track live match updates
The app uses several configuration files:
tailwind.config.ts- Tailwind CSS configurationcomponents.json- shadcn/ui component configurationnext.config.mjs- Next.js configurationtsconfig.json- TypeScript configuration
Pro Play uses a modern, clean design system with:
- Color Palette: Purple primary with gray neutrals
- Typography: Clean, readable fonts optimized for mobile
- Components: Consistent UI components from Radix UI
- Responsive Design: Mobile-first approach
- Accessibility: WCAG compliant components
- Push Notifications: Real-time match alerts
- Advanced Analytics: Detailed prediction statistics
- Tournament Brackets: Interactive tournament visualization
- Player Statistics: Comprehensive player performance data
- Community Features: User-generated content and discussions
- NFT Integration: Collectible team and player cards
We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow the existing code style
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Farcaster team for the mini app SDK
- Radix UI for accessible components
- The esports community for inspiration
- All contributors and testers
For support, please open an issue on GitHub or reach out on Farcaster.
Built with ❤️ for the esports community on Farcaster