back to homepage

SoundSpirit

♫ special sounds from yesterday and today ♫

Custom Blog

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.

Index

Overview

SoundSpirit was conceived in late 2018, and was originally an audio player built with Flask (a python web framework) and pure HTML/CSS/Javascript. The idea evolved, and in 2019 SoundSpirit was re-worked into a music blogging site with React.js. It went through multiple iterations of backends and databases before settling on a fully Firebase hosted solution and launching in summer 2019. In 2021, the site was updated with a clean new design, the power of Typescript + Next.js, and was moved from Firebase hosting to Vercel. For Nick, SoundSpirit has been invaluable as a playground for new technologies, and as a space where he can share interesting sounds from around the world.

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

Firebase Firestore (NoSQL)
Vercel (Hosting)
Typescript, SCSS, Next.js

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.

Nicholas Harrison

nicholas.robin.harrison[at]gmail.com© 2022