Skip to content

Latest commit

 

History

History
62 lines (47 loc) · 2.57 KB

README.md

File metadata and controls

62 lines (47 loc) · 2.57 KB

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.