A site to track an NFL league with family and friends. Players draft teams to earn points for each win or loss over the course of the NFL season.
The backend pulls data from ESPN APIs (with caching to limit requests) then processes it into endpoints for a React frontend.
I hacked together a version of this site a year ago when I was just learning JavaScript. Compare this repository to the source code from last year's app to see how far I've come in 10 months.
The backend is build with Express and TypeScript which make calls to ESPN APIs and process the data into endpoints for a React frontend. The site is hosted with Heroku which makes maintenance efficient -- pushes to master automatically create and deploy new builds.
- D3 Bump Chart tracking each player's ranking from week-to-week
- Add possession, down and distance, and yardline to active games
- Sort active games in some logical way (user toggled owner's games on top, then active games...)
- Rebrand of Who Are You Rooting Against?
Before the season, everyone drafts teams for either their wins or their losses. For example, you might draft:
- Giants wins (someone can also draft Giants losses but no one else can draft Giant wins)
- Cowboys losses
- Eagles losses
- Washington losses
As the season progresses, you get a point for each matching result. So, if the Giants go 10 - 6, they'd be worth 10 points at the end of the year. The person who drafted Giants losses would get 6 points.
Both sides (wins and losses) of the same team can be drafted. This means you are often rooting against someone else each week.
- http://site.api.espn.com/apis/site/v2/sports/football/nfl/scoreboard
- http://site.api.espn.com/apis/site/v2/sports/football/nfl/teams?limit=100
- https://site.api.espn.com/apis/v2/sports/football/nfl/standings
- PFR - Win Probability - They plan to move this behind a paywall shortly
- Clone repo
- Run
npm installto install dependencies - Start backend with
node run spin - Start frontend with
npm start - Open app in browser (use local host port shown when you start the frontend)
- Have fun!