rocketacademy · Mannushka · Nov 4, 2023 · Nov 5, 2023 · Nov 5, 2023 · Nov 5, 2023
diff --git a/README.md b/README.md
@@ -2,7 +2,42 @@
 
 https://bc.rocketacademy.co/1-frontend/1.p-frontend-app
 
-## Available Scripts
+# My shopping list app
+
+This is a shopping list app that allows users to create, edit and delete a shopping list.
+In this app, users can:
+
+1. add new items to the list
+2. edit an exsisting item on the list in case there is typo
+3. cross out the item that has been purchased
+4. delete an item from the list
+5. clear the entire list, i.e. delete all items, in one click
+
+## How to use the app:
+
+1. Adding items: type the name of your item into the input field and click "Add item" button.
+2. Editing items: click the item you wish to edit and type in the new name.
+3. Cross items out: tick the checkbox next to the item.
+4. Deleting items: click the trashbin icon next to the item.
+5. Removing all items: click "Clear all" button.
+
+All items are stored in the local storage, so when users refresh the page, they are still able to see the items they added/eddited previously.
+However, upon clicking "Clear all" button, all items get erased from local storage. After the button has been clicked, if the user refreshes the page, the list will be empty.
+
+## Requirements
+
+To install and launch the app, you will need NodeJS v16+
+
+## Dependencies:
+
+1. React
+2. React-DOM
+3. React-bootstrap
+4. Bootstrap
+5. React-icons
+6. React-scripts
+
+## Installation
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). In the project directory, you can run:
 

diff --git a/all-items-erased.png b/all-items-erased.png
diff --git a/crossing-item-out.png b/crossing-item-out.png
diff --git a/deleting-item.png b/deleting-item.png
diff --git a/editing-item-typo-fixed.png b/editing-item-typo-fixed.png
diff --git a/editing-item.png b/editing-item.png
diff --git a/entering-item-name-into-input.png b/entering-item-name-into-input.png
diff --git a/erasing-all-items.png b/erasing-all-items.png
diff --git a/initial-screen.png b/initial-screen.png
diff --git a/item-added-and-displayed.png b/item-added-and-displayed.png
diff --git a/item-deleted.png b/item-deleted.png