Building an NHL app

Going full stack with Ruby/Rack and React

Photo by Chris Liverani on Unsplash

For my latest project I made an app where you can see a list of NHL teams and when you select one, you see a list of players on that team. The user can also add a new player as well as delete a player from the list. The app is simple enough but was a great project to really connect a lot of pieces. It is really split into two separate projects that work together- a backend built with Ruby and Rack that uses a SQLite database, and a frontend built with React.

The backend stores data in two tables for teams and players and has the following structure:

With this information in the database, we can use Rack to set up a server with different routes that will respond to various requests from the frontend. For this project, I had four routes set up that could respond to the frontend based on the type of request and the data passed along with it.

  1. Respond to a GET request to return a list of all the teams.
  2. Respond to a GET request to return a list of all players from a team, given a team id.
  3. Respond to a POST request to add a new player to the database.
  4. Respond to a DELETE request to remove a player from the database.

Let’s take a look at how the second route was implemented in code.

If this server is running locally, the base URL would be meaning it is running on local server on port 3939. Now we can ask for a list of players by making a GET request to If in the database the team with an id of 7 was the Chicago Blackhawks, it would respond by sending a list of all players on the Chicago Blackhawks. Let’s see how this looks in practice.

And that is my project! I played it pretty safe on the backend in terms of data and relationships but the core concepts are there and it was just enough to make a fun, full stack application. I’m excited to go deeper and see what the next project will be.

Software Engineer