Building an NFL Stat App in NextJS and TypeScript with PostgreSQL

Introduction

As a self-taught programmer, the most common question I've received from employers is, "What made you want to get into software development?" My response each time is the same two-word phrase— Fantasy Football. My interest in developing a competitive advantage against friends and family in fantasy football leagues quickly evolved into a journey down a rabbit hole where I picked up programming, data science, and logical thinking skills.

My NFL app allows users to sort players by stats and filter by position and name

As anyone who knows me has witnessed, my fantasy football workflow involves spreadsheets and visits to countless niche football stat websites. Almost all NFL stats are interpretations of play-by-play data outside of Pro Football Focus's grades. This lack of proprietary information led me to a revelation— I can make my own one-stop tool.

The Concepts

When planning the application, I encountered a critical issue; the NFL does not provide public access to their API. Luckily, the "nfl_data_py" library through Python allows access to NFL data for free, thanks to Ben Baldwin, Sebastian Carl, and Lee Sharpe. Calls to the library's various functions return data tabularly, such as the data frame pictured below.

nfl_data_py provides users with play-by-play data for a given season.

Although the data as a table is not as readily consumable as a REST API, I realized through previous experiences developing APIs that this is a workable format almost ready to be used. In Python, I used SQLAlchemy to push the table to a PostgreSQL database and utilized an ORM as the data layer in the application.

The ORM I elected to use for this project is Prisma. Prisma provides developers with a quick and easy way to connect to their database and make queries using plain Javascript (or, in my case, Typescript.) Prisma sets blueprints for each table and allows for easy migrations when needed. In my specific situation, I could build models for my pre-existing table through Prisma's "pull" command.

Models are the blueprint Prisma uses to communicate between the database table and the app.

The application now features become the main focus, with data accessible via an ORM. In this application, the functions I was interested in implementing were searching by player name (first and/or last), filtering by position, and sorting by counting stats. I utilized React's `useState` and `useEffect` functions to handle changes in filter status. Users can pair multiple filters together; for example, changing the position filters while searching by name does not cause a state reset. This feature was a necessity for the app's usefulness.

Queries can include “Most rushing touchdowns by non-RBs,” as seen here

Conclusions

Although the application is functional as-is, I fully intend to expand upon what it can do. This project served excellently in allowing me to familiarize myself with the dataset, use NextJS and Typescript to deliver more robust web applications, and further expand my experience working with databases. Now that I know more about the skills mentioned earlier, I am confident in my ability to enhance this application to be more feature rich.

You can find my application at nfl-app.vercel.app. Like always, all the source code is available to view on my GitHub in this repository.