Skip to content
/ Nxt-Watch-Youtube-Clone- Public

Nxt Watch modelled after YouTube, is a video streaming platform that enables users to log in, explore video categories and search for specific content while adjusting the interface theme(light, dark)

madhurnxtwatch.ccbp.tech
0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

MadhurGoyal01/Nxt-Watch-Youtube-Clone-

BranchesTags

Repository files navigation

In this project, let's build Nxt Watch by applying the concepts we have learned till now.

Refer to the videos below:

Success View


Failure View


Design Files

Login Route
Home Route
Trending Route
Gaming Route
Video Item Details Route
Saved Videos Route
Popup Design Files
Not Found Route

Set Up Instructions

Click to view
  • Download dependencies by running npm install
  • Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

  • Initially, the app should be in Light theme

  • Login Route

    • When invalid credentials are provided and the Login button is clicked, then the error message received from the response should be displayed
    • When valid credentials are provided and the Login button is clicked, then the page should be navigated to the Home Route
    • When an unauthenticated user tries to open the Home, Trending, Gaming, Saved Videos, and Video Details Route, then the page should be navigated to the Login Route
    • When an authenticated user tries to open the Home, Trending, Gaming, Saved Videos, and Video Details Route, then the page should be navigated to the respective route
    • When an authenticated user tries to open the Login Route, then the page should be navigated to the Home Route
    • When the Show Password checkbox is checked, then the password should be shown
    • When the Show Password checkbox is unchecked, then the password should be masked

  • Home Route

    • When an authenticated user opens the Home Route,
      • An HTTP GET request should be made to the Home Videos API URL with jwt_token in the Cookies and query parameter search with the initial value as an empty string
        • Loader should be displayed while fetching the data
        • After the data is fetched successfully, the list of videos should be displayed
        • If the HTTP GET request made is unsuccessful, then the Failure View should be displayed
          • When the Retry button is clicked, an HTTP GET request should be made to the Home Videos API URL
      • When a non-empty value is provided in the search input and the search icon button is clicked
        • Make an HTTP GET request to the Home Videos API URL with jwt_token in the Cookies and query parameter search with value as the text provided in the search input
        • Loader should be displayed while fetching the data
        • After the data is fetched successfully, the list of videos should be displayed
      • When the HTTP GET request made to the Home Videos API URL returns an empty list, then the No Videos View should be displayed
    • When a Video is clicked, then the page should be navigated to the Video Item Details Route
    • When the Trending link in the Sidebar is clicked, then the page should be navigated to the Trending Route
    • When the Gaming link in the Sidebar is clicked, then the page should be navigated to the Gaming Route
    • When the Saved Videos link in the Sidebar is clicked, then the page should be navigated to the Saved Videos Route

  • Trending Route

    • When an authenticated user opens the Trending Route,
      • An HTTP GET request should be made to the Trending Videos API URL with jwt_token in the Cookies
        • Loader should be displayed while fetching the data
        • After the data is fetched successfully, the list of videos should be displayed
        • If the HTTP GET request made is unsuccessful, then the Failure View should be displayed
          • When the Retry button is clicked, an HTTP GET request should be made to the Trending Videos API URL
    • When a Video is clicked, then the page should be navigated to the Video Item Details Route
    • When the Home link in the Sidebar is clicked, then the page should be navigated to the Home Route
    • When the Gaming link in the Sidebar is clicked, then the page should be navigated to the Gaming Route
    • When the Saved Videos link in the Sidebar is clicked, then the page should be navigated to the Saved Videos Route

  • Gaming Route

    • When an authenticated user opens the Gaming Route,
      • An HTTP GET request should be made to the Gaming Videos API URL with jwt_token in the Cookies
        • Loader should be displayed while fetching the data
        • After the data is fetched successfully, the list of videos should be displayed
        • If the HTTP GET request made is unsuccessful, then the Failure View should be displayed
          • When the Retry button is clicked, an HTTP GET request should be made to the Gaming Videos API URL
    • When a Video is clicked, then the page should be navigated to the Video Item Details Route
    • When the Home link in the Sidebar is clicked, then the page should be navigated to the Home Route
    • When the Trending link in the Sidebar is clicked, then the page should be navigated to the Trending Route
    • When the Saved Videos link in the Sidebar is clicked, then the page should be navigated to the Saved Videos Route

  • Video Item Details Route

    • When an authenticated user opens the Video Item Details Route

      • An HTTP GET request should be made to the Video Details API URL with jwt_token in the Cookies and video_id as a path parameter
        • Loader should be displayed while fetching the data
        • After the data is fetched successfully, the response received should be displayed
        • If the HTTP GET request made is unsuccessful, then the Failure View should be displayed
          • When the Retry button is clicked, an HTTP GET request should be made to the Video Details API URL

    • Corresponding video should be displayed using react-player package

    • Initially, all the three buttons (Like, Dislike, Save) should be inactive

    • When the Like button is clicked,

      • It should change to active state
      • If the Dislike button is already in the active state, then the Dislike button needs to be changed to the inactive state

    • When the Dislike button is clicked,

      • It should change to active state
      • If the Like button is already in the active state, then the Like button needs to be changed to the inactive state

    • When the Save button is clicked,

      • It should change to active state and the respective video details should be added to the list of saved videos
      • Save button text should be changed to Saved

    • When the Saved button is clicked

      • It should change to inactive state and the respective video details will be removed from the list of saved videos
      • Saved button text should be changed to Save

  • Saved Videos Route

    • When an authenticated user opens the Saved Videos Route,
      • If the list of saved videos is empty, then the No Saved Videos Found View should be displayed
      • The list of saved videos should be displayed
    • When a Video is clicked, then the page should be navigated to the Video Item Details Route
    • When the Home link in the Sidebar is clicked, then the page should be navigated to the Home Route
    • When the Trending link in the Sidebar is clicked, then the page should be navigated to the Trending Route
    • When the Gaming link in the Sidebar is clicked, then the page should be navigated to the Gaming Route

  • Not Found Route

    • When a random path is provided as the URL path, then the page should be navigated to the Not Found Route

  • Header

    • When the Website logo is clicked, then the page should be navigated to the Home Route
    • When the theme icon button is clicked, then the theme should be changed accordingly
    • When the Logout button is clicked, then the Logout Popup should be displayed
      • When the Cancel button is clicked, then the popup should be closed and the page should not be navigated
      • When the Confirm button is clicked, then the page should be navigated to the Login Route
API Requests & Responses

Login API

URL: https://apis.ccbp.in/login

Method: POST

Description:

Returns a response based on the credentials provided

Request

{
  "username": "rahul",
  "password": "rahul@2021"
}

Sample Success Response

{
  "jwt_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9.nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y"
}

Sample Failure Response

{
  "status_code": 404,
  "error_msg": "Username is not found"
}

Home Videos API

URL: https://apis.ccbp.in/videos/all?search=

Method: GET

Description:

Returns a response containing the list of all videos

Response

{
  "total": 60,
  "videos": [
    {
      "id": "30b642bd-7591-49f4-ac30-5c538f975b15",
      "title": "Sehwag shares his batting experience in iB Cricket | iB Cricket Super Over League",
      "thumbnail_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ibc-sol-1-img.png",
      "channel": {
        "name": "iB Cricket",
        "profile_image_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-cricket-img.png"
      },
      "view_count": "1.4K",
      "published_at": "Apr 19, 2019"
    },
    ...
  ],
}

Trending Videos API

URL: https://apis.ccbp.in/videos/trending

Method: GET

Description:

Returns a response containing the list of trending videos

Response

{
  "total": 30,
  "videos": [
    {
      "id": "ad9822d2-5763-41d9-adaf-baf9da3fd490",
      "title": "iB Hubs Announcement Event",
      "thumbnail_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ibhubs-img.png",
      "channel": {
        "name": "iB Hubs",
        "profile_image_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-hubs-img.png"
      },
      "view_count": "26K",
      "published_at": "Nov 29, 2016"
    },
    ...
  ]
}

Gaming Videos API

URL: https://apis.ccbp.in/videos/gaming

Method: GET

Description:

Returns a response containing the list of gaming videos

Response

{
  "total": 30,
  "videos": [
    {
      "id": "b214dc8a-b126-4d15-8523-d37404318347",
      "title": "Drop Stack Ball",
      "thumbnail_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/drop-stack-ball-img.png",
      "view_count": "44K"
    },
    ...
  ]
}

Video Details API

URL: https://apis.ccbp.in/videos/:id

Example: https://apis.ccbp.in/videos/802fcd20-1490-43c5-9e66-ce6dfefb40d1

Method: GET

Description:

Returns a response containing the details of a specific video

Response

{
  "video_details": {
    "id": "ad9822d2-5763-41d9-adaf-baf9da3fd490",
    "title": "iB Hubs Announcement Event",
    "video_url": "https://www.youtube.com/watch?v=pT2ojWWjum8",
    "thumbnail_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ibhubs-img.png",
    "channel": {
      "name": "iB Hubs",
      "profile_image_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-hubs-img.png",
      "subscriber_count": "1M"
    },
    "view_count": "26K",
    "published_at": "Nov 29, 2016",
    "description": "iB Hubs grandly celebrated its Announcement Event in November 13, 2016, in the presence of many eminent personalities from the Government, Industry, and Academia with Shri Amitabh Kant, CEO, NITI Aayog as the Chief Guest."
  }
}

Quick Tips

Click to view 
<Popup
  modal
  trigger={
    //write code here
  }
  className="popup-content"
>
  //write code here
</Popup>
  • Use formatDistanceToNow function to find the difference between the given date and now in words
import {formatDistanceToNow} from 'date-fns'
console.log(formatDistanceToNow(new Date(2021, 8, 20)))
// Return the distance between the given date and now in words.

Important Note

Click to view

The following instructions are required for the tests to pass

  • Render Home Route component when the path in URL matches /

  • Render Login Route component when the path in URL matches /login

  • Render Trending Route component when the path in URL matches /trending

  • Render Gaming Route component when the path in URL matches /gaming

  • Render Saved Videos Route component when the path in URL matches /saved-videos

  • Render Video Item Details Route component when the path in URL matches /videos/:id

  • Render Not Found Route component when the path in URL matches /not-found

  • No need to use the BrowserRouter in App.js as we have already included in index.js

  • User credentials

     username: rahul
 password: rahul@2021

  • Wrap the Loader component with an HTML container element and add the data-testid attribute value as loader to it

    <div className="loader-container" data-testid="loader">
  <Loader type="ThreeDots" color="#ffffff" height="50" width="50" />
</div>

  • The HTML button element with search icon in Home Route should have the data-testid attribute value as searchButton to it

  • Styled Components should be used for styling purposes

  • The theme icon button should have the data-testid as theme

  • The video thumbnail images in the Routes should have the alt as video thumbnail

  • The channel logos in Home Route should have the alt as channel logo

  • Home Route

    • The Route should consist of an HTML container element with data-testid as home
    • The Route should consist of a banner and it contains a close button with data-testid as close
    • The Route should consist of a banner as shown in the design files with data-testid as banner
    • The Route should consist of an HTML image element with alt as nxt watch logo and src as the given Nxt Watch logo URL in the banner
    • The HTML container element with data-testid as home should have the background color,
      • If the Light theme is applied, then the #f9f9f9 color should be applied as a background color
      • If the Dark theme is applied, then the #181818 color should be applied as a background color

  • Trending Route

    • The Route should consist of an HTML container element with data-testid as trending
    • The HTML container element with data-testid as trending should persist the background color,
      • If the Light theme is applied, then the #f9f9f9 color should be applied as a background color
      • If the Dark theme is applied, then the #0f0f0f color should be applied as a background color

  • Gaming Route

    • The Route should consist of an HTML container element with data-testid as gaming
    • The HTML container element with data-testid as gaming should persist the background color,
      • If the Light theme is applied, then the #f9f9f9 color should be applied as a background color
      • If the Dark theme is applied, then the #0f0f0f color should be applied as a background color

  • Saved Videos Route

    • The Route should consist of an HTML container element with data-testid as savedVideos
    • The HTML container element with data-testid as savedVideos should persist the background color,
      • If the Light theme is applied, then the #f9f9f9 color should be applied as a background color
      • If the Dark theme is applied, then the #0f0f0f color should be applied as a background color

  • Video Item Details Route

    • The Video Item Details Route should consist of an HTML container element with data-testid as videoItemDetails
    • The HTML container element with data-testid as videoItemDetails should persist the background color,
      • If the Light theme is applied, then the #f9f9f9 color should be applied as a background color
      • If the Dark theme is applied, then the #0f0f0f color should be applied as a background color

  • The Website logos for Light theme and Dark theme should have the alt as website logo

  • The Failure images for Light theme and Dark theme should have the alt as failure view

  • In the Video Item Details Route, the #2563eb color should be applied as color for any active button i.e (Like, Dislike, Save)

  • In the Video Item Details Route, the #64748b color should be applied as color for any inactive button i.e (Like, Dislike, Save)

Resources

Image URLs
Colors
Hex: #0f0f0f
Hex: #f9f9f9
Hex: #f8fafc
Hex: #1e293b
Hex: #f1f5f9
Hex: #475569
Hex: #f1f1f1
Hex: #181818
Hex: #e2e8f0
Hex: #94a3b8
Hex: #4f46e5
Hex: #64748b
Hex: #231f20
Hex: #ffffff
Hex: #212121
Hex: #616e7c
Hex: #3b82f6
Hex: #00306e
Hex: #ebebeb
Hex: #7e858e
Hex: #d7dfe9
Hex: #cbd5e1
Hex: #000000
Hex: #ff0b37
Hex: #ff0000
Hex: #383838
Hex: #606060
Hex: #909090
Hex: #cccccc
Hex: #424242
Hex: #313131
Hex: #f4f4f4
Hex: #424242
Font-families
  • Roboto

Things to Keep in Mind

  • All components you implement should go in the src/components directory.
  • Don't change the component folder names as those are the files being imported into the tests.
  • Do not remove the pre-filled code
  • Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.

About

Nxt Watch modelled after YouTube, is a video streaming platform that enables users to log in, explore video categories and search for specific content while adjusting the interface theme(light, dark)

madhurnxtwatch.ccbp.tech

Topics

javascript css html react-router reactjs rest-api react-components routing localstorage react-props react-state-management react-context jwt-token-for-authentication

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages