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

Refer to videos below:

Success View

Failure View

Design Files

Login Route

• Extra Small (Size < 576px) and Small (Size >= 576px) - Login - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Login - Dark Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Login Failure - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Login Failure - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login Failure - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login Failure - Dark Theme

Home Route

• Extra Small (Size < 576px) - Home - Light Theme

• Extra Small (Size < 576px) - Home - Dark Theme

• Small (Size >= 576px) - Home - Light Theme

• Small (Size >= 576px) - Home - Dark Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Home - No search results - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Home - No search results - Dark theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Home Failure - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Home Failure - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home - No search results - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home - No search results - Dark theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home Failure - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home Failure - Dark Theme

Trending Route

• Extra Small (Size < 576px) - Trending - Light Theme

• Extra Small (Size < 576px) - Trending - Dark Theme

• Small (Size >= 576px) - Trending - Light Theme

• Small (Size >= 576px) - Trending - Dark Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Trending Failure - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Trending Failure - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Trending - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Trending - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Trending Failure - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Trending Failure - Dark Theme

Gaming Route

• Extra Small (Size < 576px) - Gaming - Light Theme

• Extra Small (Size < 576px) - Gaming - Dark Theme

• Small (Size >= 576px) - Gaming - Light Theme

• Small (Size >= 576px) - Gaming - Dark Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Gaming Failure - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Gaming Failure - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Gaming - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Gaming - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Gaming Failure - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Gaming Failure - Dark Theme

Video Item Details Route

• Extra Small (Size < 576px) and Small (Size >= 576px) - VideoItemDetails - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - VideoItemDetails - Dark Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - VideoItemDetails Failure - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - VideoItemDetails Failure - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - VideoItemDetails - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - VideoItemDetails - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - VideoItemDetails Failure - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - VideoItemDetails Failure - Dark Theme

SavedVideos Route

• Extra Small (Size < 576px) - No SavedVideos - Light Theme

• Extra Small (Size < 576px) - No SavedVideos - Dark Theme

• Small (Size >= 576px) - SavedVideos - Light Theme

• Small (Size >= 576px) - SavedVideos - Dark Theme

• Extra Small (Size < 576px) - SavedVideos - Light Theme

• Extra Small (Size < 576px) - SavedVideos - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No SavedVideos - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No SavedVideos - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - SavedVideos - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - SavedVideos - Dark Theme

Popup Design Files

• Extra Small (Size < 576px) and Small (Size >= 576px) - Logout Popup - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Logout Popup - Dark Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Menu - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Menu - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Logout Popup - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Logout Popup - Dark Theme

Not Found Route

• Extra Small (Size < 576px) and Small (Size >= 576px) - Not Found - Light Theme

• Extra Small (Size < 576px) and Small (Size >= 576px) - Not Found - Dark Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Not Found - Light Theme

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Not Found - Dark Theme

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 a invalid username and password are provided and the Login button is clicked, then the respective error message received from the response should be displayed
  • When a valid username and password are provided and the Login button is clicked, then the page should be navigated to the Home route
  • When an unauthenticated user, tries to access the HomeRoute, TrendingRoute, GamingRoute, SavedVideosRoute, VideoDetailsRoute, then the page should be navigated to Login route
  • When an authenticated user, tries to access the HomeRoute, TrendingRoute, GamingRoute, SavedVideosRoute, VideoDetailsRoute, then the page should be navigated to the respective route
  • When an authenticated user tries to access the LoginRoute, then the page should be navigated to the Home route
  • When show password checkbox is checked, then the password should be shown
  • When 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 homeVideosApiUrl with query parameter as search and its initial value as empty string
      • Loader should be displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of videos received in the response
      • 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 homeVideosApiUrl
    • When a non-empty value is provided in the Search Input and button with search icon is clicked
      • Make an HTTP GET request to the homeVideosApiUrl 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 the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of videos received in the response
    • When the HTTP GET request made to the homeVideosApiUrl returns an empty list for videos then No Videos View should be displayed
  • When the website logo image is clicked, the page should be navigated to the Home route
  • When a Video is clicked, the page should be navigated to the Video Item Details route
  • Clicks on the Trending link in the Sidebar is clicked, then the page should be navigated to the Trending route
  • Clicks on the Gaming link in the Sidebar is clicked, then the page should be navigated to the Gaming route
  • Clicks on the Saved Videos link in the Sidebar is clicked, then the page should be navigated to the SavedVideos route

• Trending Route

  • When an authenticated user opens the Trending Route,
    • An HTTP GET request should be made to trendingVideosApiUrl
      • Loader should be displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of videos received in the response
      • 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 trendingVideosApiUrl
  • When the website logo image is clicked, the page should be navigated to the Home route
  • When a Video is clicked, the page should be navigated to the Video Item Details route
  • Clicks on the Home link in the Sidebar is clicked, then the page should be navigated to the Home route
  • Clicks on the Gaming link in the Sidebar is clicked, then the page should be navigated to the Gaming route
  • Clicks on the Saved Videos link in the Sidebar is clicked, then the page should be navigated to the SavedVideos route

• Gaming Route

  • When an authenticated user opens the Gaming Route,
    • An HTTP GET request should be made to gamingVideosApiUrl
      • Loader should be displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of videos received in the response
      • 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 gamingVideosApiUrl
  • When the website logo image is clicked, the page should be navigated to the Home route
  • When a Video is clicked, the page should be navigated to the Video Item Details route
  • Clicks on the Home link in the Sidebar is clicked, then the page should be navigated to the Home route
  • Clicks on the Trending link in the Sidebar is clicked, then the page should be navigated to the Trending route
  • Clicks on the Saved Videos link in the Sidebar is clicked, then the page should be navigated to the SavedVideos route

• Video Item Details Route

  • When an authenticated user opens the Video Item Details route

    • An HTTP GET request should be made to videoItemDetailsApiUrl with jwt_token in the Cookies and video_id as path parameter
      • loader should be displayed while the HTTP request is fetching the data
      • After the HTTP request is successful, 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 videoItemDetailsApiUrl

  • Corresponding video should be displayed using react-player package

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

  • When the Like button is clicked,

    • It will change to an 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 will change to an 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

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

  • When the Saved button is clicked

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

• SavedVideos Route

  • When an authenticated user opens the SavedVideos Route,
    • If the list of saved videos is empty, then No Saved Videos Found View should be displayed
    • The Videos in the list of saved videos should be displayed as a list of videos
  • When the website logo image is clicked, the page should be navigated to the Home route
  • When a Video is clicked, the page should be navigated to the Video Item Details route
  • Clicks on the Home link in the Sidebar is clicked, then the page should be navigated to the Home route
  • Clicks on the Trending link in the Sidebar is clicked, then the page should be navigated to the Trending route
  • Clicks on 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 in the URL then the page should navigate to the Not Found route

• When the theme button in the header is clicked, then the theme should be changed accordingly

• Logout

  • When the Logout button in the header is clicked, then the Logout Popup should be displayed
    • When Cancel button is clicked, then the popup should be closed and the page should not be navigated
    • When Confirm button is clicked, then the page should be navigated to the Login route

API Requests & Responses

loginApiUrl

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

Method: POST

Description:

Returns a response containing the jwt_token

Success Response

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

Failure Response

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

homeVideosApiUrl

API: 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"
    },
    ...
  ],
}

trendingVideosApiUrl

API: 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"
    },
    ...
  ]
}

gamingVideosApiUrl

API: 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"
    },
    ...
  ]
}

videoItemDetailsApiUrl

API: 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 list of gaming videos

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

• To build this project, take a look at the React Popup and React Video Player reading materials

• To style popup content use .popup-content class

<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

• Home route should consist of / in the URL path

• Login route should consist of /login in the URL path

• Trending route should consist of /trending in the URL path

• Gaming route should consist of /gaming in the URL path

• SavedVideos route should consist of /saved-videos in the URL path

• VideoItemDetails route should consist of /videos/:id in the URL path

• 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 in Home Route has the data-testid attribute value as searchButton to it

• Styled Components should be used for styling purposes.

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

• The Sidebar should consists of

  • Facebook logo
  • Twitter Logo

• Each Route consists of respective banner as shown in the design files and it should have the data-testid as banner.

• The thumbnail images in the Route should have the alt attribute value as video thumbnail.

• The channel logo images in Home Route should have the alt attribute value as channel logo.

• Home Route

  • The Route should consist of an HTML container element with data-testid as home.
  • The Route should consist of an HTML image element with attribute value as nxt watch logo and src as the value of the given nxt watch logo URL should be displayed in the banner.
  • The Route should consist of a banner and it contains a close button element with data-testid as close.
  • The HTML container element with data-testid as home should have the background color.
    • If the Dark theme is applied, then the #181818 color should be applied as a background-color.
    • If the Light theme is applied, then the #f9f9f9 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 maintain the background color theme.
    • If the Dark theme is applied, then the #0f0f0f color should be applied as a background-color.
    • If the Light theme is applied, then the #f9f9f9 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 maintain the background color theme.
    • If the Dark theme is applied, then the #0f0f0f color should be applied as a background-color.
    • If the Light theme is applied, then the #f9f9f9 color should be applied as a background-color.

• SavedVideos Route

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

• VideoItemDetails Route

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

• The Website Logo image for Light theme and Dark theme should have the alt attribute value as website logo

• The Failure image for Light theme and Dark theme should have the alt attribute value as failure view

• The Not found image for Light theme and Dark theme should have the alt attribute value as not found

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

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

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/nxt-watch-logo-light-theme-img.png

• https://assets.ccbp.in/frontend/react-js/nxt-watch-logo-dark-theme-img.png

• https://assets.ccbp.in/frontend/react-js/nxt-watch-profile-img.png alt should be profile

• https://assets.ccbp.in/frontend/react-js/nxt-watch-failure-view-light-theme-img.png

• https://assets.ccbp.in/frontend/react-js/nxt-watch-failure-view-dark-theme-img.png

• https://assets.ccbp.in/frontend/react-js/nxt-watch-no-search-results-img.png alt should be no videos

• https://assets.ccbp.in/frontend/react-js/nxt-watch-no-saved-videos-img.png alt should be no saved videos

• https://assets.ccbp.in/frontend/react-js/nxt-watch-not-found-light-theme-img.png

• https://assets.ccbp.in/frontend/react-js/nxt-watch-not-found-dark-theme-img.png

• https://assets.ccbp.in/frontend/react-js/nxt-watch-banner-bg.png Banner Background image

• https://assets.ccbp.in/frontend/react-js/nxt-watch-facebook-logo-img.png alt should be facebook logo

• https://assets.ccbp.in/frontend/react-js/nxt-watch-twitter-logo-img.png alt should be twitter logo

• https://assets.ccbp.in/frontend/react-js/nxt-watch-linked-in-logo-img.png alt should be linked in logo

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.

YoutubeClone