/lightsout-video

Watch everything going on in F1 in one place.

Primary LanguageJavaScript

LightsOut Video

Netlify Status Orca UI

Table of Contents

About

  • Get everything going on in F1 at one place.

๐Ÿ›  Technologies used

  • ReactJS
  • OrcaUI component library
  • Mockbee for backend
  • React Router

Live link

LightsOut Video

Features

Home Page:

  • The home page consists of different categories, clicking them navigates the user to the video listing page with that category applied as a filter.

Video Listing (Explore)

  • On this page, users can see all the videos and can watch the video by clicking on them.

Video details

  • After a user clicks on any video in video listing page, it will navigate to this page, where user can:
    • Watch the video
    • Can like the video
    • Add the video into watch later, playlist and can create a playlist
    • Add video to watch later
    • Create new playlist

Playlist Management

  • On this page user can view all the playlists.
  • On clicking on any one open's that playlist, where user get option to:
    • Delete the playlist
    • Remove video from playlist

Watch later

  • Users can add any video into watch later if a video is already in watch later then the user can remove it.

Like video

  • Users can like any video, if the video is already liked then the user can remove it from liked videos.

History

  • Once the user watches the video it gets added to watch history. On the history page, the user can clear all history.

Authentication

  • LightsOut Video also has login, signup and logout feature
    • For Signup, form validation is done for all the fields.

Getting Started

  • Clone the repository on your local machine with the command below in your terminal, and cd into the lightsout-video folder
https://github.com/hiteshverma27/lightsout-video.git
cd lightsout-video
  • Install dependencies (if you are using yarn then do with that)
npm install
  • Create a .env file at the root level of the directory (at the level of package.json) and create a environment variable
REACT_APP_JWT_SECRET = <JWT_SECRET_KEY_OF_YOUR_CHOICE>
  • Start the server๐Ÿš€
npm start

Screenshots

lo-video-home lo-video-videolisting lo-video-singlevideo lo-video-playlist

๐Ÿ‘จโ€๐Ÿ’ป Connect with me