PavanPk1 / Youtube-Clone

Single Page Application (SPA) Based React Project

Project Overview

Refer to videos below:

Success View

Failure View

Set Up Instructions

Click to view

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

Quick Tips

Click to view

• To build this project, take a look at the React Popup and React Video Player reading materials

• To style popup content use .popup-content class

<Popup
  modal
  trigger={
    //write code here
  }
  className="popup-content"
>
  //write code here
</Popup>

• Use formatDistanceToNow function to find the difference between the given date and now in words.

import {formatDistanceToNow} from 'date-fns'
console.log(formatDistanceToNow(new Date(2021, 8, 20)))
// Return the distance between the given date and now in words.

Important Note

Click to view

The following instructions are required for the tests to pass

• Home route should consist of / in the URL path

• Login route should consist of /login in the URL path

• Trending route should consist of /trending in the URL path

• Gaming route should consist of /gaming in the URL path

• SavedVideos route should consist of /saved-videos in the URL path

• VideoItemDetails route should consist of /videos/:id in the URL path

• No need to use the BrowserRouter in App.js as we have already included in index.js

• User credentials

   username: rahul
   password: rahul@2021
  
  

• Wrap the Loader component with an HTML container element and add the data-testid attribute value as loader to it

  <div className="loader-container" data-testid="loader">
    <Loader type="ThreeDots" color="#ffffff" height="50" width="50" />
  </div>

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

• https://assets.ccbp.in/frontend/react-js/nxt-watch-not-found-dark-theme-img.png

• https://assets.ccbp.in/frontend/react-js/nxt-watch-banner-bg.png Banner Background image

• https://assets.ccbp.in/frontend/react-js/nxt-watch-facebook-logo-img.png 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 linked in 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