Project URL : https://mynxtwatch007.ccbp.tech/login

Design Files

Login Route

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

Home Route

• Extra Small (Size < 576px) - Home
• Small (Size >= 576px) - Home - Light Theme
• Small (Size >= 576px) - Home - Dark Theme
• Extra Small (Size < 576px) and Small (Size >= 576px) - Home - No Search Results
• Extra Small (Size < 576px) and Small (Size >= 576px) - Home Failure
• 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
• Small (Size >= 576px) - Trending - Light Theme
• Small (Size >= 576px) - Trending - Dark Theme
• Extra Small (Size < 576px) and Small (Size >= 576px) - Trending Failure
• 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
• Small (Size >= 576px) - Gaming - Light Theme
• Small (Size >= 576px) - Gaming - Dark Theme
• Extra Small (Size < 576px) and Small (Size >= 576px) - Gaming Failure
• 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) - Video Item Details
• Extra Small (Size < 576px) and Small (Size >= 576px) - Video Item Details Failure
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Video Item Details - Light Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Video Item Details - Dark Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Video Item Details Failure - Light Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Video Item Details Failure - Dark Theme

Saved Videos Route

• Extra Small (Size < 576px) - No Saved Videos
• Small (Size >= 576px) - Saved Videos - Light Theme
• Small (Size >= 576px) - Saved Videos - Dark Theme
• Extra Small (Size < 576px) - Saved Videos
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Saved Videos - Light Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Saved Videos - Dark Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Saved Videos - Light Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Saved Videos - Dark Theme

Popup Design Files

• Extra Small (Size < 576px) and Small (Size >= 576px) - Logout
• Extra Small (Size < 576px) and Small (Size >= 576px) - Menu
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Logout - Light Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Logout - Dark Theme

Not Found Route

• Extra Small (Size < 576px) and Small (Size >= 576px) - Not Found
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Not Found

Set Up Instructions

Click to view

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

Completion Instructions

API Requests & Responses

Login API

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

Method: POST

Description:

Returns a response based on the credentials provided

Request

{
  "username": "rahul",
  "password": "rahul@2021"
}

Sample Success Response

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

Sample Failure Response

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

Home Videos API

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

Method: GET

Description:

Returns a response containing the list of all videos

Response

{
  "total": 60,
  "videos": [
    {
      "id": "30b642bd-7591-49f4-ac30-5c538f975b15",
      "title": "Sehwag shares his batting experience in iB Cricket | iB Cricket Super Over League",
      "thumbnail_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ibc-sol-1-img.png",
      "channel": {
        "name": "iB Cricket",
        "profile_image_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-cricket-img.png"
      },
      "view_count": "1.4K",
      "published_at": "Apr 19, 2019"
    },
    ...
  ],
}

Trending Videos API

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

Method: GET

Description:

Returns a response containing the list of trending videos

Response

{
  "total": 30,
  "videos": [
    {
      "id": "ad9822d2-5763-41d9-adaf-baf9da3fd490",
      "title": "iB Hubs Announcement Event",
      "thumbnail_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ibhubs-img.png",
      "channel": {
        "name": "iB Hubs",
        "profile_image_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-hubs-img.png"
      },
      "view_count": "26K",
      "published_at": "Nov 29, 2016"
    },
    ...
  ]
}

Gaming Videos API

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

Method: GET

Description:

Returns a response containing the list of gaming videos

Response

{
  "total": 30,
  "videos": [
    {
      "id": "b214dc8a-b126-4d15-8523-d37404318347",
      "title": "Drop Stack Ball",
      "thumbnail_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/drop-stack-ball-img.png",
      "view_count": "44K"
    },
    ...
  ]
}

Video Details API

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

Example: https://apis.ccbp.in/videos/802fcd20-1490-43c5-9e66-ce6dfefb40d1

Method: GET

Description:

Returns a response containing the details of a specific video

Response

{
  "video_details": {
    "id": "ad9822d2-5763-41d9-adaf-baf9da3fd490",
    "title": "iB Hubs Announcement Event",
    "video_url": "https://www.youtube.com/watch?v=pT2ojWWjum8",
    "thumbnail_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ibhubs-img.png",
    "channel": {
      "name": "iB Hubs",
      "profile_image_url": "https://assets.ccbp.in/frontend/react-js/nxt-watch/ib-hubs-img.png",
      "subscriber_count": "1M"
    },
    "view_count": "26K",
    "published_at": "Nov 29, 2016",
    "description": "iB Hubs grandly celebrated its Announcement Event in November 13, 2016, in the presence of many eminent personalities from the Government, Industry, and Academia with Shri Amitabh Kant, CEO, NITI Aayog as the Chief Guest."
  }
}

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/nxt-watch-logo-light-theme-img.png
• https://assets.ccbp.in/frontend/react-js/nxt-watch-logo-dark-theme-img.png
• https://assets.ccbp.in/frontend/react-js/nxt-watch-profile-img.png alt should be profile
• https://assets.ccbp.in/frontend/react-js/nxt-watch-failure-view-light-theme-img.png
• https://assets.ccbp.in/frontend/react-js/nxt-watch-failure-view-dark-theme-img.png
• https://assets.ccbp.in/frontend/react-js/nxt-watch-no-search-results-img.png alt should be no videos
• https://assets.ccbp.in/frontend/react-js/nxt-watch-no-saved-videos-img.png alt should be no saved videos
• https://assets.ccbp.in/frontend/react-js/nxt-watch-not-found-light-theme-img.png alt as not found
• https://assets.ccbp.in/frontend/react-js/nxt-watch-banner-bg.png banner background image
• https://assets.ccbp.in/frontend/react-js/nxt-watch-facebook-logo-img.png alt should be facebook logo
• https://assets.ccbp.in/frontend/react-js/nxt-watch-twitter-logo-img.png alt should be twitter logo
• https://assets.ccbp.in/frontend/react-js/nxt-watch-linked-in-logo-img.png alt should be linkedin logo

Colors

Hex: #0f0f0f

Hex: #f9f9f9

Hex: #f8fafc

Hex: #1e293b

Hex: #f1f5f9

Hex: #475569

Hex: #f1f1f1

Hex: #181818

Hex: #e2e8f0

Hex: #94a3b8

Hex: #4f46e5

Hex: #64748b

Hex: #231f20

Hex: #ffffff

Hex: #212121

Hex: #616e7c

Hex: #3b82f6

Hex: #00306e

Hex: #ebebeb

Hex: #7e858e

Hex: #d7dfe9

Hex: #cbd5e1

Hex: #000000

Hex: #ff0b37

Hex: #ff0000

Hex: #383838

Hex: #606060

Hex: #909090

Hex: #cccccc

Hex: #424242

Hex: #313131

Hex: #f4f4f4

Hex: #424242

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the src/components directory.