Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/techkumarnitish/nxt-watch-a7

In this project, let's build Nxt Watch by applying the concepts we have learned till now.
https://github.com/techkumarnitish/nxt-watch-a7

react-context react-icon react-router-dom react-video-player reactjs styled-components tailwind-css

Last synced: 10 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
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



- [Extra Small (Size < 576px) and Small (Size >= 576px) - Login](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-sm-outputs.png)

- [Extra Small (Size < 576px) and Small (Size >= 576px) - Login Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-failure-sm-outputs.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-light-theme-lg-output.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-dark-theme-lg-output.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-failure-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-failure-dark-theme-lg-output-v1.png)



Home Route



- [Extra Small (Size < 576px) - Home](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-xs-outputs.png)

- [Small (Size >= 576px) - Home - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-light-theme-sm-output.png)

- [Small (Size >= 576px) - Home - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-dark-theme-sm-output.png)

- [Extra Small (Size < 576px) and Small (Size >= 576px) - Home - No Search Results](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-no-videos-sm-outputs.png)

- [Extra Small (Size < 576px) and Small (Size >= 576px) - Home Failure](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-sm-outputs.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-dark-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home - No search results - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-no-videos-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home - No search results - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-no-videos-dark-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-dark-theme-lg-output-v0.png)



Trending Route



- [Extra Small (Size < 576px) - Trending](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-xs-outputs.png)

- [Small (Size >= 576px) - Trending - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-light-theme-sm-output.png)

- [Small (Size >= 576px) - Trending - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-dark-theme-sm-output.png)

- [Extra Small (Size < 576px) and Small (Size >= 576px) - Trending Failure](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-sm-outputs.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Trending - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Trending - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-dark-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Trending Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Trending Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-dark-theme-lg-output-v0.png)



Gaming Route



- [Extra Small (Size < 576px) - Gaming](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-xs-outputs.png)

- [Small (Size >= 576px) - Gaming - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-light-theme-sm-output.png)

- [Small (Size >= 576px) - Gaming - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-dark-theme-sm-output.png)

- [Extra Small (Size < 576px) and Small (Size >= 576px) - Gaming Failure](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-sm-outputs.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Gaming - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Gaming - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-dark-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Gaming Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Gaming Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-dark-theme-lg-output-v0.png)



Video Item Details Route



- [Extra Small (Size < 576px) and Small (Size >= 576px) - Video Item Details](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-success-sm-outputs.png)

- [Extra Small (Size < 576px) and Small (Size >= 576px) - Video Item Details Failure](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-sm-outputs.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Video Item Details - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-success-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Video Item Details - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-success-dark-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Video Item Details Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Video Item Details Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-dark-theme-lg-output-v0.png)



Saved Videos Route



- [Extra Small (Size < 576px) - No Saved Videos](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-sm-outputs.png)

- [Small (Size >= 576px) - Saved Videos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-light-theme-sm-output-v0.png)

- [Small (Size >= 576px) - Saved Videos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-dark-theme-sm-output-v0.png)

- [Extra Small (Size < 576px) - Saved Videos](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-xs-outputs.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Saved Videos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Saved Videos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-dark-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Saved Videos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Saved Videos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-dark-theme-lg-output-v0.png)



Popup Design Files



- [Extra Small (Size < 576px) and Small (Size >= 576px) - Logout](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-sm-outputs.png)

- [Extra Small (Size < 576px) and Small (Size >= 576px) - Menu](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-menu-popup-sm-outputs.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Logout - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-light-theme-lg-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Logout - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-dark-theme-lg-output-v0.png)



Not Found Route



- [Extra Small (Size < 576px) and Small (Size >= 576px) - Not Found](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-page-not-found-sm-output.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Not Found](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-page-not-found-light-theme-lg-output-v0.png)



### 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](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-light-theme-lg-output-v0.png) 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](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-no-videos-light-theme-lg-output-v0.png) 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](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-light-theme-lg-output-v0.png) 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](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-light-theme-lg-output-v0.png) 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](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-light-theme-lg-output-v0.png) 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](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-light-theme-lg-output-v0.png) 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](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-light-theme-lg-output-v0.png) 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



```json

{

  "username": "rahul",

  "password": "rahul@2021"

}

```



#### Sample Success Response



```json

{

  "jwt_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9.nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y"

}

```



#### Sample Failure Response



```json

{

  "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



```json

{

  "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



```json

{

  "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



```json

{

  "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



```json

{

  "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



```jsx



  //write code here



```



- Use `formatDistanceToNow` function to find the difference between the given date and now in words



```jsx

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



  ```text

   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



  ```jsx

  


    

  


  ```



- 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



- [https://assets.ccbp.in/frontend/react-js/nxt-watch-logo-light-theme-img.png](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-logo-dark-theme-img.png)

- [https://assets.ccbp.in/frontend/react-js/nxt-watch-profile-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-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-failure-view-dark-theme-img.png)

- [https://assets.ccbp.in/frontend/react-js/nxt-watch-no-search-results-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](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-light-theme-img.png) alt as **not found**

- [https://assets.ccbp.in/frontend/react-js/nxt-watch-banner-bg.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](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](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](https://assets.ccbp.in/frontend/react-js/nxt-watch-linked-in-logo-img.png) alt should be **linkedin 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.