Introducing Artest: a music quiz game 👩‍🎤
Tags: showdev, webdev, react, express
Published: 2020-12-21 21:12:56

---
title: Introducing Artest: a music quiz game 👩‍🎤
published: true
description: Guess what artist the album belongs to on https://artestgame.com
tags: showdev, webdev, react, express
cover_image: https://i.imgur.com/V4zmgXV.gif
---

![Artest logo](https://dev-to-uploads.s3.amazonaws.com/i/txujv3riq8y4g09f9lgn.png)


I'm happy to launch my new side project today 🎉 [Artest](https://artestgame.com) 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](https://dev.to/tryggvigy) I ended up learning tons. 

![Round screen](https://dev-to-uploads.s3.amazonaws.com/i/v49ym7coo3mvi4oygq0z.png)

## 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:

![Git diff showing +51 and -1,537](https://dev-to-uploads.s3.amazonaws.com/i/6x651diw5c5g20zrygdn.png)


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](https://github.com/dmahely/artest.git) and the backend repo is [here](https://github.com/dmahely/artest-backend.git) ⭐️

![Round result screen](https://dev-to-uploads.s3.amazonaws.com/i/1nm8loxmtebxl9b249o4.png)

## 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!


![Final result screen](https://dev-to-uploads.s3.amazonaws.com/i/c345ey29wb735nuroohg.png)


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.