Magnificent Play in React

Magnificent Play is a Video Library App, where users can play binge-watch videos related to cricket.

Authors

• @Puneet

Live App link

• Magnificent Play

Technologies used

• HTML
• CSS
• JavaScript
• ReactJS
• React-Redux
• Mockbee (for backend)

Features and Functionalities

1. Landing page :

- Banner that navigates to explore page
- Video Listing by Categories
- Trending Videos

2. Explore Videos page :

- Listing all the videos
- Filter Functionality to filter by:
    - Best Sixes, yorkers, funny moments or catches.
- Sort by Date latest or oldest.

3 Single Video Page:

- React Video Player
- Video Description.
- Must Watch related videos.

4. Playlist Page:

- List all the playlist of the user.
- user can delete playlist from here.
- sub-page which lists all the videos belonging to that playlist,

5 Likes Page:

- List all the videos liked by user.
- user can remove video from likes list

6 Watchlator Page:

- List all the videos user wish to watch later.
- user can remove video from Watchlator list

7 History Page:

 - List all the videos watched by user.
 - user can remove video from History list

8. Sign Up page -

- Input first and last name
- Input email address
- Input Password and verify password by click show password button
- User agreement checkbox
- Create new account button
- Already have an account button

9. Login page -

- Input Username
- Input password
- Remember me option (ONLY UI)
- Forgot password option (ONLY UI)
- Login button
- Dummy login data preloaded
- Create a New Account button

10. Log out button

11. Responsiveness

- All pages are made responsive with respect to mobile screens with width greater than 320px

12. Dark Mode Toggle

- Theme can be toggled between light mode and dark mode by clicking the toggle located at the top-right corner of every page.

- Theme will remain persistent between different browser sessions. (Implemented local storage to store theme memory)

How to run this app Locally

To run this app locally on your machine, clone the repo to your local machine.

1. `git clone https://github.com/PuneetP16/magnificent-play.git`
2. `cd magnificent-play`
In the project directory, you can run
3. `npm install`
4. `npm start`

This will start the app in development mode.
Open http://localhost:3000 to view it in your browser.
Make sure you have access to internet to make use of the API call inside the App.

👨‍💻 Lets connect !