Tranquillo is a music distribution site that I made from scratch, using Next.js, AWS and Stripe. It allows users to browse and purchase licenses to use my music. It includes a web audio player, built on top of the react-h5-audio-player, fuzzy searching, a tag system, and a checkout flow utilising Stripe.

Initial concept design

Using Spotify as a reference, I decided not to have the main page as mixed light/dark themes - and just went with a uniform theme that the user could change. Instead of having the heavily-focused 'search' button, I decided to go with dynamically searched content, meaning the song list would update automatically whilst the user types, rather than needing to press a button too. I used split colouring on the title to bring in some brand identity, as well as when the audio buttons in the list are active.

I generally liked the narrow column width, giving plenty of open space on the other pages. Not only does it help give the design breathing space, but it also allows for neat usage when swapped to tablet or mobile viewports.

Technical Decisions

The platform is built with NextJS, affording the benefits of React server-side components, SEO (vs Create React App). I used AWS to host the audio files, and Cloudfront to sit in front for fast delivery of the audio to users. Stripe is the clear frontrunner when it comes to payment services, and also provides a full test-mode of the service to use in development.

DevOps

For testing, I used a mixture of Jest for unit testing, and Cypress for appearance/integration testing. I then set up GitHub actions to automatically run the test suites upon pushes to the master branch. Now that v1 of the site is up and live, I will modify the GH Actions to block direct pushes to the master, and instead run the test suites on pushes to development and merges to master.

Lessons

• Spend more time writing unit tests and more sophistocated tests before implementing logic and components. It helps to impose critical thinking about the functionality/design of the work being implemented.
• Create a more comprehensive design system from the beginning, I ended up doing a lot of design work during the implementation, inefficiently.