{"id":25214137,"url":"https://github.com/techkumarnitish/nxt-watch-a7","last_synced_at":"2026-04-11T09:45:21.602Z","repository":{"id":274172785,"uuid":"922111166","full_name":"TechKumarNitish/nxt-watch-A7","owner":"TechKumarNitish","description":"In this project, let's build Nxt Watch by applying the concepts we have learned till now.","archived":false,"fork":false,"pushed_at":"2025-01-25T12:03:40.000Z","size":191,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T08:28:29.389Z","etag":null,"topics":["react-context","react-icon","react-router-dom","react-video-player","reactjs","styled-components","tailwind-css"],"latest_commit_sha":null,"homepage":"https://nextwatchnitish.ccbp.tech","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TechKumarNitish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-25T10:51:31.000Z","updated_at":"2025-01-25T12:03:43.000Z","dependencies_parsed_at":"2025-01-25T13:28:14.922Z","dependency_job_id":null,"html_url":"https://github.com/TechKumarNitish/nxt-watch-A7","commit_stats":null,"previous_names":["techkumarnitish/nxt-watch-a7"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TechKumarNitish/nxt-watch-A7","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechKumarNitish%2Fnxt-watch-A7","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechKumarNitish%2Fnxt-watch-A7/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechKumarNitish%2Fnxt-watch-A7/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechKumarNitish%2Fnxt-watch-A7/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TechKumarNitish","download_url":"https://codeload.github.com/TechKumarNitish/nxt-watch-A7/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechKumarNitish%2Fnxt-watch-A7/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259638069,"owners_count":22888371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-context","react-icon","react-router-dom","react-video-player","reactjs","styled-components","tailwind-css"],"created_at":"2025-02-10T16:58:33.345Z","updated_at":"2026-04-11T09:45:21.528Z","avatar_url":"https://github.com/TechKumarNitish.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"In this project, let's build **Nxt Watch** by applying the concepts we have learned till now.\n\n### Refer to the videos below:\n\n**Success View** \u003cbr/\u003e\n\n\u003cdiv style=\"text-align: center;\"\u003e\n     \u003cvideo style=\"max-width:80%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12);outline:none;\" loop=\"true\" autoplay=\"autoplay\" controls=\"controls\" muted\u003e\n    \u003csource src=\"https://assets.ccbp.in/frontend/content/react-js/nxt-watch-output-v0.mp4\" type=\"video/mp4\"\u003e\n  \u003c/video\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n**Failure View** \u003cbr/\u003e\n\n\u003cdiv style=\"text-align: center;\"\u003e\n    \u003cvideo style=\"max-width:80%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12);outline:none;\" loop=\"true\" autoplay=\"autoplay\" controls=\"controls\" muted\u003e\n    \u003csource src=\"https://assets.ccbp.in/frontend/content/react-js/nxt-watch-failure-output-v0.mp4\" type=\"video/mp4\"\u003e\n  \u003c/video\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n### Design Files\n\n\u003cdetails\u003e\n\u003csummary\u003eLogin Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Login](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-sm-outputs.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Login Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-failure-sm-outputs.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Login - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-light-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Login - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-dark-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Login Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-failure-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Login Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-failure-dark-theme-lg-output-v1.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHome Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) - Home](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-xs-outputs.png)\n- [Small (Size \u003e= 576px) - Home - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-light-theme-sm-output.png)\n- [Small (Size \u003e= 576px) - Home - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-dark-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Home - No Search Results](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-no-videos-sm-outputs.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Home Failure](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-sm-outputs.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Home - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Home - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-dark-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 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)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 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)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Home Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Home Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-dark-theme-lg-output-v0.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTrending Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) - Trending](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-xs-outputs.png)\n- [Small (Size \u003e= 576px) - Trending - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-light-theme-sm-output.png)\n- [Small (Size \u003e= 576px) - Trending - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-dark-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Trending Failure](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-sm-outputs.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Trending - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Trending - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-dark-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Trending Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Trending Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-dark-theme-lg-output-v0.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eGaming Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) - Gaming](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-xs-outputs.png)\n- [Small (Size \u003e= 576px) - Gaming - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-light-theme-sm-output.png)\n- [Small (Size \u003e= 576px) - Gaming - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-dark-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Gaming Failure](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-sm-outputs.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Gaming - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Gaming - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-dark-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Gaming Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Gaming Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-dark-theme-lg-output-v0.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVideo Item Details Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Video Item Details](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-success-sm-outputs.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Video Item Details Failure](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-sm-outputs.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 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)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 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)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 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)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 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)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSaved Videos Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) - No Saved Videos](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-sm-outputs.png)\n- [Small (Size \u003e= 576px) - Saved Videos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-light-theme-sm-output-v0.png)\n- [Small (Size \u003e= 576px) - Saved Videos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-dark-theme-sm-output-v0.png)\n- [Extra Small (Size \u003c 576px) - Saved Videos](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-xs-outputs.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 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)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 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)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Saved Videos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Saved Videos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-dark-theme-lg-output-v0.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePopup Design Files\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Logout](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-sm-outputs.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Menu](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-menu-popup-sm-outputs.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Logout - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-light-theme-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Logout - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-dark-theme-lg-output-v0.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNot Found Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Not Found](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-page-not-found-sm-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Not Found](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-page-not-found-light-theme-lg-output-v0.png)\n\n\u003c/details\u003e\n\n### Set Up Instructions\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n- Download dependencies by running `npm install`\n- Start up the app using `npm start`\n\u003c/details\u003e\n\n### Completion Instructions\n\n\u003cdetails\u003e\n\u003csummary\u003eFunctionality to be added\u003c/summary\u003e\n\u003cbr/\u003e\n\nThe app must have the following functionalities\n\n- Initially, the app should be in **Light** theme\n\n- **Login Route**\n\n  - When invalid credentials are provided and the **Login** button is clicked, then the error message received from the response should be displayed\n  - When valid credentials are provided and the **Login** button is clicked, then the page should be navigated to the Home Route\n  - 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\n  - 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\n  - When an _authenticated_ user tries to open the Login Route, then the page should be navigated to the Home Route\n  - When the **Show Password** checkbox is checked, then the password should be shown\n  - When the **Show Password** checkbox is unchecked, then the password should be masked\n\n- **Home Route**\n\n  - When an _authenticated_ user opens the Home Route,\n    - 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\n      - **_Loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, the list of videos should be displayed\n      - 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\n        - When the **Retry** button is clicked, an HTTP GET request should be made to the **Home Videos API URL**\n    - When a non-empty value is provided in the search input and the search icon button is clicked\n      - 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\n      - **_Loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, the list of videos should be displayed\n    - 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\n  - When a **Video** is clicked, then the page should be navigated to the Video Item Details Route\n  - When the **Trending** link in the Sidebar is clicked, then the page should be navigated to the Trending Route\n  - When the **Gaming** link in the Sidebar is clicked, then the page should be navigated to the Gaming Route\n  - When the **Saved Videos** link in the Sidebar is clicked, then the page should be navigated to the Saved Videos Route\n\n- **Trending Route**\n\n  - When an _authenticated_ user opens the Trending Route,\n    - An HTTP GET request should be made to the **Trending Videos API URL** with `jwt_token` in the Cookies\n      - **_Loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, the list of videos should be displayed\n      - 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\n        - When the **Retry** button is clicked, an HTTP GET request should be made to the **Trending Videos API URL**\n  - When a **Video** is clicked, then the page should be navigated to the Video Item Details Route\n  - When the **Home** link in the Sidebar is clicked, then the page should be navigated to the Home Route\n  - When the **Gaming** link in the Sidebar is clicked, then the page should be navigated to the Gaming Route\n  - When the **Saved Videos** link in the Sidebar is clicked, then the page should be navigated to the Saved Videos Route\n\n- **Gaming Route**\n\n  - When an _authenticated_ user opens the Gaming Route,\n    - An HTTP GET request should be made to the **Gaming Videos API URL** with `jwt_token` in the Cookies\n      - **_Loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, the list of videos should be displayed\n      - 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\n        - When the **Retry** button is clicked, an HTTP GET request should be made to the **Gaming Videos API URL**\n  - When a **Video** is clicked, then the page should be navigated to the Video Item Details Route\n  - When the **Home** link in the Sidebar is clicked, then the page should be navigated to the Home Route\n  - When the **Trending** link in the Sidebar is clicked, then the page should be navigated to the Trending Route\n  - When the **Saved Videos** link in the Sidebar is clicked, then the page should be navigated to the Saved Videos Route\n\n- **Video Item Details Route**\n\n  - When an _authenticated_ user opens the Video Item Details Route\n    - 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\n      - **_Loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, the response received should be displayed\n      - 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\n        - When the **Retry** button is clicked, an HTTP GET request should be made to the **Video Details API URL**\n  - Corresponding video should be displayed using `react-player` package\n  - Initially, all the three buttons (Like, Dislike, Save) should be inactive\n  - When the **Like** button is clicked,\n    - It should change to active state\n    - If the **Dislike** button is already in the active state, then the **Dislike** button needs to be changed to the inactive state\n  - When the **Dislike** button is clicked,\n\n    - It should change to active state\n    - If the **Like** button is already in the active state, then the **Like** button needs to be changed to the inactive state\n\n  - When the **Save** button is clicked,\n    - It should change to active state and the respective video details should be added to the list of saved videos\n    - **Save** button text should be changed to **Saved**\n  - When the **Saved** button is clicked\n    - It should change to inactive state and the respective video details will be removed from the list of saved videos\n    - **Saved** button text should be changed to **Save**\n\n- **Saved Videos Route**\n\n  - When an _authenticated_ user opens the Saved Videos Route,\n    - 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\n    - The list of saved videos should be displayed\n  - When a **Video** is clicked, then the page should be navigated to the Video Item Details Route\n  - When the **Home** link in the Sidebar is clicked, then the page should be navigated to the Home Route\n  - When the **Trending** link in the Sidebar is clicked, then the page should be navigated to the Trending Route\n  - When the **Gaming** link in the Sidebar is clicked, then the page should be navigated to the Gaming Route\n\n- **Not Found Route**\n\n  - When a random path is provided as the URL path, then the page should be navigated to the Not Found Route\n\n- **Header**\n\n  - When the Website logo is clicked, then the page should be navigated to the Home Route\n  - When the theme icon button is clicked, then the theme should be changed accordingly\n  - 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\n    - When the **Cancel** button is clicked, then the popup should be closed and the page should not be navigated\n    - When the **Confirm** button is clicked, then the page should be navigated to the Login Route\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAPI Requests \u0026 Responses\u003c/summary\u003e\n\u003cbr/\u003e\n\n**Login API**\n\n#### URL: `https://apis.ccbp.in/login`\n\n#### Method: `POST`\n\n#### Description:\n\nReturns a response based on the credentials provided\n\n#### Request\n\n```json\n{\n  \"username\": \"rahul\",\n  \"password\": \"rahul@2021\"\n}\n```\n\n#### Sample Success Response\n\n```json\n{\n  \"jwt_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9.nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y\"\n}\n```\n\n#### Sample Failure Response\n\n```json\n{\n  \"status_code\": 404,\n  \"error_msg\": \"Username is not found\"\n}\n```\n\n**Home Videos API**\n\n#### URL: `https://apis.ccbp.in/videos/all?search=`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the list of all videos\n\n#### Response\n\n```json\n{\n  \"total\": 60,\n  \"videos\": [\n    {\n      \"id\": \"30b642bd-7591-49f4-ac30-5c538f975b15\",\n      \"title\": \"Sehwag shares his batting experience in iB Cricket | iB Cricket Super Over League\",\n      \"thumbnail_url\": \"https://assets.ccbp.in/frontend/react-js/nxt-watch/ibc-sol-1-img.png\",\n      \"channel\": {\n        \"name\": \"iB Cricket\",\n        \"profile_image_url\": \"https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-cricket-img.png\"\n      },\n      \"view_count\": \"1.4K\",\n      \"published_at\": \"Apr 19, 2019\"\n    },\n    ...\n  ],\n}\n```\n\n**Trending Videos API**\n\n#### URL: `https://apis.ccbp.in/videos/trending`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the list of trending videos\n\n#### Response\n\n```json\n{\n  \"total\": 30,\n  \"videos\": [\n    {\n      \"id\": \"ad9822d2-5763-41d9-adaf-baf9da3fd490\",\n      \"title\": \"iB Hubs Announcement Event\",\n      \"thumbnail_url\": \"https://assets.ccbp.in/frontend/react-js/nxt-watch/ibhubs-img.png\",\n      \"channel\": {\n        \"name\": \"iB Hubs\",\n        \"profile_image_url\": \"https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-hubs-img.png\"\n      },\n      \"view_count\": \"26K\",\n      \"published_at\": \"Nov 29, 2016\"\n    },\n    ...\n  ]\n}\n```\n\n**Gaming Videos API**\n\n#### URL: `https://apis.ccbp.in/videos/gaming`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the list of gaming videos\n\n#### Response\n\n```json\n{\n  \"total\": 30,\n  \"videos\": [\n    {\n      \"id\": \"b214dc8a-b126-4d15-8523-d37404318347\",\n      \"title\": \"Drop Stack Ball\",\n      \"thumbnail_url\": \"https://assets.ccbp.in/frontend/react-js/nxt-watch/drop-stack-ball-img.png\",\n      \"view_count\": \"44K\"\n    },\n    ...\n  ]\n}\n```\n\n**Video Details API**\n\n#### URL: `https://apis.ccbp.in/videos/:id`\n\n#### Example: `https://apis.ccbp.in/videos/802fcd20-1490-43c5-9e66-ce6dfefb40d1`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the details of a specific video\n\n#### Response\n\n```json\n{\n  \"video_details\": {\n    \"id\": \"ad9822d2-5763-41d9-adaf-baf9da3fd490\",\n    \"title\": \"iB Hubs Announcement Event\",\n    \"video_url\": \"https://www.youtube.com/watch?v=pT2ojWWjum8\",\n    \"thumbnail_url\": \"https://assets.ccbp.in/frontend/react-js/nxt-watch/ibhubs-img.png\",\n    \"channel\": {\n      \"name\": \"iB Hubs\",\n      \"profile_image_url\": \"https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-hubs-img.png\",\n      \"subscriber_count\": \"1M\"\n    },\n    \"view_count\": \"26K\",\n    \"published_at\": \"Nov 29, 2016\",\n    \"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.\"\n  }\n}\n```\n\n\u003c/details\u003e\n\n### Quick Tips\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\u003cbr\u003e\n\n- To build this project, take a look at the \u003ca href='https://learning.ccbp.in/frontend-development/course?c_id=2f4192f7-7495-49ca-a6ce-6b74005e25f1\u0026s_id=b01fca1c-aa5c-4d79-b81e-0220e7649bd0\u0026t_id=416f0cab-8425-413b-9157-c7b4d4ae4467' target=\"_blank\"\u003eReact Popup\u003c/a\u003e and \u003ca href='https://learning.ccbp.in/frontend-development/course?c_id=2f4192f7-7495-49ca-a6ce-6b74005e25f1\u0026s_id=b6392b63-25f6-4215-be09-9f23ad91d789\u0026t_id=416f0cab-8425-413b-9157-c7b4d4ae4467' target=\"_blank\"\u003eReact Video Player\u003c/a\u003e reading materials\n\n- To style popup content use `.popup-content` class\n\n```jsx\n\u003cPopup\n  modal\n  trigger={\n    //write code here\n  }\n  className=\"popup-content\"\n\u003e\n  //write code here\n\u003c/Popup\u003e\n```\n\n- Use `formatDistanceToNow` function to find the difference between the given date and now in words\n\n```jsx\nimport {formatDistanceToNow} from 'date-fns'\nconsole.log(formatDistanceToNow(new Date(2021, 8, 20)))\n// Return the distance between the given date and now in words.\n```\n\n\u003c/details\u003e\n\n### Important Note\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n\u003cbr/\u003e\n\n**The following instructions are required for the tests to pass**\n\n- Render `Home` Route component when the path in URL matches `/`\n- Render `Login` Route component when the path in URL matches `/login`\n- Render `Trending` Route component when the path in URL matches `/trending`\n- Render `Gaming` Route component when the path in URL matches `/gaming`\n- Render `Saved Videos` Route component when the path in URL matches `/saved-videos`\n- Render `Video Item Details` Route component when the path in URL matches `/videos/:id`\n- Render `Not Found` Route component when the path in URL matches `/not-found`\n- No need to use the `BrowserRouter` in `App.js` as we have already included in `index.js`\n- User credentials\n\n  ```text\n   username: rahul\n   password: rahul@2021\n\n  ```\n\n- Wrap the `Loader` component with an HTML container element and add the `data-testid` attribute value as **loader** to it\n\n  ```jsx\n  \u003cdiv className=\"loader-container\" data-testid=\"loader\"\u003e\n    \u003cLoader type=\"ThreeDots\" color=\"#ffffff\" height=\"50\" width=\"50\" /\u003e\n  \u003c/div\u003e\n  ```\n\n- The HTML button element with search icon in Home Route should have the `data-testid` attribute value as **searchButton** to it\n\n- **Styled Components** should be used for styling purposes\n- The theme icon button should have the `data-testid` as **theme**\n- The video thumbnail images in the Routes should have the alt as **video thumbnail**\n- The channel logos in Home Route should have the alt as **channel logo**\n\n- **Home Route**\n\n  - The Route should consist of an HTML container element with `data-testid` as **home**\n  - The Route should consist of a banner and it contains a close button with `data-testid` as **close**\n  - The Route should consist of a banner as shown in the design files with `data-testid` as **banner**\n  - 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\n  - The HTML container element with `data-testid` as **home** should have the background color,\n    - If the Light theme is applied, then the **#f9f9f9** color should be applied as a background color\n    - If the Dark theme is applied, then the **#181818** color should be applied as a background color\n\n- **Trending Route**\n\n  - The Route should consist of an HTML container element with `data-testid` as **trending**\n  - The HTML container element with `data-testid` as **trending** should persist the background color,\n    - If the Light theme is applied, then the **#f9f9f9** color should be applied as a background color\n    - If the Dark theme is applied, then the **#0f0f0f** color should be applied as a background color\n\n- **Gaming Route**\n\n  - The Route should consist of an HTML container element with `data-testid` as **gaming**\n  - The HTML container element with `data-testid` as **gaming** should persist the background color,\n    - If the Light theme is applied, then the **#f9f9f9** color should be applied as a background color\n    - If the Dark theme is applied, then the **#0f0f0f** color should be applied as a background color\n\n- **Saved Videos Route**\n\n  - The Route should consist of an HTML container element with `data-testid` as **savedVideos**\n  - The HTML container element with `data-testid` as **savedVideos** should persist the background color,\n    - If the Light theme is applied, then the **#f9f9f9** color should be applied as a background color\n    - If the Dark theme is applied, then the **#0f0f0f** color should be applied as a background color\n\n- **Video Item Details Route**\n\n  - The **Video Item Details** Route should consist of an HTML container element with `data-testid` as **videoItemDetails**\n  - The HTML container element with `data-testid` as **videoItemDetails** should persist the background color,\n    - If the Light theme is applied, then the **#f9f9f9** color should be applied as a background color\n    - If the Dark theme is applied, then the **#0f0f0f** color should be applied as a background color\n\n- The **Website logos** for Light theme and Dark theme should have the alt as **website logo**\n- The **Failure** images for Light theme and Dark theme should have the alt as **failure view**\n- In the Video Item Details Route, the **#2563eb** color should be applied as `color` for any active button i.e (Like, Dislike, Save)\n- In the Video Item Details Route, the **#64748b** color should be applied as `color` for any inactive button i.e (Like, Dislike, Save)\n\n\u003c/details\u003e\n\n### Resources\n\n\u003cdetails\u003e\n\u003csummary\u003eImage URLs\u003c/summary\u003e\n\n- [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)\n- [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)\n- [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**\n- [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)\n- [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)\n- [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**\n- [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**\n- [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**\n- [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**\n- [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**\n- [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**\n- [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**\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eColors\u003c/summary\u003e\n\n\u003cbr/\u003e\n\n\u003cdiv style=\"background-color: #0f0f0f; width: 150px; padding: 10px; color: white\"\u003eHex: #0f0f0f\u003c/div\u003e\n\u003cdiv style=\"background-color: #f9f9f9; width: 150px; padding: 10px; color: black\"\u003eHex: #f9f9f9\u003c/div\u003e\n\u003cdiv style=\"background-color: #f8fafc; width: 150px; padding: 10px; color: black\"\u003eHex: #f8fafc\u003c/div\u003e\n\u003cdiv style=\"background-color: #1e293b; width: 150px; padding: 10px; color: white\"\u003eHex: #1e293b\u003c/div\u003e\n\u003cdiv style=\"background-color: #f1f5f9; width: 150px; padding: 10px; color: black\"\u003eHex: #f1f5f9\u003c/div\u003e\n\u003cdiv style=\"background-color: #475569; width: 150px; padding: 10px; color: white\"\u003eHex: #475569\u003c/div\u003e\n\u003cdiv style=\"background-color: #f1f1f1; width: 150px; padding: 10px; color: black\"\u003eHex: #f1f1f1\u003c/div\u003e\n\u003cdiv style=\"background-color: #181818; width: 150px; padding: 10px; color: white\"\u003eHex: #181818\u003c/div\u003e\n\u003cdiv style=\"background-color: #e2e8f0; width: 150px; padding: 10px; color: black\"\u003eHex: #e2e8f0\u003c/div\u003e\n\u003cdiv style=\"background-color: #94a3b8; width: 150px; padding: 10px; color: black\"\u003eHex: #94a3b8\u003c/div\u003e\n\u003cdiv style=\"background-color: #4f46e5; width: 150px; padding: 10px; color: white\"\u003eHex: #4f46e5\u003c/div\u003e\n\u003cdiv style=\"background-color: #64748b; width: 150px; padding: 10px; color: white\"\u003eHex: #64748b\u003c/div\u003e\n\u003cdiv style=\"background-color: #231f20; width: 150px; padding: 10px; color: white\"\u003eHex: #231f20\u003c/div\u003e\n\u003cdiv style=\"background-color: #ffffff; width: 150px; padding: 10px; color: black\"\u003eHex: #ffffff\u003c/div\u003e\n\u003cdiv style=\"background-color: #212121; width: 150px; padding: 10px; color: white\"\u003eHex: #212121\u003c/div\u003e\n\u003cdiv style=\"background-color: #616e7c; width: 150px; padding: 10px; color: white\"\u003eHex: #616e7c\u003c/div\u003e\n\u003cdiv style=\"background-color: #3b82f6; width: 150px; padding: 10px; color: white\"\u003eHex: #3b82f6\u003c/div\u003e\n\u003cdiv style=\"background-color: #00306e; width: 150px; padding: 10px; color: white\"\u003eHex: #00306e\u003c/div\u003e\n\u003cdiv style=\"background-color: #ebebeb; width: 150px; padding: 10px; color: black\"\u003eHex: #ebebeb\u003c/div\u003e\n\u003cdiv style=\"background-color: #7e858e; width: 150px; padding: 10px; color: black\"\u003eHex: #7e858e\u003c/div\u003e\n\u003cdiv style=\"background-color: #d7dfe9; width: 150px; padding: 10px; color: black\"\u003eHex: #d7dfe9\u003c/div\u003e\n\u003cdiv style=\"background-color: #cbd5e1; width: 150px; padding: 10px; color: black\"\u003eHex: #cbd5e1\u003c/div\u003e\n\u003cdiv style=\"background-color: #000000; width: 150px; padding: 10px; color: white\"\u003eHex: #000000\u003c/div\u003e\n\u003cdiv style=\"background-color: #ff0b37; width: 150px; padding: 10px; color: white\"\u003eHex: #ff0b37\u003c/div\u003e\n\u003cdiv style=\"background-color: #ff0000; width: 150px; padding: 10px; color: white\"\u003eHex: #ff0000\u003c/div\u003e\n\u003cdiv style=\"background-color: #383838; width: 150px; padding: 10px; color: white\"\u003eHex: #383838\u003c/div\u003e\n\u003cdiv style=\"background-color: #606060; width: 150px; padding: 10px; color: white\"\u003eHex: #606060\u003c/div\u003e\n\u003cdiv style=\"background-color: #909090; width: 150px; padding: 10px; color: black\"\u003eHex: #909090\u003c/div\u003e\n\u003cdiv style=\"background-color: #cccccc; width: 150px; padding: 10px; color: black\"\u003eHex: #cccccc\u003c/div\u003e\n\u003cdiv style=\"background-color: #424242; width: 150px; padding: 10px; color: black\"\u003eHex: #424242\u003c/div\u003e\n\u003cdiv style=\"background-color: #313131; width: 150px; padding: 10px; color: black\"\u003eHex: #313131\u003c/div\u003e\n\u003cdiv style=\"background-color: #f4f4f4; width: 150px; padding: 10px; color: black\"\u003eHex: #f4f4f4\u003c/div\u003e\n\u003cdiv style=\"background-color: #424242; width: 150px; padding: 10px; color: black\"\u003eHex: #424242\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFont-families\u003c/summary\u003e\n\n- Roboto\n\n\u003c/details\u003e\n\n\u003e ### _Things to Keep in Mind_\n\u003e\n\u003e - All components you implement should go in the `src/components` directory.\n\u003e - Don't change the component folder names as those are the files being imported into the tests.\n\u003e - **Do not remove the pre-filled code**\n\u003e - Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechkumarnitish%2Fnxt-watch-a7","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechkumarnitish%2Fnxt-watch-a7","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechkumarnitish%2Fnxt-watch-a7/lists"}