MPL 2K25 - Team Management System

A complete, professional team management system for MPL 2K25 with proper authentication,.

🚀 Features

• Complete User Authentication: JWT-based auth with role management (Admin, Mentor, Player)
• Multi-page Frontend: Professional navigation with Dashboard, Teams, Players, and Profile pages
• Team Management: Create, edit, and delete teams with logo selection
• Player Management: Add up to 10 players per team with detailed information
• Google Sheets Integration: Automatic data synchronization and backup
• Real-time Statistics: Live dashboard with team and player analytics
• Advanced Search & Filtering: Find teams and players quickly
• MongoDB Atlas Integration: Cloud database with proper models and relationships
• Role-based Access Control: Different permissions for different user types
• Data Export: Export teams and users data to CSV
• Responsive Design: Works perfectly on all devices
• Professional UI: Modern design with smooth animations and toast notifications

🛠️ Tech Stack

Frontend

• Multi-page Architecture: Separate HTML files for Dashboard, Teams, Players, Profile
• Modern CSS: CSS Variables, Grid Layout, Flexbox, Animations
• JavaScript Modules: ES6+ with class-based architecture
• Font Awesome Icons: Professional icon set
• Inter Font Family: Modern typography
• Responsive Design: Mobile-first approach

Backend

• Node.js & Express.js: RESTful API server
• MongoDB with Mongoose: Database with proper models and relationships
• JWT Authentication: Secure token-based auth
• bcryptjs: Password hashing
• Google Sheets API: Data synchronization
• Helmet: Security headers
• Rate Limiting: API protection
• CORS: Cross-origin resource sharing

📋 Prerequisites

• Node.js (v14 or higher)
• MongoDB Atlas account
• Git

🔧 Quick Start

1. Clone and Install

git clone <repository-url>
cd RMC-MPL25

# Backend
cd backend
npm install

# Frontend
cd ../frontend
npm install

2. Environment Setup

Create backend/.env file:

PORT=5000
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/mpl2k25?retryWrites=true&w=majority
FRONTEND_URL=http://localhost:8000
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production

3. Start Applications

# Terminal 1 - Backend
cd backend
npm start

# Terminal 2 - Frontend
cd frontend
npm start

4. Access Application

• Frontend: http://localhost:8000
• Backend API: http://localhost:5000
• Health Check: http://localhost:5000/health

🔐 User Roles

Admin

• Full system access
• Manage all teams and players
• Manage user roles
• Google Sheets integration
• Data export

Mentor

• Create and manage teams
• Add/edit/delete players
• View all teams and players

Player

• View teams and players
• Update own profile
• Cannot create teams

📊 API Endpoints

Authentication

• POST /auth/register - Register new user
• POST /auth/login - Login user
• GET /auth/profile - Get current user profile
• PUT /auth/profile - Update user profile

Teams

• GET /teams - Get all teams
• GET /teams/:id - Get team by ID
• POST /teams - Create new team (mentor/admin only)
• PUT /teams/:id - Update team (mentor/admin only)
• DELETE /teams/:id - Delete team (admin only)

Admin

• GET /admin/users - Get all users (admin only)
• PUT /admin/users/:id/role - Update user role (admin only)
• GET /admin/google-sheets/auth-url - Get Google Sheets auth URL (admin only)
• POST /admin/google-sheets/callback - Handle Google Sheets callback (admin only)

Health Check

• GET /health - Server health status

🎨 Frontend Pages

Dashboard (index.html)

• Statistics overview (teams, players, users)
• Recent teams display
• Quick action cards
• Real-time data updates

Teams (teams.html)

• Team grid with search functionality
• Create/edit/delete teams
• Player management within teams
• Logo selection system

Players (players.html)

• All players view with filtering
• Table and grid view options
• Search by name, roll, department
• Player details modal

Profile (profile.html)

• Personal information management
• Password change functionality
• Created teams overview
• Admin panel (admin only)

🗄️ Database Schema

User Model

{
  username: String (unique, required),
  email: String (unique, required),
  password: String (hashed, required),
  firstName: String (required),
  lastName: String (required),
  role: String (admin/mentor/player),
  phone: String (optional),
  rollNumber: String (optional),
  department: String (optional),
  section: String (optional),
  year: String (1-4, optional),
  isActive: Boolean (default: true),
  lastLogin: Date,
  googleSheetsId: String (optional)
}

Team Model

{
  name: String (unique, required),
  players: [PlayerSchema] (max 10),
  logo: {
    name: String,
    emoji: String,
    color: String
  },
  createdBy: ObjectId (ref: User),
  isActive: Boolean (default: true),
  googleSheetsRowId: String (optional)
}

Player Schema (embedded in Team)

{
  name: String (required),
  phone: String (optional),
  roll: String (optional),
  department: String (optional),
  section: String (optional),
  year: String (1-4, optional)
}

🔧 Configuration

MongoDB Atlas Setup

1. Create a MongoDB Atlas account
2. Create a new cluster
3. Create a database user
4. Whitelist your IP address
5. Get the connection string
6. Update the MONGO_URI in your .env file

CORS Configuration

The backend is configured to accept requests from http://localhost:8000 by default. Update the FRONTEND_URL in your .env file if needed.

🚨 Troubleshooting

Common Issues

1. MongoDB Connection Failed

   • Check your MongoDB Atlas connection string
   • Ensure your IP is whitelisted
   • Verify your database user credentials

2. Authentication Issues

   • Check JWT_SECRET is set in .env
   • Verify token expiration settings
   • Clear browser localStorage if needed

3. CORS Errors

   • Update FRONTEND_URL in .env
   • Ensure frontend is running on the correct port

4. Google Sheets Not Working

   • Verify credentials.json is in backend directory
   • Check service account has access to the sheet
   • Ensure Google Sheets API is enabled

5. Port Already in Use

   • Change the PORT in .env
   • Kill existing processes on the port

Development Tips

• Use npm run dev for backend auto-restart
• Check browser console for JavaScript errors
• Use /health endpoint to verify server status
• Check MongoDB Atlas dashboard for connection status

📱 Responsive Design

The application is fully responsive and works on:

• Desktop computers (1200px+)
• Tablets (768px - 1199px)
• Mobile phones (320px - 767px)

🔒 Security Features

• JWT token authentication
• Password hashing with bcrypt
• Input validation and sanitization
• CORS protection
• Rate limiting
• Role-based access control
• Secure headers with Helmet

🚀 Deployment

Backend Deployment

1. Set up production MongoDB Atlas cluster
2. Configure production environment variables
3. Deploy to platforms like Heroku, Railway, or DigitalOcean
4. Set up SSL certificates

Frontend Deployment

1. Build static files
2. Deploy to platforms like Netlify, Vercel, or GitHub Pages
3. Configure environment variables
4. Set up custom domain

📞 Support

For detailed setup instructions, see SETUP_GUIDE.md

For support and questions:

• Check the troubleshooting section
• Review the API documentation
• Check browser console for errors
• Verify all environment variables are set correctly