Musing Studio

A video library app providing list of songs and albums of different artists and categories.

SPA responsive video player integrated application made using ReactJs.

Tech Stack

• ReactJS
• CSS3
• React Router
• Context API
• Mockbee for backend.

Features

• Authentication
• Toasts, video listing, Filter functionality
• Playlist/watch later/history management
• Like/unlike functionality

---

Table Of Contents

1. Deployment Status
2. Screens
3. Social PLatforms
4. Contribution Guidlines

---

Deployment Status

Visit site to know more -->

---

Screens

• Home Page
• Single Video Listing Page
• Video Listing Page
• Playlist Page
• Liked Videos
• Watch Later
• 404 Page
• History
• Authentication Pages
  • SignUp
  • LogIn
  • LogOut

Home Page

The very front opening of Musing studio comprise of a carousel component.

Clicking on any slide of carousel would navigate you to the product listing page with the selected carousel category.

Further going down on landing page you would see music categories.

Below it are you artists category.

If you click on any one of the categories you will be redirected to the video list page with the selected category.

Videos Page(Video Listing Page)

• You would see a video listing page where all the videos are listed.

  

• On video Card, you would be able to see call to action button, clicking on it would popup options.
  

• Those options would contain:

  • Add To Liked - Add to liked videos and could also remove it.
    

  • Add To Playlist - When clicked on add to playlist option, it would open the create playlist dialog box.
    

    • Create as many playlist as you want to.
      

    • To add the video in any of playlist that you have click on any of the playlist, and it will add your video in your desired playlist. You would also be able to see the count of videos a particular playlist has.
      

      

  • Add To WatchLater - Add or remove from watchlater.
    

Playlist Page

• From the navbar, you can navigate to your playlist page where all your playlists would be present.
• On the Playlist Page,
  • You would be able to delete a playlist.
  • You would be able to delete a particular video from a playlist.

Liked Videos

You would be able to remove the video from the Liked Videos List.

Watch Later

You would be able to remove the video from the Watch Later list.

History Page

• When you view a particular video that will add it to the history.
• You can delete a particular video from the history.
• You can see a button to "Clear full history" which will clear all the history at once.

Single Video Listing Page

Click on any video you want to see, and you will be navigated to the single video listing page.

Click on the play button and it will play the video, and will also add it into your history. On this page you would also be able to see recommendation container, which lists all other similar recommendations.

The recommendation card would look something like this

On clicking the options icon on this recommendation card will popUp the options.

Also take care of fallbacks.

Authentication Pages

SignUp Page

The user would be able to signUp using his/her credentials.

LogIn Page

Login if already have an account or do a guest login.

LogOut Page

404 page

Take care of page not found, displays 404 page if route not found.

---

Connect to us via social platforms

Twitter
LinkedIn
Instagram
[Gmail](mailto: namratajain29001@gmail.com)

---

Contribution guidlines

For contributing to expeditech UI,

1. Clone & Fork the repo.
2. Make a feature branch from dev.
3. Commit and push those changes.
4. Raise the PR(pull request).