KHOI

πŸ‘¨β€πŸ’» β˜•οΈ

Birthday Piano

Born in Jul 2020
Post hero image
Table of contents

I also launched it on Product Hunt. Check it out and upvote!

The story behind

During COVID, the whole university was in lockdown. Having too much spare time, I started to learn web dev: HTML, CSS and JavaScript.

One of my early projects β€” CodeBros β€” built with Bootstrap and jQuery.

I’ve always been in love with music so my original thought was if I could build a small simple piano with HTML and CSS. And, I realized I could! I was really proud of my CSS skill!

I started to record piano notes from GarageBand and wrote the JS code to play the sound.

Realizing my friend’s birthday coming up, I had the urge to finish the project and tried to make the piano play the Happy Birthday song.

The result

I created a piano that could play Happy Birthday on the web! After finished playing the song, users could open a gift to see a motivational quote. However, the code was quite messy.

Two years later, having more experience, I revisited the project and added SoundJS, ViteJS, TypeScript, and refactored the code to look nicer.

Realizing this project could be for anyone to send a birthday message, I added the backend for users to customize their wish instead of a quote.

Finally, I designed the icon for the site and launched on Product Hunt!