My Guitar Site

Almost 3 years ago — 1 min read

A personal website to track my guitar learning and share my audio clips

View Site | Code on Github

Tools Used: React, DigitalOcean

How I made it

I made this using a DigitalOcean space which is blob storage, a wrapper around an AWS S3 Bucket, to store my audio clips, from that storage I then used the DigitalOcean API as a “CMS” to list out all the audio files on the screen inside the React app. You can read the How to use DigitalOcean Spaces as a CMS blog post to find out more about that 😃.

I used the antd react library to rapidly create the UI components, emulating a spotify layout with custom CSS on top of the library.

How it works

There’s a single GuitarContext that handles the current song playing, loading in the audio files and whether things are loading or errored. That allows the app to have multiple pages (chords, songs etc) and a singular player at the bottom that is controlled by any of these pages, keeping it all in sync.