I’ve not written many technical articles before so please let me know what you think and if you found all this as interesting as I did. I’m sure I’ll be doing more development-like articles in the future especially when the process involves cool tools like ChatGPT.
I am a co-founder of a music data and analytics company called Rankd. This is by far the most complicated technical endeavour I’ve ever been in charge of building and has been a huge learning curve to build. It’s got a lot of complicated components that have made this a challenge, especially as a novice in programming that is working full-time, freelancing and working on multiple other companies all at once.
However, I’ve recently been experimenting with a tool that can help with that learning curve and can even program web components for you.
ChatGPT is a large language model designed to provide accurate and helpful information on a wide range of topics. The model is trained on a vast amount of text data, that enables it to understand and generate human-like responses to questions and prompts. A lot of the data the model has been trained on is seemingly website development related and that’s where this tool becomes insanely useful for development.
But first, let me describe what I wanted to create and the process of going about it.
What is Rankd Discover?
Rankd is a music analytics platform and our homepage at the time of writing this article is a leaderboard displaying musicians from Brighton rated on Instagram and Spotify following. However, this isn’t the best for a couple of reasons.
One, the leaderboard makes it overly competitive. Our goal is to display, appreciate and teach people about the Brighton music scene and the competitiveness takes away some of the community spirit that we wish to nurture. It was never our intention nor the final product but it was a good use of our data at the time and definitely helped us generate organic search traffic and traction amongst local musicians.
Secondly, the way I had built our backend data collection script was flawed and sometimes couldn’t successfully scrape Instagram for the current follower count of the artists on the site. This lead to the data sometimes being out by a few days and what’s the point of a leaderboard if the score isn’t 100% correct?
This led to the following idea. I wanted to build something that displays musicians, uses our data (without the need for it to be as up-to-date) and works as a platform for musician discovery. This led to me designing and coming up with the Rankd Discover page.
This idea stemmed from stock market visualisation graphs (Are these called heatmaps?) which are super useful for easily dissecting large quantities of financial information. I thought we could use a similar approach and style to build our discover page.
It was a very poor day for the stock market when I wrote this article 😬
My idea was to show musicians in a grid and have the size of the artist's block be dependent on a few things. I wanted to take into account their growth, if they had upcoming gigs, new song releases, etc.
In summary, this view wouldn’t rely on the live data as heavily, It would feature more musicians with less of a following as it takes into account more data and it would be a much better way of visualising data.
What is ChatGPT?
ChatGPT is a large language model that can generate human-like responses to whatever you input. It was developed by OpenAI and trained on data from conversations between real people. It can be used to answer questions, help with programming, do translations and can have conversations with you if you’re lonely (Definitely not what I’m using it for).
Things like ChatGPT have been around for a couple of years but in the last 6 months, this model has become incredibly advanced and can do a lot more things that few people thought possible at the start of the year.
Why did I use ChatGPT?
I wasn’t planning to originally. It was a coincidence that I had ChatGPT open and just decided to test out how well it can generate HTML and CSS code. So I started by asking it to build me a grid.
My prompt: “Could you make me an HTML and CSS grid with varying row heights and column widths with 15 divs inside of it which all have a <img> tag, <h1 > element, <h4 > elements and a <p > element”
The response:
ChatGPT had generated a grid that matched my prompt and worked. I then started adding to my prompt and made it include more of what I was looking for.
The answers from ChatGPT got better and better and in less than a minute I had this on the site:
Yes, ChatGPT even populated the images with cute cats, which as far as I am concerned is a massive positive. It also understood from a previous prompt that the website was about musicians and used ‘Artist’ and ‘Genre’ in the code. This shows that ChatGPT has a memory of your previous prompts in the thread and can actually build an understanding of what you are trying to do and then can change its response accordingly.
I’m not going to run through every single thing I used ChatGPT for when building this page because it’s a lot but this has changed the way in which I can build Rankd. Even for (probably stupid) questions it answers them in a clear way and provides examples of how to do it.
In half an hour or less, I had the backbones of this page built out. Functionally it was there, I just needed to now work on getting the sizing of artists depending on their stats which I will be planning to use ChatGPT for.
The whole AI/Language model technology has really interested me and I’m excited to see where it goes.
I usually struggle writing articles but I’ve been so caught up in this tool and so interested in it that this article was a breeze to write and will probably be one of the longest articles on my site.
I will keep testing and using ChatGPT in my work and I’m sure I’ll write more articles on it in the future.