Skip to content

Spotify clone for listening to music while trying to be productive

Notifications You must be signed in to change notification settings

aparcanapavel/Study-fi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Study-fi

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:

Splash-page

  • 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.

Home-Screen

  • 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.

Search-Screen

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

Create-playlist1

  • 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.

    create-playlist2

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

    create-playlist3

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

playlist-show

  • Users can visit any of their created playlists anytime.

About

Spotify clone for listening to music while trying to be productive

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published