Apple Inventory Check Website

Table of contents

• Description
• How to run
• How to use the web application
• Source code structure
• Credits

Description

This React-based frontend website is a simple Apple stores inventory check system aimed at easing call center agents in addressing customer enquiries. In this app, customer call agents will be able to lookup product availability across store locations and products. A live environment for this app can be accessed at Fruity Inventory

Assumptions

• No requirements to show product units available
• No requirements to involve authentication and authorization
• Product is limited only to iPhones and iPads
• Location is limited to the United States
• This web application is only optimised in web and ipads

---

How to run:

1. Open terminal and clone this project :

   git clone https://github.com/kebearry/fruity-inventory.git

2. Change directory to this project directory in terminal :

   npm install

   This will install dependencies, including node_modules.

   Once you have done step 1 and 2, you don't have to do it again when you want to run this app.

3. Run the project :

   npm start

   This will run the app in the development mode.
   Open http://localhost:3000 to view it in the browser.

   The page will reload if you make edits.
   

4. Test the project :

   npm test This will run through the 20 test cases created for this project and highlight in the console if there is any failed test cases.

---

How to use the web application:

Features

• Default Filters with all products and your country

• Ability to filter down to specific country, city and product category

• "Save View" button will save your new filters, indicate them in tags and apply your new filter to filter the product data. The unavailable product variant will be greyed out.

• Autocomplete suggestions for search input

• Ability to search for store through search input

• Ability to navigate to next, previous and specified page number through pagination

• Ability to undo your filter(s) anytime with the delete tag feature instead of going through the filter dropdown again

• Ability to see specific product details

• Bonus feature of being able to edit your profile avatar (no screenshot needed, right?:nerd_face:

---

Code structure:

├── src                     # Source files
    ├───assets
    ├───components
    │   ├───accordion
    │   ├───checkbox
    │   ├───greetings
    │   ├───modal
    │   ├───navigation
    │   ├───search
    │   ├───table
    │   └───tagItem
    └───data

---

Credits:

https://www.apple.com/store
https://www.apple.com/retail/storelist/
Jupyter🤣
My brain, my time, my effort:sweat_smile:

---