🏀 NBA Player Performance Dashboard

A comprehensive, full-stack basketball analytics platform designed for basketball operations staff, general managers, and basketball analysts. This project demonstrates advanced software engineering skills with a focus on sports analytics and data visualization.

🎯 Project Overview

This NBA Analytics Dashboard showcases real-world engineering skills through:

• Full-stack development with modern technologies
• Advanced data analytics and visualization
• Professional UI/UX design with responsive layouts
• Database design and optimization
• API development with comprehensive endpoints
• Basketball operations tools for GM decision-making

✨ Key Features

📊 Player Analytics Dashboard

• Player Search & Filtering: Advanced search with team, position, and performance filters
• Performance Metrics: PPG, RPG, APG, shooting percentages, and custom efficiency ratings
• Game Logs: Detailed game-by-game performance tracking
• Trend Analysis: Performance trends and statistical comparisons

🔍 Player Comparison Tools

• Side-by-side Analysis: Compare multiple players across all metrics
• Visual Charts: Interactive charts using Chart.js for performance visualization
• Statistical Breakdown: Detailed comparison of offensive and defensive stats

🏀 Basketball Operations Mode

• Trade Value Analysis: Custom algorithm for player trade value calculation
• Salary Cap Simulator: Interactive tool for contract management
• Team Analysis: Comprehensive team composition and performance insights
• GM Tools: Advanced analytics for basketball operations decision-making

📈 Advanced Analytics

• Custom Efficiency Rating: Proprietary formula combining multiple performance factors
• Team Composition Analysis: Position distribution, age analysis, and roster optimization
• Performance Trends: Historical data analysis and predictive insights

🛠️ Technical Stack

Backend

• Node.js/Express: Robust API server with middleware security
• SQLite Database: Relational database with optimized schema design
• RESTful API: Comprehensive endpoints with proper error handling
• Data Validation: Input sanitization and validation

Frontend

• React 18: Modern React with hooks and context API
• TailwindCSS: Utility-first CSS framework with custom design system
• Chart.js: Interactive data visualization and analytics
• Responsive Design: Mobile-first approach with modern UI components

Development & Deployment

• Git Version Control: Professional development workflow
• Testing: Jest testing framework for backend validation
• Documentation: Comprehensive API documentation and code comments
• Performance: Optimized queries and caching strategies

🚀 Getting Started

Prerequisites

• Node.js 16+
• npm or yarn package manager

Installation

1. Clone the repository

git clone <repository-url>
cd nba-player-dashboard

2. Install backend dependencies

npm install

3. Install frontend dependencies

cd client
npm install
cd ..

4. Initialize the database

# The database will be created automatically when you start the server
# You can also seed it with sample data:
sqlite3 nba_data.db < data/seed_data.sql

5. Start the development servers

# Terminal 1 - Backend
npm run dev

# Terminal 2 - Frontend
cd client
npm start

6. Access the application

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

📁 Project Structure

nba-player-dashboard/
├── server.js                 # Main Express server
├── package.json             # Backend dependencies
├── data/
│   └── seed_data.sql       # Sample NBA data
├── client/                  # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── context/        # State management
│   │   ├── App.js          # Main app component
│   │   └── index.js        # Entry point
│   ├── public/             # Static assets
│   └── package.json        # Frontend dependencies
└── README.md               # Project documentation

🔌 API Endpoints

Player Management

• GET /api/players - Get all players with filtering
• GET /api/players/:id/stats - Get player statistics
• GET /api/players/:id/game-logs - Get player game logs

Analytics & Comparison

• GET /api/compare - Compare multiple players
• GET /api/teams/:team/roster - Get team roster

Basketball Operations

• GET /api/basketball-ops/trade-value - Calculate player trade value
• POST /api/sync-nba-data - Sync data from external sources

🎨 Design System

Color Palette

• Thunder Blue: #007ac1 (Primary brand color)
• Thunder Orange: #ef3b24 (Accent color)
• Stats Green: #4ade80 (Positive metrics)
• Stats Red: #f87171 (Negative metrics)
• Stats Yellow: #fbbf24 (Neutral metrics)

Typography

• Primary Font: Inter (Modern, readable)
• Display Font: Poppins (Headings, emphasis)

Components

• Cards: Consistent card design with hover effects
• Buttons: Primary and secondary button styles
• Forms: Clean input fields with validation states
• Charts: Interactive data visualization components

📊 Database Schema

Players Table

• Basic player information (name, team, position, physical attributes)
• Age, experience, and biographical data
• Timestamps for data freshness tracking

Player Stats Table

• Season-based performance metrics
• Advanced statistics (efficiency ratings, shooting percentages)
• Foreign key relationships for data integrity

Game Logs Table

• Individual game performance data
• Opponent and venue information
• Detailed shooting and defensive statistics

🧪 Testing

Backend Testing

npm test

Frontend Testing

cd client
npm test

🚀 Deployment

Production Build

# Build frontend
cd client
npm run build

# Start production server
npm start

Environment Variables

Create a .env file in the root directory:

NODE_ENV=production
PORT=5000

🔒 Security Features

• Helmet.js: Security headers and protection
• Input Validation: Sanitized user inputs
• CORS Configuration: Controlled cross-origin requests
• Error Handling: Secure error responses

📈 Performance Optimizations

• Database Indexing: Optimized query performance
• Caching Strategies: Reduced API calls
• Compression: Gzip compression for responses
• Lazy Loading: Efficient component rendering

🎯 Basketball Operations Features

Trade Value Algorithm

Custom formula considering:

• Performance efficiency rating
• Age factor (prime years optimization)
• Experience level
• Position scarcity
• Team fit analysis

Salary Cap Management

• Interactive contract simulator
• Real-time cap space calculations
• Multi-year contract planning
• Roster optimization tools

Team Analysis

• Position distribution analysis
• Age and experience balance
• Performance trend identification
• Roster optimization recommendations