Skip to content

Latest commit

 

History

History
188 lines (126 loc) · 6.57 KB

README.md

File metadata and controls

188 lines (126 loc) · 6.57 KB
Raw

Nxt Trendz ( ECommerce Clone - Amazon, Flipkart)

Implemented Nxt Trendz application which is a clone for ECommerce applications like Amazon, Flipkart where users can login and can see list of products with search, filters, sort by, etc..

  • Implemented Different pages and routes for Login, Products, Product details using React Router components Route, Switch, Link, props, state, lists, event handlers, form inputs.
  • Authenticating and authorizing users by taking username, password and doing login POST HTTP API Call and implementing filters by sending them as query parameters to product api calls.
  • Persisted user login state by keeping jwt token in local storage, Sending it in headers of further api calls to authorize the user.

Technologies used: React JS, JS, CSS, Bootstrap, Routing, REST API Calls, Local Storage, JWT Token, Authorization, Authentication

Login Credentials

User Name : rahul

Password : rahul@2021

Refer to the video below:



Design Files

Click to view

Set Up Instructions

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

Completion Instructions

Functionality to be added

The app must have the following functionalities

  • When an unauthenticated user tries to access the Cart Route, then the page should be navigated to Login Route

  • Following are the features to be implemented

    • Feature 1

      • When an authenticated user tries to add the same product multiple times
        • The quantity of the product should be updated accordingly, and the count of the cart items in the header should be remained same

    • Feature 2

      • The total amount and number of items in the cart should be displayed in the Cart Route

    • Feature 3

      • In each cart item in the cart
        • When the plus icon is clicked, then the quantity of the product should be incremented by one
        • When the minus icon is clicked, then the quantity of the product should be decremented by one
        • When the quantity of the product is one and the minus icon is clicked, then the respective product should be removed from the cart
        • Based on the quantity of the product, the product price and the Cart Summary, i.e the total cost should be updated accordingly

    • Feature 4

      • When an authenticated user clicks on the remove button, cart item should be removed from the cart list

    • Feature 5

      • When an authenticated user clicks on the Remove All button, all the cart items should be removed from the cart and Empty Cart View should be displayed

  • The CartContext has an object as a value with the following properties

    • cartList - this key stores the cart items
    • removeAllCartItems - this method is used to remove all the cart items in the cartList
    • addCartItem - this method adds the cart item to the cartList
    • removeCartItem - this method removes the cart item from the cartList
    • incrementCartItemQuantity - this method increases the quantity of a product in the cartList
    • decrementCartItemQuantity - this method decreases the quantity of a product in the cartList
Components Structure
component structure breakdown

Implementation Files

Use these files to complete the implementation:

  • src/App.js
  • src/components/Cart/index.js
  • src/components/Cart/index.css
  • src/components/CartItem/index.js
  • src/components/CartItem/index.css
  • src/components/CartSummary/index.js
  • src/components/CartSummary/index.css

Quick Tips

Click to view

  • The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text

    line-height: 1.5;

    line height

  • The array method find() returns the first item's value that satisfies the provided testing function. If no item is found, it returns undefined

    Syntax: arr.find(Testing Function)

Important Note

Click to view

The following instructions are required for the tests to pass

  • BsPlusSquare, BsDashSquare icons from react-icons should be used for plus and minus buttons in cart item

  • The Cart Item should consist of two HTML button elements with data-testid attribute values as plus and minus respectively

  • AiFillCloseCircle icon from react-icons should be used for remove button in cartItem

  • The Cart Item should consist of an HTML button element with data-testid attribute values as remove

  • The product image in Cart Item Route should have the alt as title of the product

  • Prime User credentials

     username: rahul
 password: rahul@2021

  • Non-Prime User credentials

     username: raja
 password: raja@2021

Resources

Colors
Hex: #0b69ff
Hex: #171f46
Hex: #616e7c
Hex: #ffffff
Font-families
  • Roboto