brennan-flood / study-fi

Spotify clone for listening to music while trying to be productive

Study-fi

Study-fi Live Link

Technologies Used:

• GraphQL
• Apollo Client
• Mongo DB for storing user information
• Express.js
• React.js
• Node.js
• JavaScript
• HTML5
• CSS3
• Web Speech API for voice-to-text search
• Loader API for transition effects
• AWS S3 buckets for MP3 and image files storage

Challenges:

• Creation of a working Queue.
• Continuous play of music when navigating pages.
• Utilizing Voice to Text API.

Overview:

Based off Spotify, Study-fi is an app that is targeted towards students and/or professionals aiming to improve their focus and productivity. With a library filled with lo-fi music, user will be allowed to:

• Listen to music continuously while browsing through the application.
• Play music instantly.
• Like/Unlike songs.
• Create/Delete playlists.
• Search for songs, artists, and albums.
• View the Queue songs.
• Add to Queue(bonus).

Wireframes:

• Upon visiting Study-fi, users are welcomed with a spash page.
• Users can Sign Up/Log In.
• Users can click Learn more to read more about the application.

• After successfully signing up or logging in, users are then taken to the home page, where they have access to the full library.
• Users can go to the search page, their library of liked songs, create a playlist, and view their playlists.

• On the search page, users are able to search for Songs, Artists and Albums.

• My Favorite feature I had to implement was creating a playlist.

• After clicking on "Create Playlist", users are prompted a modal where they can begin creating the playlist name.

  

  • Users then are prompted with another screen to begin searching our library.
  • Users also have the chance to skip this step.

  

  • Users can search for songs and albums to add to their playlist.

• Users can visit any of their created playlists anytime.