Skip to content

Latest commit

 

History

History
122 lines (95 loc) · 6.9 KB

README.md

File metadata and controls

122 lines (95 loc) · 6.9 KB
Raw

The goal of this enhancement project is to understand the existing Restaurant code, and add the given functionalities within the existing Restaurant code.

Your existing Restaurant app, which you have developed, allows users to view a list of dish items in different tabs of menu items. Users can also increase or decrease the quantity of a particular dish item.

Enhancement Functionality

Functionality to be added

  • Keep the existing code in Home Route and add a Login Route and a Cart Route to the application.

  • Login Route Functionality

    • When a valid username and password are provided and the Login button is clicked, navigate the user to the Home route. Else, display the error message. Use js-cookie to maintain Cookies for authentication.
    • If an authenticated user attempts to access either the Home Route or Cart Route, they should be redirected to the corresponding route. Else, should be redirected to the Login Route.

  • Home Route Functionality

    • When the Cart icon button in the header is clicked, then the page should be navigated to the Cart route.
    • When the restaurant name in the header is clicked, then the page should be navigated to the Home route.
    • Add a Logout button in the header of the Home Route and add corresponding functionality.
    • Add a feature to add items to the cart with a click of a button. The ADD TO CART button should be displayed only if the dish items are available and the dish quantity is greater than 0.
      • When the ADD TO CART button of a particular dish item is clicked, that dish item should be added to the Cart Route and the count should be increased by one at the cart icon.
      • When the user clicks the ADD TO CART button multiple times, the count should not increase at the cart icon as it is the same item and count in the Cart Route should be increased for that particular dish.

  • Cart Route Functionality

    • The Cart Route should have a header similar to the Home Route.
    • Add a Remove All button in the Cart Route. Implement this by adding a button.
      • When a user clicks on the Remove All button, all the cart items should be removed from the cart and an Empty Cart Image should be displayed.
    • Each cart item on the cart page should include the dish name, dish image, dish price, plus (+) button, minus (-) button, quantity of the dish item, and a remove button.
    • In each cart item in the cart
      • When the plus button is clicked, then the quantity of the dish should be increased and when minus button is clicked, then the quantity of the dish should be decresed.
      • When the quantity of a dish reaches zero, the dish item should be removed from the cart.
      • Based on the quantity of the dish, the dish price should be updated accordingly.
      • When a user clicks on the remove button, the cart item should be removed from the cart list.

  • You need to use React Context to maintain that sync between the Home Route and Cart Route. Use the context as given below for the test cases to pass.

    • The CartContext has an object 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 dish in the cartList
      • decrementCartItemQuantity- this method decreases the quantity of a dish in the cartList

  • Make sure your application maintains a good CSS styling.

Generally, in the interviews, the interviewer will not specify you to use context to solve the question. You need to decide based on the use case.

API Details

Login API
  • Use this API for authentication 
    {
  "username": "rahul",
  "password": "rahul@2021"
}
    Success Response: 
    {
  "jwt_token": "token_string"
}
    Failure Response: 
    {
  "status_code": 404,
  "error_msg": "Username is not found"
}

Setup Instructions

Follow these steps before starting to code for this project. (**Important**)
  • After setting up this project delete the README.md file in the CCBP IDE.
  • Clone the existing Restaurant code from your GitHub account to add new functionalities to it. 
git clone {git repository URL} /home/workspace/reactjs/coding-practices/enhancementOfRestaurantApp
In the above command, replace this `{git repository URL}` with your actual Git URL.
  • Download dependencies by running npm install
  • Start up the app using npm start
  • You must clone the existing Restaurant App repo, as test cases are added for both the existing Restaurant app and the new functionality.
  • These projects are introduced to help you prepare well for similar questions asked during interviews.

Submission Form:

Click the below button and submit your git URL and published URL of the current coding assignment
SUBMIT
**Follow the clean code guidelines**