{"id":26738409,"url":"https://github.com/jayanth-kotni/nxt-watch-react.js","last_synced_at":"2026-04-11T14:35:59.703Z","repository":{"id":237901032,"uuid":"795453337","full_name":"Jayanth-Kotni/Nxt-Watch-React.Js","owner":"Jayanth-Kotni","description":"Build Nxt Watch: Light theme, login handling, authenticated routing, video listing, search, like/dislike/save actions, logout popup, API integration for seamless video management.","archived":false,"fork":false,"pushed_at":"2024-05-08T07:14:33.000Z","size":221,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T03:30:48.910Z","etag":null,"topics":["api","css","jwt-authentication","light-dark-theme","loader","modal","npm-package","reactjs","responsive","styled-components"],"latest_commit_sha":null,"homepage":"https://nxtwatchbyjay.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/Jayanth-Kotni.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":"2024-05-03T10:10:01.000Z","updated_at":"2024-05-08T07:14:37.000Z","dependencies_parsed_at":"2024-05-08T07:44:56.254Z","dependency_job_id":null,"html_url":"https://github.com/Jayanth-Kotni/Nxt-Watch-React.Js","commit_stats":null,"previous_names":["jayanth-kotni/nxt-watch-react.js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Jayanth-Kotni/Nxt-Watch-React.Js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayanth-Kotni%2FNxt-Watch-React.Js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayanth-Kotni%2FNxt-Watch-React.Js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayanth-Kotni%2FNxt-Watch-React.Js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayanth-Kotni%2FNxt-Watch-React.Js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jayanth-Kotni","download_url":"https://codeload.github.com/Jayanth-Kotni/Nxt-Watch-React.Js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayanth-Kotni%2FNxt-Watch-React.Js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31684525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["api","css","jwt-authentication","light-dark-theme","loader","modal","npm-package","reactjs","responsive","styled-components"],"created_at":"2025-03-28T03:29:19.709Z","updated_at":"2026-04-11T14:35:59.670Z","avatar_url":"https://github.com/Jayanth-Kotni.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"In this assignment let's build an **Nxt Watch** by applying the concepts we have learned till now.\n\n### Refer to 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.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.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 - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Login - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-dark-theme-sm-output.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-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Login Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-login-failure-dark-theme-sm-output.png)\n\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.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-v0.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 - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-light-theme-xs-output.png)\n- [Extra Small (Size \u003c 576px) - Home - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-success-dark-theme-xs-output.png)\n\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\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Home - No search results - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-no-videos-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Home - No search results - Dark theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-no-videos-dark-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Home Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Home Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-failure-dark-theme-sm-output.png)\n\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.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.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.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.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.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.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 - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-light-theme-xs-output.png)\n- [Extra Small (Size \u003c 576px) - Trending - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-success-dark-theme-xs-output.png)\n\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\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Trending Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Trending Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-trending-failure-dark-theme-sm-output.png)\n\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.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.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.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.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 - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-light-theme-xs-output.png)\n- [Extra Small (Size \u003c 576px) - Gaming - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-success-dark-theme-xs-output.png)\n\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\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Gaming Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Gaming Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-gaming-failure-dark-theme-sm-output.png)\n\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.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.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.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.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) - VideoItemDetails - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-success-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - VideoItemDetails - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-success-dark-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - VideoItemDetails Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - VideoItemDetails Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-dark-theme-sm-output.png)\n\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - VideoItemDetails - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-success-light-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - VideoItemDetails - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-success-dark-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - VideoItemDetails Failure - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-light-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - VideoItemDetails Failure - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-video-item-details-failure-dark-theme-lg-output.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSavedVideos Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) - No SavedVideos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) - No SavedVideos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-dark-theme-sm-output.png)\n\n- [Small (Size \u003e= 576px) - SavedVideos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-light-theme-sm-output.png)\n- [Small (Size \u003e= 576px) - SavedVideos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-dark-theme-sm-output.png)\n\n- [Extra Small (Size \u003c 576px) - SavedVideos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-light-theme-xs-output.png)\n- [Extra Small (Size \u003c 576px) - SavedVideos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-dark-theme-xs-output.png)\n\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - No SavedVideos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-light-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - No SavedVideos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-dark-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - SavedVideos - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-light-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - SavedVideos - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-saved-videos-dark-theme-lg-output.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 Popup - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Logout Popup - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-dark-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Menu - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-menu-popup-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Menu - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-menu-popup-dark-theme-sm-output.png)\n\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Logout Popup - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-light-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Logout Popup - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-dark-theme-lg-output.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 - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-page-not-found-light-theme-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Not Found - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-page-not-found-dark-theme-sm-output.png)\n\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Not Found - Light Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-page-not-found-light-theme-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Not Found - Dark Theme](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-page-not-found-dark-theme-lg-output.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 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\n  - When a valid username and password 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 access the `HomeRoute`, `TrendingRoute`, `GamingRoute`, `SavedVideosRoute`, `VideoDetailsRoute`, then the page should be navigated to **Login** route\n  - When an _authenticated_ user, tries to access the `HomeRoute`, `TrendingRoute`, `GamingRoute`, `SavedVideosRoute`, `VideoDetailsRoute`, then the page should be navigated to the respective route\n  - When an authenticated user tries to access the `LoginRoute`, then the page should be navigated to the **Home** route\n  - When show password checkbox is checked, then the password should be shown\n  - When 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 **homeVideosApiUrl** with query parameter as `search` and its initial value as empty string\n      - **_Loader_** should be displayed while the HTTP request is fetching the data\n      - After the data is fetched successfully, display the list of videos received in the response\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.png) should be displayed\n        - When the **Retry** button is clicked, an HTTP GET request should be made to **homeVideosApiUrl**\n    - When a non-empty value is provided in the Search Input and button with search icon is clicked\n      - 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\n      - **_Loader_** should be displayed while the HTTP request is fetching the data\n      - After the data is fetched successfully, display the list of videos received in the response\n    - When the HTTP GET request made to the **homeVideosApiUrl** returns an empty list for videos then [No Videos View](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-home-no-videos-light-theme-lg-output.png) should be displayed\n  - When the **website logo** image is clicked, the page should be navigated to the **Home** route\n  - When a **Video** is clicked, the page should be navigated to the **Video Item Details** route\n  - Clicks on the **Trending** link in the Sidebar is clicked, then the page should be navigated to the **Trending** route\n  - Clicks on the **Gaming** link in the Sidebar is clicked, then the page should be navigated to the **Gaming** route\n  - Clicks on the **Saved Videos** link in the Sidebar is clicked, then the page should be navigated to the **SavedVideos** route\n\n- **Trending Route**\n\n  - When an authenticated user opens the **Trending** Route,\n    - An HTTP GET request should be made to **trendingVideosApiUrl**\n      - **_Loader_** should be displayed while the HTTP request is fetching the data\n      - After the data is fetched successfully, display the list of videos received in the response\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.png) should be displayed\n        - When the **Retry** button is clicked, an HTTP GET request should be made to **trendingVideosApiUrl**\n  - When the **website logo** image is clicked, the page should be navigated to the **Home** route\n  - When a **Video** is clicked, the page should be navigated to the **Video Item Details** route\n  - Clicks on the **Home** link in the Sidebar is clicked, then the page should be navigated to the **Home** route\n  - Clicks on the **Gaming** link in the Sidebar is clicked, then the page should be navigated to the **Gaming** route\n  - Clicks on the **Saved Videos** link in the Sidebar is clicked, then the page should be navigated to the **SavedVideos** route\n\n- **Gaming Route**\n\n  - When an authenticated user opens the **Gaming** Route,\n    - An HTTP GET request should be made to **gamingVideosApiUrl**\n      - **_Loader_** should be displayed while the HTTP request is fetching the data\n      - After the data is fetched successfully, display the list of videos received in the response\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.png) should be displayed\n        - When the **Retry** button is clicked, an HTTP GET request should be made to **gamingVideosApiUrl**\n  - When the **website logo** image is clicked, the page should be navigated to the **Home** route\n  - When a **Video** is clicked, the page should be navigated to the **Video Item Details** route\n  - Clicks on the **Home** link in the Sidebar is clicked, then the page should be navigated to the **Home** route\n  - Clicks on the **Trending** link in the Sidebar is clicked, then the page should be navigated to the **Trending** route\n  - Clicks on the **Saved Videos** link in the Sidebar is clicked, then the page should be navigated to the **SavedVideos** 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 **videoItemDetailsApiUrl** with `jwt_token` in the Cookies and `video_id` as path parameter\n      - **_loader_** should be displayed while the HTTP request is fetching the data\n      - After the HTTP request is successful, 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.png) should be displayed\n        - When the **Retry** button is clicked, an HTTP GET request should be made to **videoItemDetailsApiUrl**\n  - Corresponding video should be displayed using `react-player` package\n  - Initially, all the three buttons (Like, Dislike, Save) will be inactive\n  - When the **Like** button is clicked,\n    - It will change to an 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 will change to an 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    - The button will change to an active state and the respective video details should be added to the list of saved videos\n    - **Save** button text will be changed to **Saved**\n  - When the **Saved** button is clicked\n    - The button will change to an inactive state and the respective video details will be removed from the list of saved videos\n    - **Saved** button text will be changed to **Save**\n\n- **SavedVideos Route**\n\n  - When an authenticated user opens the **SavedVideos** Route,\n    - If the list of saved videos is empty, then [No Saved Videos Found View](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-no-saved-videos-light-theme-lg-output.png) should be displayed\n    - The **Videos** in the list of saved videos should be displayed as a list of videos\n  - When the **website logo** image is clicked, the page should be navigated to the **Home** route\n  - When a **Video** is clicked, the page should be navigated to the **Video Item Details** route\n  - Clicks on the **Home** link in the Sidebar is clicked, then the page should be navigated to the **Home** route\n  - Clicks on the **Trending** link in the Sidebar is clicked, then the page should be navigated to the **Trending** route\n  - Clicks on 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 in the URL then the page should navigate to the **Not Found** route\n\n- When the **theme** button in the header is clicked, then the theme should be changed accordingly\n\n- **Logout**\n  - When the **Logout** button in the header is clicked, then the [Logout Popup](https://assets.ccbp.in/frontend/content/react-js/nxt-watch-logout-popup-light-theme-lg-output.png) should be displayed\n    - When **Cancel** button is clicked, then the popup should be closed and the page should not be navigated\n    - When **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**loginApiUrl**\n\n#### API: `https://apis.ccbp.in/login`\n\n#### Method: `POST`\n\n#### Description:\n\nReturns a response containing the jwt_token\n\n#### Success Response\n\n```json\n{\n  \"jwt_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9. nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y\"\n}\n```\n\n#### Failure Response\n\n```json\n{\n  \"status_code\": 404,\n  \"error_msg\": \"Username is not found\"\n}\n```\n\n**homeVideosApiUrl**\n\n#### API: `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**trendingVideosApiUrl**\n\n#### API: `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**gamingVideosApiUrl**\n\n#### API: `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**videoItemDetailsApiUrl**\n\n#### API: `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 list of gaming videos\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 close\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- `Home` route should consist of `/` in the URL path\n- `Login` route should consist of `/login` in the URL path\n- `Trending` route should consist of `/trending` in the URL path\n- `Gaming` route should consist of `/gaming` in the URL path\n- `SavedVideos` route should consist of `/saved-videos` in the URL path\n- `VideoItemDetails` route should consist of `/videos/:id` in the URL path\n- No need to use the `BrowserRouter` in `App.js` as we have already included in `index.js`\n\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 in Home Route has the `data-testid` attribute value as `searchButton` to it\n\n- **Styled Components** should be used for styling purposes.\n- The theme button should have the `data-testid` as `theme`.\n- The Sidebar should consists of\n  - Facebook logo\n  - Twitter Logo\n- Each Route consists of respective banner as shown in the design files and it should have the `data-testid` as `banner`.\n- The thumbnail images in the Route should have the alt attribute value as **video thumbnail**.\n- The channel logo images in Home Route should have the alt attribute value 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 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.\n  - The Route should consist of a banner and it contains a close button element with `data-testid` as `close`.\n  - The HTML container element with `data-testid` as `home` should have the background color.\n    - If the Dark theme is applied, then the **#181818** color should be applied as a background-color.\n    - If the Light theme is applied, then the **#f9f9f9** 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 maintain the background color theme.\n    - If the Dark theme is applied, then the **#0f0f0f** color should be applied as a background-color.\n    - If the Light theme is applied, then the **#f9f9f9** 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 maintain the background color theme.\n    - If the Dark theme is applied, then the **#0f0f0f** color should be applied as a background-color.\n    - If the Light theme is applied, then the **#f9f9f9** color should be applied as a background-color.\n\n- **SavedVideos Route**\n\n  - The **SavedVideos** Route should consist of an HTML container element with `data-testid` as `savedVideos`.\n  - The HTML container element with `data-testid` as `savedVideos` should maintain the background color theme.\n    - If the Dark theme is applied, then the **#0f0f0f** color should be applied as a background-color.\n    - If the Light theme is applied, then the **#f9f9f9** color should be applied as a background-color.\n\n- **VideoItemDetails Route**\n\n  - The **VideoItemDetails** Route should consist of an HTML container element with `data-testid` as `videoItemDetails`.\n  - The HTML container element with `data-testid` as `videoItemDetails` should maintain the background color theme.\n    - If the Dark theme is applied, then the **#0f0f0f** color should be applied as a background-color.\n    - If the Light theme is applied, then the **#f9f9f9** color should be applied as a background-color.\n\n- The **Website Logo** image for Light theme and Dark theme should have the alt attribute value as `website logo`\n- The **Failure** image for Light theme and Dark theme should have the alt attribute value as `failure view`\n- The **Not found** image for Light theme and Dark theme should have the alt attribute value as `not found`\n- 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.\n- 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.\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\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\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\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\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\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\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\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)\n\n- [https://assets.ccbp.in/frontend/react-js/nxt-watch-not-found-dark-theme-img.png](https://assets.ccbp.in/frontend/react-js/nxt-watch-not-found-dark-theme-img.png)\n\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\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\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\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 **linked in 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%2Fjayanth-kotni%2Fnxt-watch-react.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjayanth-kotni%2Fnxt-watch-react.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayanth-kotni%2Fnxt-watch-react.js/lists"}