♫ special sounds from yesterday and today ♫
SoundSpirit is a fully customized blogging site, built originally with Firebase and React, and updated with a new design and a new framework (Next.js) in 2021. The site features a unique design, bespoke CMS, custom audio player, and excellent music recommendations.
Design & Redesign
From its inception, SoundSpirit has had a unique and playful design. The initial version, which was active from 2019-2021, had all the features of the current version (apart from server-side rendering capabilities), however its design was lacking in some areas. As part of a larger effort which included adding Typescript and Next.js to the site, a redesign of the UI was undertaken. Mockups were prepared in Figma, with a focus on simplifying the interface as well as making the site feel "quieter". This involved removing the large carousel element from the top of the homepage, replacing it with three sections for each of the site's areas - blog, lists, & mixes. Blog posts were simplified and made slightly smaller, increasing overall readability.
The Technology Stack
The Audio Player
One of the main features of the website is a custom audio player. It takes links from YouTube or SoundCloud, and plays them back with play/pause and seeking controls. If a track is currently playing, and another audio player is activated, the previous track will pause. The component uses the YouTube Player API, and Soundcloud's Widget API to retrieve and playback the audio files. Click here to see it in action.
Custom CMS (Content Management System)
The site features a fully customized backend for creating, updating, and deleting blog posts. Accounts are only available to admins, and when logged in, the users are able to navigate to the admin dashboard via a floating button on all pages. Once there, admins can choose whether they want to create a new post, work on a draft, or edit an existing post. Database interactions are secured with the Firebase security rules to ensure only admins have write access. Firebase's lightening quick Firestore service ensures that changes can be made quickly, and are reflected in the site with zero delay.