# EaseArena Tournament Platform - Complete Development Prompt for Replit

## Project Overview
Create **EaseArena**, a comprehensive web application for hosting and managing tournaments for any game. The platform should blend simplicity with powerful customization and community features, serving both casual players and serious esports organizers.

## Core Purpose & Features

### 1. Tournament Management System
- **Tournament Creation**: Users can create tournaments by selecting a game type, which auto-loads appropriate formats and stats rules
- **Owner/Co-Owner System**: Tournament creator becomes owner (with "owner" tag), can assign co-owner from registered participants
- **Multiple Game Support**: Support various game types (sports, tactical, strategy, fighting, survival) with game-specific formats and stats
- **Tournament Formats**: Single/Double Elimination, Single/Double Round Robin, League, Group Stage + Knockout
- **Cup vs League Modes**:
  - Cup mode: Bracket format, groups of 4 if >16 players, max 32 teams
  - League mode: Kick-Off (unique team selection) or Ultimate Team (custom team names)

### 2. User Management
- **Landing Page**: Attractive homepage showcasing platform features with clear CTAs
- **Authentication**: 
  - Email/password login and signup
  - Social authentication: Google, Twitch, Discord, Facebook, Twitter
  - Login and signup pages with social integration
- **User Profiles**: Individual profile pages with avatar, Twitch/YouTube links, bio, game stats, tournament history
- **Registration System**: Track tournament slots (e.g., 6/8 filled), open/closed registration
- **Tournament Interactions**: 
  - "Join Tournament" button changes to "View Tournament" + "Leave Tournament" after joining
  - Confirmation dialog for leaving tournaments (automatic win for opponent)
- **Friend Management**: Add/remove friends with confirmation dialogs
- **Tournament Invitations**: Send and receive tournament invites from other players

### 3. Match & Tournament Management
- **Fixture Generation**: Owner/Co-owner can generate match fixtures
- **Score Input**: Manual score entry that auto-updates standings tables
- **Game-Specific Stats**: Example for Football (FC25): P, W, D, L, GF, GA, GD, Points
- **Home/Away Finals**: Optional home/away designation for finals

### 4. Community Features
- **Discussion Boards**: Match and tournament discussion threads
- **Friend System**: Add/remove friends with player search functionality and confirmation dialogs
- **Direct Messaging**: Send DMs to friends within the platform
- **Tournament Invites**: Send tournament invitations to other players
- **Streaming Integration**: Embed Twitch/YouTube live streams per match with "Watch Live" buttons

### 7. Advanced Features (Implement as MVP allows)
- **Global Leaderboards**: Platform-wide player rankings showing:
  - Total tournament wins
  - Total matches played
  - Win percentage
  - Points accumulated
  - Tournament participations
  - Game-specific statistics
- **Friends Leaderboard**: Filter leaderboard to show only friends' statistics
- **Personal Statistics**: Detailed stats on individual profile pages
- **Cross-Tournament Rankings**: Performance tracking across all tournaments
- **AI Match Analysis**: Post-match performance breakdowns with improvement tips
- **AI Bracket Predictions**: Predict tournament winners based on stats and history
- **Smart Scheduling**: Suggest optimal match times across time zones
- **Prize System**: Pay-to-join tournaments with automated prize pool tracking
- **Global Leaderboards**: Cross-tournament player rankings

## Technical Requirements

### Tech Stack
- **Frontend**: React.js with mobile-first responsive design
- **Backend**: Node.js with RESTful API
- **Database**: PostgreSQL
- **Authentication**: Firebase Auth or Auth0
- **Styling**: Modern CSS framework (Tailwind CSS recommended) with custom purple theme
- **Fonts**: 
  - Primary: Poppins (import from Google Fonts)
  - Secondary: Source Sans Pro (import from Google Fonts)
- **UI Pattern**: Single-page application with modal-based interactions (no new tabs)
- **Deployment**: Prepared for cPanel hosting at www.easearena.com

### Design Principles
- **Minimalist UI**: Clean, uncluttered interface
- **Mobile-First**: Fully responsive design
- **Intuitive Navigation**: Clear separation between organizer and player views
- **Spectator Friendly**: Easy access to live matches and standings

## Required Dummy Data Setup

### Admin Account
Create 1 admin account with full platform privileges:
- Username: "admin"
- Email: "admin@easearena.com"
- Password: "admin123"
- Role: "admin"

### User Accounts
Create 10 regular user accounts:
```
User 1: username: "player1", email: "player1@test.com", password: "test123"
User 2: username: "gamer2", email: "gamer2@test.com", password: "test123"
User 3: username: "esports3", email: "esports3@test.com", password: "test123"
User 4: username: "champion4", email: "champion4@test.com", password: "test123"
User 5: username: "rookie5", email: "rookie5@test.com", password: "test123"
User 6: username: "veteran6", email: "veteran6@test.com", password: "test123"
User 7: username: "striker7", email: "striker7@test.com", password: "test123"
User 8: username: "defender8", email: "defender8@test.com", password: "test123"
User 9: username: "midfielder9", email: "midfielder9@test.com", password: "test123"
User 10: username: "keeper10", email: "keeper10@test.com", password: "test123"
```

### Sample Tournaments
Create 3 sample tournaments:

1. **"FIFA 25 Championship"**
   - Game: EA FC25 (Football)
   - Format: Cup Mode (Single Elimination)
   - Owner: player1
   - Co-owner: gamer2
   - Participants: 8 players (player1-8)
   - Status: Active with some matches played

2. **"Ultimate Team League"**
   - Game: EA FC25 (Ultimate Team mode)
   - Format: League (Round Robin)
   - Owner: esports3
   - Participants: 6 players (player3-8)
   - Status: Registration open

3. **"Street Fighter Tournament"**
   - Game: Street Fighter 6
   - Format: Double Elimination
   - Owner: champion4
   - Participants: 4 players registered
   - Status: Upcoming

### Sample Friends & Messages
Create friend relationships:
- player1 and gamer2 are friends
- esports3 and champion4 are friends  
- player1 and esports3 are friends
- veteran6 and striker7 are friends

Sample DM conversations:
- player1 → gamer2: "Ready for the FIFA tournament?"
- esports3 → champion4: "Good luck in your Street Fighter matches!"
- player1 → esports3: "Want to team up for the next tournament?"

### Sample Tournament Invitations
- champion4 invited rookie5 to "Street Fighter Tournament" (pending)
- veteran6 invited keeper10 to create a new "Call of Duty Tournament" (pending)
- gamer2 invited midfielder9 to "FIFA 25 Championship" (accepted)
### Sample Game Data
Include these games with their specific stats:
- **EA FC25**: Stats: P (Played), W (Wins), D (Draws), L (Losses), GF (Goals For), GA (Goals Against), GD (Goal Difference), Pts (Points)
- **Street Fighter 6**: Stats: P (Played), W (Wins), L (Losses), Win% (Win Percentage)
- **Call of Duty**: Stats: P (Played), W (Wins), L (Losses), K/D (Kill/Death Ratio)

### Sample Leaderboard Data
Generate realistic statistics for users:
- **player1**: 15 matches, 12 wins, 80% win rate, 156 total points
- **gamer2**: 12 matches, 9 wins, 75% win rate, 134 total points  
- **esports3**: 18 matches, 11 wins, 61% win rate, 145 total points
- **champion4**: 10 matches, 8 wins, 80% win rate, 98 total points
- **rookie5**: 6 matches, 2 wins, 33% win rate, 45 total points
- (Continue with realistic stats for remaining users)

## Key Functionality Requirements

### Tournament Owner/Co-Owner Capabilities
- Generate and manage fixtures
- Input match scores
- Update tournament settings
- Manage participant registrations
- Start/end tournaments

### Player Capabilities
- Register for tournaments (button changes to "View Tournament" + "Leave Tournament" after joining)
- View match schedules and tournament brackets
- Access opponent profiles and statistics
- Join tournament discussions
- Leave tournaments with confirmation dialog (applies penalty system)
- Send/receive friend requests with confirmation dialogs
- Send direct messages to friends
- Send/receive tournament invitations
- View global and friends-only leaderboards
- Access personal profile page with detailed statistics

### Spectator Features
- View live tournament brackets and standings
- Access match streams and highlights
- Follow tournament discussions
- View player statistics and profiles
- Browse global leaderboards
- Search and discover players

## Database Schema Considerations
Structure your database to handle:
- Users (with roles, profiles, statistics, and social login providers)
- Social authentication providers (Google, Twitch, Discord, Facebook, Twitter)
- User sessions and OAuth tokens
- Tournaments (with all settings and metadata)
- Matches (with scores and detailed stats)
- Tournament registrations (linking users to tournaments)
- Games (with their specific stat requirements)
- Friend relationships (with status: pending, accepted, blocked)
- Direct messages (between friends)
- Tournament invitations (with status: pending, accepted, declined)
- User statistics and leaderboard data
- Notification system for invites and messages
- Email verification and password reset tokens

## API Endpoints Structure
Create RESTful endpoints for:
- Authentication (`/auth/*`)
  - `/auth/login` - Email/password login
  - `/auth/signup` - Email/password registration
  - `/auth/google` - Google OAuth
  - `/auth/twitch` - Twitch OAuth
  - `/auth/discord` - Discord OAuth
  - `/auth/facebook` - Facebook Login
  - `/auth/twitter` - Twitter OAuth
  - `/auth/logout` - User logout
  - `/auth/verify-email` - Email verification
  - `/auth/reset-password` - Password reset
- User management and profiles (`/users/*`)
- Tournament CRUD operations (`/tournaments/*`)
- Match management (`/matches/*`)
- Registration system (`/registrations/*`)
- Friend management (`/friends/*`)
- Direct messaging (`/messages/*`)
- Tournament invitations (`/invitations/*`)
- Statistics and leaderboards (`/leaderboards/*`, `/stats/*`)
- Notifications (`/notifications/*`)

## Frontend Components Architecture
- **Landing Page**: Eye-catching homepage with:
  - Hero section highlighting platform benefits
  - Feature showcase (tournaments, leaderboards, community)
  - Call-to-action buttons for signup/login
  - Platform statistics (total tournaments, active players)
  - Testimonials or featured tournaments
- **Authentication System**:
  - Dedicated login page with email/password and social options
  - Dedicated signup page with email/password and social options
  - Social authentication integration (Google, Twitch, Discord, Facebook, Twitter)
  - Password reset functionality
  - Email verification flow
- Tournament browsing, creation, and detailed views
- Tournament dashboard (owner/co-owner view)
- Player dashboard with personal statistics
- Match viewing, streaming, and score input
- Global and friends leaderboards with filtering
- Individual user profile pages **opened in modals**
- Friend management (add, remove, search users) **in modal interfaces**
- Direct messaging interface **as modal/sidebar component**
- Tournament invitation system **with modal notifications**
- Community features (discussions, notifications)
- Confirmation dialogs for critical actions (leave tournament, remove friend)
- **All interactions within single page - no external links or new tabs**

## Success Criteria
The completed application should allow users to:
1. **Landing Page Experience**: Visit attractive homepage and understand platform value
2. **Multiple Authentication Options**: Register/login with email or social accounts (Google, Twitch, Discord, Facebook, Twitter)
3. **Tournament Management**: Create and manage tournaments with various formats and game types
4. **Tournament Participation**: Register for tournaments (with dynamic button states) and participate fully
5. **Match Functionality**: Input match scores and view automatically updated standings
6. **Streaming Integration**: Access integrated streaming features and match highlights
7. **Social Features**: Add/remove friends with confirmation dialogs
8. **Communication**: Send direct messages to friends
9. **Invitations**: Send/receive tournament invitations
10. **Personal Analytics**: View comprehensive statistics on personal profile pages
11. **Leaderboards**: Browse global leaderboards or filter to friends-only
12. **Tournament Controls**: Leave tournaments with confirmation and penalty system
13. **Community Engagement**: Use all community features (discussions, notifications, search)

## Deployment Configuration for cPanel Hosting

### Database Connection
Configure PostgreSQL connection with these credentials:
```javascript
const dbConfig = {
  host: 'localhost', // or your cPanel PostgreSQL host
  database: 'elijwoow_easearena',
  user: 'elijwoow_easeadmin',
  password: '@EaseAdeleke1406',
  port: 5432,
  ssl: false // adjust based on your hosting requirements
};
```

### Project Structure for cPanel Upload
Organize the project to match your cPanel directory structure at **/home/elijwoow/easearena.com/**:

```
easearena/
├── Frontend Files (for /home/elijwoow/easearena.com/)
│   ├── index.html        # Landing page entry point
│   ├── login.html        # Login page (or handled by React router)
│   ├── signup.html       # Signup page (or handled by React router)
│   ├── about.html        # About page
│   ├── dashboard.html    # Dashboard page
│   ├── tournaments.html  # Tournaments page
│   ├── css/
│   │   ├── style.css     # Main stylesheet with purple theme
│   │   ├── fonts.css     # Poppins and Source Sans Pro imports
│   │   └── responsive.css
│   ├── js/
│   │   ├── app.js        # Main React/JavaScript application
│   │   ├── auth.js       # Authentication handling
│   │   ├── tournaments.js # Tournament functionality
│   │   └── utils.js      # Utility functions
│   ├── .well-known/     # SSL/security files
│   ├── cgi-bin/         # CGI scripts if needed
│   └── favicon.ico
├── api/                 # Backend Node.js files (separate upload to cgi-bin or node folder)
│   ├── index.js         # Main server file
│   ├── routes/
│   │   ├── auth.js      # Authentication routes (login, signup, social)
│   │   ├── users.js
│   │   ├── tournaments.js
│   │   └── social.js    # Social media authentication
│   ├── middleware/
│   ├── models/
│   ├── config/
│   │   ├── database.js  # PostgreSQL configuration
│   │   └── social-auth.js # Social media app credentials
│   └── package.json
├── database/
│   ├── init.sql         # Database schema and initial data
│   └── migrations/
└── deployment/
    ├── README.md        # Deployment instructions for cPanel
    ├── .htaccess        # URL rewriting and routing
    └── upload-guide.txt # Step-by-step cPanel upload instructions
```

### Backend Configuration
- Create a production-ready Express.js server
- Configure CORS for www.easearena.com domain
- Set up proper error handling and logging
- Include environment variables configuration
- Create a `package.json` with all necessary dependencies
- **Social Authentication Setup**:
  - Google OAuth 2.0 integration
  - Twitch OAuth integration
  - Discord OAuth integration
  - Facebook Login integration
  - Twitter OAuth integration
  - Secure token handling and session management

### Database Setup
- Generate complete SQL schema file for PostgreSQL
- Include all table creation statements
- Populate with dummy data (admin + 10 users + sample tournaments)
- Provide migration scripts if needed

### Frontend Build
- Create production React build in `public_html` folder
- Optimize for performance and cPanel hosting
- Configure routing for single-page application
- Ensure all assets are properly referenced

### Deployment Files to Include
1. **README.md** with step-by-step deployment instructions for cPanel
2. **database/init.sql** - Complete PostgreSQL setup script
3. **api/package.json** - Backend dependencies
4. **public_html/** - Frontend production build
5. **.htaccess** file for proper routing (if needed)
6. **Environment configuration** examples

## Additional Notes & Deployment Requirements
### cPanel-Specific Considerations
- **Directory Path**: Structure files for `/home/elijwoow/easearena.com/` (as shown in your file manager)
- Frontend files go directly in the root directory (matching your existing structure with css/, js/, .well-known/, cgi-bin/ folders)
- Backend API files may need to go in `cgi-bin/` or a separate node application folder (check with your hosting provider)
- Match existing folder structure (css/, js/, cgi-bin/, .well-known/ already present)
- Ensure Node.js compatibility with hosting provider
- Configure database connection for shared hosting environment
- Set up proper file permissions (755 for directories, 644 for files)
- Include instructions for setting up SSL if needed (.well-known folder already exists)

### Upload Instructions for cPanel
Create detailed upload guide that explains:
1. **Frontend Files**: Upload HTML, CSS, JS files directly to `/home/elijwoow/easearena.com/`
2. **Backend Files**: Upload to appropriate cPanel Node.js directory (or cgi-bin)
3. **Database Setup**: Import init.sql through cPanel PostgreSQL interface
4. **Configuration**: Update database connection strings and API endpoints
5. **File Permissions**: Set correct permissions for all uploaded files
6. **Testing**: Verify all functionality works after upload

### Final Deliverables
When complete, the project should be:
1. **GitHub Ready**: Properly structured repository with clear documentation
2. **cPanel Ready**: Files organized for direct upload to `/home/elijwoow/easearena.com/` directory structure
3. **Database Ready**: Complete PostgreSQL setup with sample data using provided credentials
4. **Production Ready**: Optimized, secure, and fully functional

**IMPORTANT**: 
- All frontend files must be structured to upload directly to `/home/elijwoow/easearena.com/`
- Maintain existing folder structure (css/, js/, cgi-bin/, .well-known/)
- All files must be production-ready for immediate deployment to cPanel hosting
- Include comprehensive deployment documentation specific to your cPanel directory structure
- Ensure the database connection works with the provided PostgreSQL credentials
- Test that all file paths work correctly with the `/home/elijwoow/easearena.com/` structure
- **No New Tabs**: All interactions must stay within the single page application using modals, overlays, and in-page navigation
- **Typography Implementation**: 
  ```css
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@300;400;500;600;700&display=swap');
  
  /* Primary font for headings, buttons, navigation */
  .font-primary { font-family: 'Poppins', sans-serif; }
  
  /* Secondary font for body text, descriptions */
  .font-secondary { font-family: 'Source Sans Pro', sans-serif; }
  ```
- **Purple Color Palette**: Implement a cohesive purple theme with variations:
  - Primary purple: #7C3AED (buttons, links, accents)
  - Light purple: #A855F7 (hover states, backgrounds)
  - Dark purple: #5B21B6 (headers, important text)
  - Purple gray: #6B7280 (secondary text)
- **Modal Components**: User profiles, tournament details, friend lists, messaging, confirmations should all open as modals/overlays
- Prioritize core tournament functionality in MVP
- Ensure mobile responsiveness across all features and modals
- Implement proper error handling and user feedback
- Include loading states and smooth transitions with purple-themed styling
- Focus on intuitive UX for both organizers and participants
- Set up the project structure to easily add advanced features later

Please create a fully functional tournament platform based on these specifications, including all dummy data and ensuring the admin and user accounts work properly for testing all features.