Build React Nxt Trendz App With Protected Route

• Extra Small (Size < 576px), Small (Size >= 576px), and Medium (Size >= 768px) – Login, Login Error, Home
• Extra Small (Size < 576px), Small (Size >= 576px), and Medium (Size >= 768px) – Products, Cart
• Large (Size >= 992px) and Extra Large (Size >= 1200px) – Login
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Home
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Products
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Cart

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

The app must have the following functionalities

• When an unauthenticated user tries to access the Home Route, Products Route or Cart Route, then the page should be navigated to the Login Route using the protected route
• When an authenticated user tries to access the Home Route, Products Route or Cart Route, then the page should be navigated to the respective route using the protected route

loginApiUrl

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

Method: POST

Description:

Returns a response based on the credentials provided

Sample Success Response

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

Sample Failure Response

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

Use these files to complete the implementation:

• src/App.js
• src/components/ProtectedRoute/index.js

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

• Products route should consist of /products in the URL path

• Cart route should consist of /cart 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
  

• Roboto