SideBet - Live Soccer Watch Party App

A React Native Expo app that allows users to join watch-party chat rooms for live soccer matches, make custom over/under bets with friends, and track live scores and match events.

Features

• Live Match Display: View currently active soccer matches
• Watch Rooms: Create or join watch rooms using 6-digit codes
• Real-time Chat: WebSocket-powered chat functionality
• Betting System: Over/Under betting system with 1000 starting points
• Live Score Updates: Real-time match events and statistics
• Responsive Design: Clean, modern UI with dark/light mode support

Project Structure

HackGT/
├── server/                    # Node.js backend server
│   ├── server.js             # WebSocket and REST API server
│   └── package.json          # Backend dependencies
├── SideBet/                  # React Native Expo app
│   ├── app/                  # Expo Router screens
│   ├── components/           # Reusable components
│   ├── constants/            # Theme and color constants
│   └── package.json          # Frontend dependencies
├── livescore.json            # Sample live match data
├── match_events.json         # Sample match events data
└── endpoints.txt             # API endpoint documentation

Setup Instructions

1. Backend Server Setup

cd server
npm install
npm start

The server will start on http://localhost:3001 with WebSocket support.

2. React Native App Setup

cd SideBet
npm install
npm start

Choose your platform:

• Press i for iOS simulator
• Press a for Android emulator
• Press w for web browser
• Scan QR code with Expo Go app for physical device

API Endpoints

REST Endpoints

• GET /api/matches/live - Get all live matches
• GET /api/matches/:matchId/events - Get match events
• POST /api/rooms/create - Create a new watch room
• POST /api/rooms/join - Join existing room
• GET /api/rooms/:roomCode - Get room details

WebSocket Events

• join-room - Join a specific room
• send-message - Send chat message
• propose-bet - Create new bet
• accept-bet - Accept existing bet
• new-message - Receive new chat message
• new-bet - Receive new bet proposal
• bet-accepted - Receive bet acceptance notification

How to Use

1. Start the Backend: Run the Node.js server
2. Launch the App: Start the Expo app
3. View Live Matches: Browse currently active soccer matches
4. Create Watch Room: Click "Start Watch Room" for any match
5. Join Watch Room: Use "Join Watch Room" with a 6-digit code
6. Chat: Send messages in real-time with other users
7. Place Bets: Create Over/Under bets on goals scored
8. Accept Bets: Accept bets from other users
9. Track Live Score: View real-time match events and statistics

Features in Detail

Chat System

• Real-time messaging via WebSocket
• System notifications for user joins
• Special formatting for bet-related messages
• Message timestamps and user identification

Betting System

• Over/Under bets on team goals
• 1000 starting points per user
• Bet proposals visible to all room members
• First-to-accept system for bet matching
• Point transfer system (to be implemented)

Live Score Display

• Real-time match statistics
• Goal tracking and events timeline
• Yellow/red card tracking
• Substitution notifications
• Auto-refresh every 30 seconds

Technology Stack

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• Socket.IO - WebSocket communication
• CORS - Cross-origin resource sharing
• UUID - Unique identifier generation

Frontend

• React Native - Mobile framework
• Expo - Development platform
• Expo Router - File-based navigation
• Socket.IO Client - WebSocket communication
• React Native Tab View - Tab navigation
• TypeScript - Type safety

Design System

The app uses a centralized design system with:

• Primary Color: #143a81 (Dark Blue)
• Secondary Color: #fabb17 (Yellow/Orange) in light mode, #4A90E2 (Blue) in dark mode
• Consistent Spacing: 4px grid system
• Typography: Hierarchical text styles
• Component Styles: Reusable button, card, and input styles

Development Notes

• Uses mock data from livescore.json and match_events.json
• No authentication required (users join with display names)
• In-memory state storage (no database)
• Designed for local development and testing
• WebSocket connections handle room-based messaging
• Bet resolution logic ready for implementation

Future Enhancements

• Automatic bet resolution based on match outcomes
• User authentication and persistent accounts
• Database integration for data persistence
• Push notifications for bet updates
• Enhanced match statistics and analytics
• Multiple bet types beyond Over/Under goals