Pick 'Em or Kick 'Em

Analyze NBA player stats and performance trends to make smarter sports betting picks!

Full Website: https://main.d261zxqkub55fi.amplifyapp.com/

Recording.2025-07-07.144330.mp4

Built With:

Frontend

• 
• 
• 
• 
• 
  On login or registration, the client sends a request to the backend using Axios (/auth/loginUser or /auth/registerUser). If successful, a JWT is stored in the localStorage for the user. Routes that aren't the root page are protected by ProtectedRoutes component which sends a request to the backend (auth/verifyUser) to verify if the JWT is valid or if the user even has a JWT. If valid, users can access the routes, otherwise, they'll be redirected to the root/login page. After login, the user lands on the Home page where they search for NBA players. The search triggers an API call to the backend (api/v1/getPlayer/:name) and stores the payload in the location state as playerData while navigating to the /check-player route. Users can then view last 'N' games or head-2-head games of players in /check-player route. playerData is stored in the location state in both the /last-n-games and /head-to-head routes. In /last-n-games, users fill in information about the stat they want to check, the prop-line, and the number of games they wish to view. This triggers an API call to the backend (/api/v1/getGames/playerID?n=<>) which uses the playerID from playerData and n from the number of games filled out to get the 'n' game logs of the player, and sends that payload and the other information (prop-line, stat, number of games, etc.) to the location state in the /results route. Similarly, in /head-to-head, users fill out the same info except they must fill out the opposing team instead of number of games. This triggers an API call to the backend (/api/v1/getHeadToHead/:player_id/:team_name) to get the game logs of the player against the chosen opposing team, and sends that payload and the other information to the location state in the /results route. The data is displayed as an interactive bar graph of the relevant game logs using Chart.js.

Backend

• 

• 

• 

• 

• 
  The nba_api was used to populate the PSQL tables with the latest active players and gamelogs using Python scripts.

  API Routes

  POST /auth/registerUser - Register a new user.

  POST /auth/loginUser - Login and receive a JWT.

  GET /auth/verifyUser - Verify JWT for protected routes.

  GET /dashboard - Get the logged-in user's name (protected).

  GET /api/v1/getPlayer/:name - Get player info by name.

  GET /api/v1/getGames/:player_id?n=<n> - Get last N games for a player.

  GET /api/v1/getHeadToHead/:player_id/:team_name - Get games vs. a specific team.

  GET /api/v1/playerPlayedOpponentDidNot/:playerA_id/:playerB_id/:teamA/:teamB - Find games where player A played, but played B didn't

  Middleware:

  authorization.js - Checks JWT validity for protected routes

  validInfo.js - Validates registration/login input

DevOps

• 
• - Frontend hosting
• - Backend hosting
• - Database hosting

Getting Started:

Here's how you can get this project started up locally

Prerequisites:

Install Docker and Docker Compose (https://www.docker.com/products/docker-desktop/)

Installation & Set Up:

1. Clone the repository

git clone https://github.com/khoamelo/PickEmOrKickEm.git

cd PickEmOrKickEm

2. Create a .env file for root directory, server, and client

• For the root directory .env file, add:

PGUSER=postgres
PGHOST=db
PGPASSWORD=<your_password>
PGDATABASE=<your_db_name>
PGPORT=<your_pg_port>

• For the server directory .env file, add:

PORT=<your_port>
PGUSER=postgres
PGHOST=db
PGPASSWORD=<your_password>
PGDATABASE=<your_db_name>
PGPORT=<your_pg_port>
JWT_SECRET=<your_jwt_key>

• For the client directory .env file, add:

VITE_API_URL=http://localhost:<your_port>

3. Make the following changes:

• In the docker-compose.yml file, add - /app/node_modules under services -> client -> volumes
• In the Dockerfile file for the client directory, change COPY package.*json ./ to COPY package*.json ./

4. Start all services by running:

docker-compose up --build

5. Populate the DB by running the following (WARNING: this will take a few minutes to complete):

docker-compose exec server python3 /app/db/nba_api_to_db/add_active_players_db.py
docker-compose exec server python3 /app/db/nba_api_to_db/add_game_logs_db.py

6. (Optional) To repopulate the DB with the latest, updated data, run the following:

docker-compose down -v
docker-compose up --build

Then repeat step 5

Usage:

Once you have installed and set up everything, you will be prompted to sign in or register. If you don't have an account which you probably don't if you just installed and set up for the first time, or repopulated the DB, then register, then sign in

Once signed in, you will be prompted to enter an active NBA player name to check stats for (The matching is case-insensitive and accent-insensitive, but sensitive to punctuation such as periods and hyphens (e.g., P.J. Tucker, Shai Gilegous-Alexander, etc.))

After choosing a player, you will prompted to choose to check either of the following "Last 'N' Games" or "Head-2-Head Games." Last 'N' Games will visualize the game logs of the players last 'n' games, and Head-2-Head games will visualize the game logs of players playing against a specific team

If Last 'N' Games is chosen, you will be asked to choose a stat to check (points, rebounds, assists, points + rebounds, etc.), a prop-line that a betting site might have (SGA over 31.5 points), and the number of games you want to view

Similarly, if Head-2-Head Games is chosen, you will asked to choose a stat to check, a prop-line, and the opposing team

Once you enter in all the required fields, you will be shown a bar graph of the games you chose to visualize for the player, and whether the player hit over their prop-line (green), hit under (red), or hit exactly on the prop-line (gray). Three gauges are on top of the bar graph which gives a percentage of the player hitting over, under, or pushing the prop-line. Hovering over each bar will give you the date of the match played, the opponent and whether or not they played home or away, and the exact stat the player got.

Last N Games

H2H Games

You can also adjust the minutes played to filter out games where players played a certain amount of minutes