Building an NHL app
Going full stack with Ruby/Rack and React
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.
- Respond to a GET request to return a list of all the teams.
- Respond to a GET request to return a list of all players from a team, given a team id.
- Respond to a POST request to add a new player to the database.
- 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 http://127.0.0.1:3939 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 http://127.0.0.1:3939/players/7. 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.
