Wednesday 14 April 2021 / coding
- interactions between the client (frontend) and server (API backend) handled using AJAX with JSON
- a resource with at least one has-many relationship
- at least three AJAX calls using
fetchcovering at least two CRUD actions
- RESTful API routes
- to control the vast majority of the frontend view rendering
- to handle server communication
- using object-oriented patterns
After browsing through a long list of public APIs for inspiration, I decided to build an app that would bring together three separate resources: jazz videos, cat images/GIFs and jokes. The app allows you to retrieve a random example of each of these resources and choose whether to save it to your collection.
For the cats and jokes, I decided to use a couple of APIs from the long list, while the jazz videos - a more familiar domain - would be self-curated with data persisted to the app's own API database.
Continuing in the spirit of previous projects, I wanted to make an app that would actually be useable, rather than just a tech demo (even if that's one of the main purposes). A key component of making a usable app in which users can save and review collections of resources is - rather obviously - a user model. I decided to include this in the API and use client-server communication to handle user and session management. Initially I planned on using standard Rails session management, but setting up sessions is complicated by the stripped-back Rails setup for APIs. In the end, I built a custom token-based authorisation system that would prevent access to user-specific API endpoints without a unique access token. Attempting to access a user's data directly via the API's endpoints, e.g. at jazzcatcom.herokuapp.com/users/1/cats, will render an error, and any AJAX requests made to read or create user resources (essentially anything except the index of all jazz videos) will likewise fail without the user's access token provided as a header.
The final entity relationship diagram for the API backend is below; you can also open the diagram as a PDF.
Below is a demo of the app, which is hosted on Heroku and can be accessed via jazzcatcom.yndajas.co (you will be redirected to GitHub).