Nxt Watch

Introduction

Keywords: React,Front-end

• Developed the frontend part of the NxtWatch an YouTube clone application.
• This application allows users to log in, search, view sort videos by category , like,dislike, save video to save list.
• Concepts such as authentication, state management, context, page navigation, media queries and flexbox concepts in the code by following the clean code guidelines.

Technical Aspects

Keywords: Authentication, Validation, Cookies

• Implemented a basic authentication flow and handled common errors such as invalid username and invalid password.
• Used cookies to persist user credentials across page reloads.
• Cross browser compatibility (Chrome, Opera, Mozilla Firefox, Microsoft Edge, Safari).

State Management and Navigation:

Keywords: State management, Navigation, Protected Route Used

• Context for state management for creating a global state to manage cart state across routes.Used React Router for navigation within the application.
• Additionally, implemented protected routes to control access based on user roles.`

API Integration:

Keywords: API Integration

• Integrated mock APIs for displaying data

Clean Code Guidelines:

Keywords: Clean code guidelines

• Followed clean code guidelines by maintaining a consistent folder structure and used meaningful naming conventions, such as prefixing event handlers with on and creating reusable components throughout the application.

Responsiveness:

Keywords: Responsiveness,

• Flexbox To ensure a responsive design, used media queries and flexbox for layouting.

Set Up Instructions

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

Design Files

Login Route

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

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

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

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

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

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

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

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

Refer to videos below:

Success View
video

Failure View
video

Home Route

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Trending Route

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

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

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

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

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

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

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

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

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

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

Gaming Route

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

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

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

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

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

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

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

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

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

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

Video Item Details Route

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

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

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

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

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

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

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

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

SavedVideos Route

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

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

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

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

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

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

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

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

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

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

Popup Design Files

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

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

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

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

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

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

Not Found Route

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

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

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

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

Functionality

• Login Route

  • When a invalid username and password are provided and the Login button is clicked, then the respective error message received from the response is displayed
  • When a valid username and password are provided and the Login button is clicked, then the page is navigated to the Home route
  • When an unauthenticated user, tries to access the HomeRoute, TrendingRoute, GamingRoute, SavedVideosRoute, VideoDetailsRoute, then the page is navigated to Login route
  • When an authenticated user, tries to access the HomeRoute, TrendingRoute, GamingRoute, SavedVideosRoute, VideoDetailsRoute, then the page is navigated to the respective route
  • When an authenticated user tries to access the LoginRoute, then the page is navigated to the Home route
  • When show password checkbox is checked, then the password is shown
  • When show password checkbox is unchecked, then the password is masked

• Home Route

  • When an authenticated user opens the Home Route,
    • An HTTP GET request is made to homeVideosApiUrl with query parameter as search and its initial value as empty string
      • Loader is displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of videos received in the response
      • If the HTTP GET request made is unsuccessful, then the Failure view is displayed
        • When the Retry button is clicked, an HTTP GET request is made to homeVideosApiUrl
    • When a non-empty value is provided in the Search Input and button with search icon is clicked
      • Make an HTTP GET request to the homeVideosApiUrl with jwt_token in the Cookies and query parameter search with value as the text provided in the Search Input
      • Loader is displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of videos received in the response
    • When the HTTP GET request made to the homeVideosApiUrl returns an empty list for videos then No Videos View is displayed
  • When the website logo image is clicked, the page is navigated to the Home route
  • When a Video is clicked, the page is navigated to the Video Item Details route
  • Clicks on the Trending link in the Sidebar is clicked, then the page is navigated to the Trending route
  • Clicks on the Gaming link in the Sidebar is clicked, then the page is navigated to the Gaming route
  • Clicks on the Saved Videos link in the Sidebar is clicked, then the page is navigated to the SavedVideos route

• Trending Route

  • When an authenticated user opens the Trending Route,
    • An HTTP GET request is made to trendingVideosApiUrl
      • Loader is displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of videos received in the response
      • If the HTTP GET request made is unsuccessful, then the Failure view is displayed
        • When the Retry button is clicked, an HTTP GET request is made to trendingVideosApiUrl
  • When the website logo image is clicked, the page is navigated to the Home route
  • When a Video is clicked, the page is navigated to the Video Item Details route
  • Clicks on the Home link in the Sidebar is clicked, then the page is navigated to the Home route
  • Clicks on the Gaming link in the Sidebar is clicked, then the page is navigated to the Gaming route
  • Clicks on the Saved Videos link in the Sidebar is clicked, then the page is navigated to the SavedVideos route

• Gaming Route

  • When an authenticated user opens the Gaming Route,
    • An HTTP GET request is made to gamingVideosApiUrl
      • Loader is displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of videos received in the response
      • If the HTTP GET request made is unsuccessful, then the Failure view is displayed
        • When the Retry button is clicked, an HTTP GET request is made to gamingVideosApiUrl
  • When the website logo image is clicked, the page is navigated to the Home route
  • When a Video is clicked, the page is navigated to the Video Item Details route
  • Clicks on the Home link in the Sidebar is clicked, then the page is navigated to the Home route
  • Clicks on the Trending link in the Sidebar is clicked, then the page is navigated to the Trending route
  • Clicks on the Saved Videos link in the Sidebar is clicked, then the page is navigated to the SavedVideos route

• Video Item Details Route

  • When an authenticated user opens the Video Item Details route

    • An HTTP GET request is made to videoItemDetailsApiUrl with jwt_token in the Cookies and video_id as path parameter
      • loader is displayed while the HTTP request is fetching the data
      • After the HTTP request is successful, the response received is displayed
      • If the HTTP GET request made is unsuccessful, then the Failure view is displayed
        • When the Retry button is clicked, an HTTP GET request is made to videoItemDetailsApiUrl

  • Corresponding video is displayed using react-player package

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

  • When the Like button is clicked,

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

  • When the Dislike button is clicked,

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

  • When the Save button is clicked

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

  • When the Saved button is clicked

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

• SavedVideos Route

  • When an authenticated user opens the SavedVideos Route,
    • If the list of saved videos is empty, then No Saved Videos Found View is displayed
    • The Videos in the list of saved videos is displayed as a list of videos
  • When the website logo image is clicked, the page is navigated to the Home route
  • When a Video is clicked, the page is navigated to the Video Item Details route
  • Clicks on the Home link in the Sidebar is clicked, then the page is navigated to the Home route
  • Clicks on the Trending link in the Sidebar is clicked, then the page is navigated to the Trending route
  • Clicks on the Gaming link in the Sidebar is clicked, then the page is navigated to the Gaming route

• Not Found Route

  • When a random path is provided in the URL then the page navigates to the Not Found route

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

• Logout

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

API Requests & Responses

• User credentials

   username: rahul
   password: rahul@2021
  
  

loginApiUrl

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

homeVideosApiUrl

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

trendingVideosApiUrl

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

gamingVideosApiUrl

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

videoItemDetailsApiUrl

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

Resources

Image URLs

• logo-light-theme

• logo-dark-theme

• profile-img

• failure-view-light-theme

• failure-view-dark-theme

• no-search-results

• no-saved-videos

• not-found-light-theme

• not-found-dark-theme

• banner-bg

• facebook-logo

• twitter-logo

• linked-in-logo

Visit

Link