DEV Community

Cover image for Introducing Artest: a music quiz game 👩‍🎤
Doaa Mahely
Doaa Mahely

Posted on

8 2

Introducing Artest: a music quiz game 👩‍🎤

Artest logo

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.

Round screen

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

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 ⭐️

Round result screen

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

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.

Top comments (2)

Collapse
 
agustinustheo profile image
Agustinus Theodorus

This is a good game for parties! Love it!

Collapse
 
dmahely profile image
Doaa Mahely

Thank you Agustinus, your comment makes me happy!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up