Work

Cleveland Browns Roster

When the 2021 NFL season started, I wanted some way to quickly look up players from my favorite team — the Cleveland Browns — during the game. While there are a lot of websites that show team rosters, they’re often very dense table layouts that include every little bit of information you could possibly want on a given player. I, however, tend to see or hear the players jersey number and want to look them up really quick to see who they are. Since I couldn’t find anything quite like this, I decided to make something myself.

What’s currently available

The main resources for viewing the Cleveland Browns roster are the Cleveland Browns official website, the official NFL website, and ESPN.

The Cleveland Browns official website.
The official NFL website.
ESPN's website.

As you can see, they’re very information rich, but when I’m at a game, I don’t necessarily need all of this information — I just want to quickly look up the player that made a play (usually by jersey number) and know who they are and what position they play.

The design

With the above in mind, I set out to create a bare-bones roster ordered by jersey number. I then took it a step further and broke the players out into which side of the team they were on — offense, defense, or special teams — as I realized that this made it even easier to scan the list quickly.

Light mode.
Dark mode.
App icon.

The build

Usually when I’m creating the initial version of something, I try to build it as simple as possible and only optimize later as it becomes necessary. In the case of this app, I kept it extremely simple by creating a JSON “back-end” that would be presented as an object in JavaScript and then I used JavaScript to manipulate the data from there. I may eventually make this more robust by switching to using something more akin to a database such as Airtable. Everythign else is just plain old HTML and CSS.

Open source

My intention was to build and use this for myself, however, I realized that other Browns' fans may want something like this as well, so I decided to open source the code and make it all publicly available. You can visit the project on Github to learn more.