SOA musical artist portfolio

Recently, I found myself with two problems: 1) I needed to learn service-oriented architecture and 2) I had promised to build my brother a website for his musical projects. I figured I would solve both of these at once, by creating a portolio site using a React frontend and a Django REST framework backend. 

I've played in bands since I was a teenager and getting a website for your project usually involves the same steps: bending whatever blogging platform is most popular at the time to fit the requirements. These requirements have remained the same since (seemingly) the beggining of time:

  • A news feed with prominence (you want people to see the most recent thing you've been upto).
  • A discography with lots of detail. 
  • An image library.
  • Links to whatever the dominant platforms are for hosting your music. This would've been Myspace when I was younger, but now there is a much bigger ecosystem, encompassing Spotify, Bandcamp, Soundcloud and many others. 

This last point is key. There are numerous platforms that music fans expect to see your content on. Differences in distribution deals and record label's preferences can lead to a musical artists prescence being patchy across the different platforms. The center piece of my CMS (if you can even call it that... micro-CMS?) needs to be a discography that can serve as a central 'jumping off point' to all the other services, where the actual music will be hosted. 

Github repository
 

Discography page: 




Admin sub-menu, showing the form for new release entries. The admin pages are essentially a series of extensive forms. 




Documentation of the endpoint: 



 

Simulating a slow network connection to see the infinite scoll on the news feed: 




Suite of Cypress end-to-end tests: 

 


 

Deployment of the project posed a bit of a mystery. There are plenty of blogs out there about intergrating a React frontend with a Django backend, in developerment, but precious little about best practises for the infrastructure once you want to go live. In the end, I opted to utilize Docker Compose on a DigitalOcean droplet. Compose spins up an Nginx container, which is then routing requests to either the front or backend. The container with the webserver is also taking care of certbot. It seems to be working fairly well so far. The more I search on the topic, I have yet to see anyone indicate that this is the wrong approach. 

This course, from testdriven.io was helpful implementing the authentication via JWT. 

I next plan to add an 'Events/Calendar' page, but seeing as we are currently in the middle of coronavirus and there are no live performances, this wasnt the most pressing functionality to add! 
I may develop the back-end seperately as a 'headless CMS' and once that is more mature, use it to try out some different frontend frameworks (Vue, Backbone, etc). I have many friends who are musicians, so it would be a nice challenge to deploy the same back-end for each, but build a completely different client-side application, based on what they want their site to look like. 

You may also like: