🎮 MLBB Platform

A comprehensive Mobile Legends Bang Bang gaming community platform featuring AI-powered chatbot, team management, tournament tracking, and meta analysis.

✨ Features

🎯 Core Features

• 🏠 Home Dashboard - Welcome page with platform overview
• 📊 Meta Analysis - Real-time MLBB hero and item meta data
• 👥 Teams Management - Create and manage gaming teams
• 🏆 Tournaments - Track and participate in tournaments
• 📅 Events - Gaming events and community activities
• 📚 Guides - Strategy guides and tutorials
• 👥 Community - Player interaction and social features
• 🎓 Academy - Learning resources and courses

🤖 AI Features

• Smart Chatbot - AI-powered assistant for MLBB queries
• Strategy Recommendations - Personalized gameplay advice
• Meta Insights - AI-driven meta analysis

🎨 UI/UX Features

• Modern Gaming Theme - Neon-styled, responsive design
• Smooth Animations - GSAP-powered transitions and effects
• Custom Stinger Animations - Loading sequences with PNG frames
• Error Boundaries - Graceful error handling
• Mobile Responsive - Optimized for all device sizes

🚀 Quick Start

Prerequisites

• Node.js 18.0.0 or higher
• npm 9.0.0 or higher
• Git

Installation

1. Clone the repository

   git clone https://github.com/your-username/mlbb-platform.git
   cd mlbb-platform

2. Install dependencies

   npm run install:all

3. Environment setup

   cp env.example .env
   # Edit .env with your configuration

4. Start development environment

   npm run dev

   Or use the advanced development script:

   node scripts/dev.js

🏗️ Project Structure

mlbb-platform/
├── 📁 backend/                 # Node.js/Express API server
│   ├── 📁 src/
│   │   ├── 📁 controllers/     # API controllers
│   │   ├── 📁 routes/          # API routes
│   │   ├── 📁 middlewares/     # Express middlewares
│   │   ├── 📁 models/          # Data models
│   │   ├── 📁 utils/           # Utility functions
│   │   ├── 📄 app.js           # Express app configuration
│   │   └── 📄 server.js        # Server entry point
│   └── 📄 package.json
├── 📁 frontend/                # React/Vite client app
│   ├── 📁 src/
│   │   ├── 📁 components/      # React components
│   │   ├── 📁 pages/           # Page components
│   │   ├── 📁 hooks/           # Custom React hooks
│   │   ├── 📁 utils/           # Utility functions
│   │   ├── 📁 styles/          # CSS modules
│   │   ├── 📄 App.jsx          # Main App component
│   │   └── 📄 main.jsx         # React entry point
│   ├── 📁 public/              # Static assets
│   └── 📄 package.json
├── 📁 scripts/                 # Development scripts
├── 📄 proxy.js                 # API proxy server
├── 📄 package.json             # Root package.json
└── 📄 README.md

🛠️ Development

Available Scripts

Root Level

npm run dev              # Start both frontend and backend
npm run dev:backend      # Start backend only
npm run dev:frontend     # Start frontend only
npm run build            # Build frontend for production
npm run start            # Start production backend
npm run install:all      # Install all dependencies
npm run lint             # Lint frontend code
npm run clean            # Clean all node_modules
npm run proxy            # Start proxy server

Backend Scripts

cd backend
npm run dev              # Start with nodemon
npm run start            # Start production server
npm run lint             # Lint backend code
npm run health           # Check API health

Frontend Scripts

cd frontend
npm run dev              # Start Vite dev server
npm run build            # Build for production
npm run build:analyze    # Build with bundle analyzer
npm run preview          # Preview production build
npm run lint             # Lint with ESLint
npm run lint:fix         # Fix linting issues

Development Workflow

1. Start development environment

   npm run dev

2. Access services

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:4000
   • Proxy Server: http://localhost:4005

3. Hot reload - All changes are automatically reflected

4. API Testing - Use the health endpoint: http://localhost:4000/api/health

Environment Variables

Copy env.example to .env and configure:

# API Configuration
VITE_API_URL=http://localhost:4000/api
PORT=4000
PROXY_PORT=4005

# AI Chatbot
OPENAI_API_KEY=your_openai_api_key

# Security
JWT_SECRET=your_jwt_secret

# Feature flags
DEBUG_MODE=true
ENABLE_ANALYTICS=false

🏛️ Architecture

Frontend Architecture

• React 19 with functional components and hooks
• Vite for fast development and optimized builds
• GSAP for smooth animations and transitions
• Axios for API communication with retry logic
• React Router for client-side routing
• Custom hooks for reusable logic
• Error boundaries for graceful error handling

Backend Architecture

• Node.js with Express framework
• Middleware stack: CORS, Helmet, Morgan, Compression
• Rate limiting and security headers
• Structured error handling with detailed logging
• API versioning and health checks
• Modular route organization

Key Design Patterns

• Component composition over inheritance
• Custom hooks for stateful logic
• Centralized API layer with error handling
• Modular CSS architecture
• Environment-based configuration

🎨 Styling Guide

CSS Architecture

• Base styles in main.css
• Component styles in styles/components.css
• Utility classes for common patterns
• CSS variables for theming
• Responsive design with mobile-first approach

Theme Colors

--primary: #00f5ff      /* Cyan */
--secondary: #7c3aed    /* Purple */
--accent: #fbbf24       /* Amber */
--background: #0a0b14   /* Dark */
--surface: #151924      /* Dark Gray */

Animation Guidelines

• GSAP for complex animations
• CSS transitions for simple interactions
• 60fps targeting for smooth performance
• Reduced motion support for accessibility

🧪 Testing

Frontend Testing

cd frontend
npm run test             # Run tests
npm run test:watch       # Watch mode
npm run test:coverage    # Coverage report

Backend Testing

cd backend
npm run test             # Run API tests
npm run test:integration # Integration tests

Performance Testing

npm run build:analyze   # Bundle analysis
npm run lighthouse      # Performance audit

📈 Performance Optimizations

Frontend Optimizations

• Code splitting by route and feature
• Lazy loading for components and images
• Bundle optimization with Vite/Rollup
• Image optimization and lazy loading
• Service worker for caching (optional)

Backend Optimizations

• Response compression with gzip
• Request rate limiting
• Memory caching for API responses
• Database connection pooling (when applicable)
• CDN integration for static assets

Build Optimizations

• Tree shaking for smaller bundles
• Minification of CSS/JS
• Asset optimization and compression
• Modern browser targeting

🔒 Security

Frontend Security

• Content Security Policy headers
• XSS protection through React's built-in escaping
• HTTPS enforcement in production
• Environment variable validation

Backend Security

• Helmet.js for security headers
• CORS configuration
• Rate limiting to prevent abuse
• Input validation and sanitization
• JWT token authentication
• Error message sanitization

🚀 Deployment

Production Build

npm run build            # Build frontend
npm run build:backend    # Prepare backend

Environment Setup

1. Set NODE_ENV=production
2. Configure production environment variables
3. Set up reverse proxy (nginx recommended)
4. Configure SSL certificates
5. Set up monitoring and logging

Docker Deployment

# Dockerfile example (create when needed)
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 4000
CMD ["npm", "start"]

🤝 Contributing

Development Setup

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Run tests: npm test
5. Commit changes: git commit -m 'Add amazing feature'
6. Push to branch: git push origin feature/amazing-feature
7. Open a Pull Request

Code Style Guidelines

• ESLint configuration for JavaScript
• Prettier for code formatting
• Conventional commits for commit messages
• JSDoc comments for functions
• Component documentation in README

Pull Request Process

1. Update documentation for any new features
2. Add tests for new functionality
3. Ensure all tests pass
4. Update version numbers if applicable
5. Get approval from maintainers

🐛 Troubleshooting

Common Issues

Port conflicts:

# Change ports in .env file
PORT=4001
PROXY_PORT=4006
VITE_PORT=5174

Dependencies issues:

npm run clean           # Clean all node_modules
npm run install:all     # Reinstall dependencies

Build errors:

npm run lint:fix        # Fix linting issues
rm -rf dist/            # Clean build directory
npm run build           # Rebuild

API connection issues:

• Check backend server is running on correct port
• Verify CORS settings in backend
• Check network/firewall settings

Debug Mode

Enable debug mode in .env:

DEBUG_MODE=true
VERBOSE_LOGGING=true

📝 Changelog

Version 1.0.0 (Latest)

• ✨ Initial release with core features
• 🎨 Modern gaming UI with GSAP animations
• 🤖 AI chatbot integration
• 📊 Real-time MLBB meta data
• 🏆 Tournament and team management
• 📱 Mobile-responsive design
• 🔧 Comprehensive development setup

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Mobile Legends Bang Bang for inspiration
• React and Vite communities
• GSAP for amazing animations
• OpenAI for AI capabilities
• All contributors and testers

📞 Support

• Documentation: Check this README and inline code comments
• Issues: Open a GitHub issue for bugs or feature requests
• Community: Join our Discord server (if available)
• Email: your-email@example.com (if applicable)

---

Made with ❤️ for the MLBB gaming community

🎮 Happy Gaming! 🎮