Beat the Odds

Project Link: https://swish-analytics-challenge.vercel.app/data

GitHub Repository: https://github.com/philipstubbs13/swish-analytics-challenge

Beat the Odds is a web app that was created specifically to help the average basketball fan quickly and effectively visualize and organize complex market data for their favorite nba players and teams. With this app, I hope to make sports betting easy, fun, and enjoyable once again. If you have any ideas or suggestions on how to make that happen, let's chat.

View Wep App · API Documentation · About · Report Issue · Request Feature

Table of Contents

• About the Project
  • Tech Stack
  • Features
  • About the API
• Getting Started
• Running Tests
• Deployment
• Contributing
• Contact
• Issues And Requests

About the Project

A web app that takes complex, technical market data (in json format) for nba players and transforms that data in a way so that the average basketball fan can visualize and understand.

There are 2 main datasets:

• props - this represents the optimal betting line being offered for each market, where a market is defined as the line for a specific stat type of a player. For example, for Russell Westbrook, his 4 unique markets and respective optimal lines are points (19.0), rebounds (9.0), assists (8.5), and steals (1.5).

• alternates - this represents all of the lines offered at one point for a market, and their respective under, over, and push probabilities. For example, for Russell Westbrook’s points market, there were 5 different lines - 18.5, 19.0, 19.5, 20, and 20.5

Tech Stack

• Typescript
• React.js
• shadcn/ui
• TanStack Table
• Next.js
• Vitest (unit testing framework)
• Tailwind

Features

• Visualize player market data represented as a table. Each row of the table represents a market. For each market, included is the low and high lines for that market from the alternates dataset. For example, for Westbrook’s points, there are columns for his low (18.5) and high (20.5).

• Filter data by position, stat type, and or market status (suspended or not).

• A search bar that filters on player name or team name.

• An indication of whether a market is suspended or not.

  A market is suspended if any of these 3 cases are true.

  1. marketSuspended = 1 for that market in the props dataset.
  2. That market’s optimal line does not exist in the alternates dataset. For example, Jordan Poole points.
  3. That market exists in the alternates dataset, but none of the 3 probabilities for the optimal line are greater than 40%. For example, Steph Curry steals. His optimal line is 1, but the under, push, and over probs are each under .4

• Manually suspend or release.

About the API

The data for this project is available for use through an API built using Next.js. Using Next.js routes, this API extracts player market data from the json datasets and then transforms the data into a usable source so that it can be loaded into a table that gets rendered using React server components.

To see the data used for this project, take a look at the following endpoints:

• https://swish-analytics-challenge.vercel.app/api/props

• https://swish-analytics-challenge.vercel.app/api/alternates

Getting Started

Clone the project.

  git clone https://github.com/philipstubbs13/swish-analytics-challenge.git

Go to the project directory.

  cd swish-analytics-challenge

Install dependencies.

  npm install

Start the development server.

  npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Running Tests

This project uses vitest for unit tests. To run the unit tests for this project, run the following command in the root directory of this project.

  npm run test

To generate a test coverage report, run the following command:

npm run coverage

Deployment

This app is deployed through the Vercel Platform. Deploys are set up to happen automatically when code is merged into the main branch.

Contributing

Feedback and contributions are very much appreciated and always welcome!

Contact

Phil Stubbs - philipstubbs13@gmail.com

Issues and Requests

If you find an issue while using the application or have a request, log the issue or request here. These will be addressed in a future code update.