Skip to content

imperium11/SoundTok-Frontend

 
 

Repository files navigation

SoundTok, a place to share your sound

https://soundtok.live

Anyone, from the casual listener and discoverer of new music to the veteran producer, will find a community on SoundTok. Put together a new track by uploading audio files from your computer or loading from saved drafts and layering different sounds and effects. Once you're satisfied, post the song with a description, image, and hashtags so others can discover your music through the feed or search bar. Keep your profile up to date, so others know who you are as an artist.

Table of Contents

Navigation Bar

Main Features

  • Navigate to the home page by clicking on the SoundTok logo.
  • Login or signup by clicking on the Login icon.
  • Navigate to the Studio page by clicking on the Studio icon. If not logged in, the user will be redirected to the log in page.
  • Navigate to the Profile page by clicking on the Profile icon. If not logged in, the user will be redirected to the log in page. When logged in, the profile icon is replaced by user profile picture.
  • Search a user (start with '@') or hashtag (default or start with '#') in the search bar. A list of matched results will be displayed in the search research popup page. Click on one of the matched results will take the user to the corresponding hashtag page or profile page.

Screen Recording (Google Chrome)

Studio

Main Features

  • Upload audio files from your computer or select a draft that you want to keep working on
  • Add effects such as Fade-in, Fade-out & Reverb to individual tracks
  • Highlight a section of a track and trim to shorten the overall length
  • Download the the edited tracks as a single audio file
  • Save current project as a draft

studio-recording-forGIF

Feed

Main Features

  • Post music by uploading an audio file, loading from drafts, or putting together a track in the studio
  • Posts include can include a title, description (limited to 140 char), and image
  • Explore others' musical projects, which are sorted with most recently posted on top
  • Discover relevant music and artists when clicking on a hashtag
  • Remix songs that pique your interest directly in the studio
  • Save unfinished posts to drafts to revisit later
  • Delete posts after publishing

Screen Recording 2022-03-04 at 7 23 01 PM

Hashtag Page

Main Features

  • When a user clicks on or search for a hashtag, renders a list consisting of every post which contains the same hashtag
  • Posts include project title, audio length, profile picture, username, and an expandable description
  • Re-render the posts content when a user searches other hashtags from the page
  • Add animated wave effect

BOC_hashtag

Profile

Main Features

  • View user's profile picture and biography
  • Edit own profile picture and biography
  • View list of user's posts with relevant details
  • View list of own drafts with relevant details
  • Delete own songs and drafts
  • Remix selected song directly in the studio

image

Schema Design

Screen Shot 2022-03-05 at 12 14 01 PM

The server utilizes a Postgres database on the backend with minimal JavaScript transformation.

Authentication

Authentication uses Auth0 capabilities. It allows users to sign up and log in with username, email, and password, or through one of the social connections including Google, Facebook, and Twitter.

Screen Shot 2022-03-08 at 6 18 09 PM

## Tech Stack & Libraries

Deployment/Utility

Core Tech

Libraries

Contributors

@xoxohorses - Product Manager/Software Engineer (Feed, Design, Project Management) LinkedIn

@roastnewt - Architecture Owner/Software Engineer (Deployment, CI/CD, Studio drafts) LinkedIn

@imperium11 - UI Owner/Software Engineer (Studio, Design) LinkedIn

@Maggie-Mango - Software Engineer (Database design, Deployment, API tests) LinkedIn

@rita0927 - Software Engineer (Soundbar, Hashtag page, tests) LinkedIn

@yuanqiwang - Software Engineer (Authentication, Navigation bar/search) LinkedIn

@rickkunz - Software Engineer (Profile page) LinkedIn

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.0%
  • CSS 7.2%
  • HTML 0.8%