RUPAK7406/react-ecommerce-app

In this assignment let's build a Nxt Trendz App with Authentication by applying the concepts we have learned till now.

Refer to image below:

Design Files

Click to view the Design Files

• Extra Small (Size < 576px), Small (Size >= 576px), and Medium (Size >= 768px) - Login
• Extra Small (Size < 576px), Small (Size >= 576px), and Medium (Size >= 768px) - Login Error
• Extra Small (Size < 576px) and Small (Size >= 576px) - Home
• 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) - Not Found

Project Set Up Instructions

Click to view the Set Up Instructions

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

Project Completion Instructions

Click to view the Functionality to be added

Add Functionality

The app must have the following functionalities

• When invalid credentials are provided in the login form and clicked on the Login button then the respective error message from the response should be displayed.
• When the username and password are provided correctly and clicked on the Login button then the page should navigate to HomeRoute.
• When an undefined path is provided in the URL then the page should navigate to the NotFoundRoute.

Click to view the Implementation Files

• Your task is to complete the implementation of

  • src/App.js
  • src/components/LoginForm/index.js
  • src/components/LoginForm/index.css
  • src/components/Home/index.js
  • src/components/Home/index.css
  • src/components/Header/index.js
  • src/components/Header/index.css

Quick Tips

Click to view Quick Tips

• The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. Click this to know more.
• The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. Use the CSS property cursor with the value pointer to indicate a link. Click this to know more.
• An outline is a line that is drawn around an element, outside the border. The outline CSS shorthand property sets all the outline properties. Use the CSS property outline with value none to hide all the outline properties. Click this to know more.

Important Note

Click to view Important Note Points

• HomeRoute should consist of "/" in URL path

• LoginRoute should consist of "/login" in URL path

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

• Request body

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

• Valid credentials

   username: rahul
   password: rahul@2021
  

• Access the error message for invalid requests with the key error_msg

Resources

Data Fetch URLs

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

Image URLs

• https://assets.ccbp.in/frontend/react-js/nxt-trendz-logo-img.png - alt text should be website logo
• https://assets.ccbp.in/frontend/react-js/nxt-trendz-login-img.png - alt text should be website login
• https://assets.ccbp.in/frontend/react-js/nxt-trendz-home-img.png - alt text should be clothes that get you noticed
• https://assets.ccbp.in/frontend/react-js/nxt-trendz-log-out-img.png - alt text should be nav logout
• https://assets.ccbp.in/frontend/react-js/nxt-trendz-home-icon.png - alt text should be nav home
• https://assets.ccbp.in/frontend/react-js/nxt-trendz-products-icon.png - alt text should be nav products
• https://assets.ccbp.in/frontend/react-js/nxt-trendz-cart-icon.png - alt text should be nav cart

Colors

Hex: #1e293b

Hex: #ffffff

Hex: #475569

Hex: #e6f6ff

Hex: #d7dfe9

Hex: #e2e8f0

Hex: #64748b

Hex: #0b69ff

Hex: #ff0b37

Hex: #0967d2

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.