Introducing Artest: a music quiz game 👩‍🎤

I'm happy to launch my new side project today 🎉 Artest is a music quiz game that challenges players to guess the artists by showing them a bunch of random album covers. Features include:

• Selecting how many rounds to play 🎱
• Getting musical trivia after each round 👁
• Hundreds of albums and artists as questions 👩‍🎤
• Sharing results to social media 📲

Background

I started this project as a way to improve my front-end skills, specifically with UI design and React. It was supposed to be a simple project but it kept growing bigger, and with the support of my awesome mentor @tryggvigy I ended up learning tons.

Development process

Being a developer more comfortable in the backend, I usually start my side projects with hooking up to whatever API I needed and rendering that on the screen. I would only do the bare minimum to make the UI look presentable. This time however, I took the complete opposite route by starting with design, then building the frontend components and then finally working on the APIs and backend to get actual data.

I started the design phase in the beginning of August, and ended up catching the design bug. I spent hours on Dribbble being inspired by artists and designers and tweaking my own wireframes. Starting with designing the UI allowed me to think of the functionality I wanted and how I would build it. I made three pretty different designs and settled on the cleanest one.

Only when the design phase was finished, I started creating the React components with dummy data. I tried to keep as close as possible to the design. I started with a create-react-app template and had the frontend call the Spotify APIs directly. However, create-react-app doesn't allow for truly secret environment variables, and I didn't want my Spotify credentials to be exposed. At this point, the game was playable and could've been deployed as is, but even though this is a small side project I didn't want to compromise on security.

Therefore, I decided to build my own Express backend and refactor the frontend to call my APIs that will in turn call the Spotify APIs. This was definitely the biggest refactor I did in this project, and probably ever. Here is the git diff for that PR:

I spent some time afterwards learning about and writing unit tests, and finally when most of the bugs were squashed and the game was playable in my local, I set about in deploying the application to production. This part warrants a full-length post but I ended up using AWS. I spent the last couple of weeks tweaking and manually testing the site on my own.

The code is all open source and available on my GitHub, so take a look if you're interested. The frontend repo is here and the backend repo is here ⭐️

What I learned

This has been an incredible learning opportunity for me. Throughout this project, I worked on all kinds of different things I didn't have a chance to use before. That includes UI design, writing unit tests, using ES6 classes and deploying a full stack application to production. I used CSS variables, React hooks, the Fetch API, ESLint, Prettier and Jest. I owe a lot of thanks to my mentor Tryggvi whose help has been invaluable!

I still have a lot of ideas that I want to implement with Artest including adding hints and a leaderboard, and I welcome and appreciate your feedback!

Thanks for reading 👋 Until next time.