Success View
Failure View
Click to view
- Download dependencies by running
npm install
- Start up the app using
npm start
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.
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
inApp.js
as we have already included inindex.js
-
User credentials
username: rahul password: rahul@2021
-
Wrap the
Loader
component with an HTML container element and add thedata-testid
attribute value asloader
to it<div className="loader-container" data-testid="loader"> <Loader type="ThreeDots" color="#ffffff" height="50" width="50" /> </div>
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
Font-families
- Roboto