SoundShroud is my dark-mode clone of SoundCloud, the popular audio streaming platform. In developing this clone, I looked to exactly replicate the core functionality of the app while reconceptualizing its color scheme to be more aesthetically pleasing.
NOTE: Due to recent updates in Google Chrome's audio context autoplay protocol, Google Chrome no longer fully supports SoundShroud's functionality. SoundShroud is fully functional on all other common modern browsers (Firefox, Safari, Internet Explorer, etc.), and changes are being made to the site's structure to restore SoundShroud to full functionality on Google Chrome again soon.
The following technologies were used:
- React-Redux (front-end)
- Ruby on Rails (back-end)
- AJAX (front-end to back-end communication)
- Wavesurfer.js (conversion of audio files into a representative waveform)
- PostgreSQL (database storage)
- AWS S3 (data hosting)
- Heroku (domain hosting)
- The user first arrives on a sleek welcome page with a sampling of songs displayed, accompanied by prompts to sign in or create a new account
- Splash page hero banner uses smooth carousel display
- Splash page showcases a sample of songs from the SoundShroud database that the user can play before logging in or signing up
-
The user can sign up for a new account via a modal form
-
The user can sign in through via a modal form
-
Robust error handling for invalid email format, invalid email/password combination, and empty text fields
-
The user can log in to as a demo user for quick access to the site's core features
-
Re-routes user from create account modal to sign in modal if a pre-existing email is entered
-
Re-routes user from sign in modal to create account modal if a new email is entered
- Upon signing in, the user arrives on a show page of currently trending tracks, as well as a set of artists to check out, curated by the site
- The page displays tracks of interest in both horizontal and vertical scrollable displays
-
Create: the user can upload new songs through an upload form
-
Read: the user can view all public songs through individual song pages, each displaying an aesthetically pleasing waveform representing the individual song's changes in volume over time
-
Update: the user can edit their own song's title, description, and privacy settings
-
Destroy: the user can remove songs from their account
- The user can play and pause songs through buttons located throughout the site (splash page, discover page, individual song pages, profile pages)
- The user can listen to and control the music being played using a continuosly visible footer that persists while navigating from page to page
- The song bar has play, pause, scrolling, looping, song skip, and song restart functionality
- The song's progress in time is directly mimicked by the display of the individual song page's audio player
-
The user profile page displays all of that user's posted tracks
-
The user can upload or update their own profile picture
-
The user can edit or delete their own tracks from their profile page
-
The user can view other users' profile pages
