OKC Thunder Stats Dashboard

A full-stack web application for displaying NBA player statistics with an Angular frontend and Django REST API backend.

Screenshots

Screenshots of the application showcase the user interface and overall design of the dashboard:

Project Structure

thunders_stats_dashboard/
├── frontend/           # Angular 12 frontend application
├── backend/           # Django REST API backend
├── setup_database.sql # PostgreSQL database setup script
├── court_diagram.jpg  # Basketball court diagram asset
├── Procfile          # Heroku deployment configuration
└── README.md         # This file

Prerequisites

Before setting up this project, ensure you have the following installed:

• Node.js: v16.15.1 (specified in frontend/package.json)
• npm: v8.11.0 (specified in frontend/package.json)
• Python: 3.8+ (tested with 3.9.6)
• PostgreSQL: 12+ (for database)
• Git: Latest version

Database Setup

1. Install PostgreSQL if not already installed:

   # macOS (using Homebrew)
   brew install postgresql
   brew services start postgresql
   
   # Ubuntu/Debian
   sudo apt update
   sudo apt install postgresql postgresql-contrib
   sudo systemctl start postgresql

2. Create the database and user:

   # Connect as postgres superuser
   sudo -u postgres psql
   
   # Or on macOS:
   psql postgres

3. Run the database setup script:

   # From the project root directory
   psql -U postgres -f setup_database.sql

   This script will:

   • Create user okcapplicant with password thunder
   • Create database okc owned by okcapplicant
   • Create schema app with proper permissions
   • Create your personal user avpac with superuser privileges

Backend Setup (Django)

1. Navigate to the backend directory:

   cd backend

2. Create and activate a virtual environment:

   # Create virtual environment
   python3 -m venv venv
   
   # Activate virtual environment
   # On macOS/Linux:
   source venv/bin/activate
   
   # On Windows:
   # venv\Scripts\activate

3. Install Python dependencies:

   pip install -r requirements.txt

4. Run database migrations:

   python manage.py makemigrations
   python manage.py migrate

5. Create a superuser (optional):

   python manage.py createsuperuser

6. Start the Django development server:

   python manage.py runserver

   The backend API will be available at: http://localhost:8000

Frontend Setup (Angular)

1. Navigate to the frontend directory:

   cd frontend

2. Install Node.js dependencies:

   npm install

3. Start the Angular development server:

   npm start
   # or
   ng serve

   The frontend application will be available at: http://localhost:4200

Environment Configuration

Development Environment

• Frontend: Uses environment.ts with backend URL: http://localhost:8000
• Backend: Configured to accept requests from http://localhost:4200
• Database: Local PostgreSQL connection

Production Environment

• Frontend: Uses environment.prod.ts with backend URL: https://backend-production-1164.up.railway.app
• Backend: Deployed with Heroku-style configuration

Available Scripts

Frontend (Angular)

npm start          # Start development server
npm run build      # Build for production
npm test           # Run unit tests
npm run lint       # Run linting
npm run e2e        # Run end-to-end tests
npm run deploy     # Deploy using Express server

Backend (Django)

python manage.py runserver        # Start development server
python manage.py makemigrations   # Create database migrations
python manage.py migrate          # Apply database migrations
python manage.py test            # Run tests
python manage.py createsuperuser  # Create admin user
python manage.py collectstatic    # Collect static files

Key Dependencies

Frontend

• Angular: 12.1.1 (with Material Design and Flex Layout)
• TypeScript: 4.3.4
• RxJS: 6.5.4
• Express: 4.18.1 (for production serving)

Backend

• Django: 3.1.12
• Django REST Framework: For API endpoints
• PostgreSQL: psycopg2-binary for database connectivity
• CORS Headers: For cross-origin requests
• Gunicorn: WSGI server for production
• WhiteNoise: Static file serving

Database Configuration

The application uses PostgreSQL with the following default settings:

• Database: okc
• Username: okcapplicant
• Password: thunder
• Host: 127.0.0.1
• Port: 5432
• Schema: app

Running the Full Application

1. Start the backend:

   cd backend
   source venv/bin/activate  # Activate virtual environment
   python manage.py runserver

2. In a new terminal, start the frontend:

   cd frontend
   npm start

3. Access the application:

   • Frontend: http://localhost:4200
   • Backend API: http://localhost:8000
   • Django Admin (if superuser created): http://localhost:8000/admin

Deployment

The project is configured for deployment with:

• Procfile: Heroku/Railway deployment with Gunicorn
• Static files: Handled by WhiteNoise middleware
• CORS: Configured for cross-origin requests
• Environment variables: Support for production database URLs via dj_database_url

Troubleshooting

Common Issues

1. Database connection errors:

   • Ensure PostgreSQL is running
   • Verify database credentials in backend/app/settings.py
   • Check that the okc database and okcapplicant user exist

2. Node.js version issues:

   • Use Node.js v16.15.1 and npm v8.11.0 as specified
   • Consider using nvm to manage Node.js versions

3. Python dependency issues:

   • Ensure you're using Python 3.8+
   • Activate the virtual environment before installing dependencies

4. Port conflicts:

   • Backend runs on port 8000 by default
   • Frontend runs on port 4200 by default
   • Ensure these ports are available

Reset Instructions

If you need to completely reset the project:

1. Database reset:

   sudo -u postgres psql
   DROP DATABASE okc;
   DROP USER okcapplicant;
   DROP USER avpac;
   \q
   psql -U postgres -f setup_database.sql

2. Backend reset:

   cd backend
   rm -rf venv
   python3 -m venv venv
   source venv/bin/activate
   pip install -r requirements.txt
   python manage.py migrate

3. Frontend reset:

   cd frontend
   rm -rf node_modules
   npm install

Contributing

This project was created for an OKC Thunder internship application. The application demonstrates full-stack development skills with Angular and Django.

License

This project is for educational and application purposes.