diff --git a/README.md b/README.md
index c9c919208..5b8abaade 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1 @@
-Assignment #2 & #3
-
-Assignment: Create my Shoppingify app. Use any front-end libraries of your choice. Link it to your API that was done on assignment #1. Fulfill user stories below:
-
- User story 1: When I select the items tab, I can see a list of items under different categories.
- User story 2: I can add a new item with name, category, note, and image.
- User story 3: When I add a new item, I can select one from the existing categories or add a new one if the category does not exist
- User story 4: When I select an item, I can see its details and I can choose to add the current list or delete the item.
- User story 5: I can add items to the current list
- User story 6 (optional): I can increase the number of item in the list
- User story 7: I can remove the item from the list
- User story 8: I can save/update the list with a name (user can have only one active list at a time)
- User story 9: I can toggle between editing state and completing state
- User story 10: When I am at completing state, I can save my progress by selecting the item
- User story 11: I can cancel the active list
- User story 12: When I try to cancel a list, I can see a confirmation notification
- User story 13: I can see my shopping history and I can see the details of it
- User story 14 (optional): I can see some statistics: top items, top categories, and monthly comparison. (Tips: use libraries like recharts for the graph)
- User story (optional): I can search for items
-
-Here is the link to the Figma Design that you need to implement. Also here is the list of steps that you need to follow to achieve this assignment:
-
- Step 1: Fork and Clone the repository on Github
- Step 2: Copy resources, README.md to your repository
- Step 3: Login to Figma to checkout font, color, spacing,..
- Step 4: Complete all required user stories
- Step 5: Update README.md
- Step 6: Deploy your app and submit your solution
+Assignment-2
diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 000000000..12b6f6272
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,23 @@
+
diff --git a/assets/source.svg b/assets/source.svg
new file mode 100644
index 000000000..cd71187f2
--- /dev/null
+++ b/assets/source.svg
@@ -0,0 +1,6 @@
+
diff --git a/assets/undraw_shopping_app_flsj 1.svg b/assets/undraw_shopping_app_flsj 1.svg
new file mode 100644
index 000000000..939a31080
--- /dev/null
+++ b/assets/undraw_shopping_app_flsj 1.svg
@@ -0,0 +1,78 @@
+
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..a32652e5b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,49 @@
+{
+ "name": "Assignment-2",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "@testing-library/jest-dom": "^5.13.0",
+ "@testing-library/react": "^11.2.7",
+ "@testing-library/user-event": "^12.8.3",
+ "axios": "^0.21.1",
+ "dotenv": "^10.0.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "react-dotenv": "^0.1.3",
+ "react-scripts": "4.0.3",
+ "react-select": "^4.3.1",
+ "react-spinners": "^0.11.0",
+ "web-vitals": "^1.1.2"
+ },
+ "scripts": {
+ "start": "react-dotenv && react-scripts start",
+ "build": "react-dotenv &&react-scripts build",
+ "serve": "react-dotenv && serve build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "react-dotenv": {
+ "whitelist": [
+ "BASE_URL"
+ ]
+ }
+}
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 000000000..20c9eea18
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,7 @@
+ grid-column-gap: 10px;
+}
+.main{
+ background-color: aqua;
+ background-color:#fafafa;
+ grid-area: "main";
+}
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 000000000..9cef750e1
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,60 @@
+import './App.css';
+import ItemsList from './components/ItemsList/ItemsList'
+import SideNav from './components/SideNav/SideNav'
+import RightPanel from './components/RightPanel/RightPanel'
+import { useState, useEffect } from 'react'
+import axios from 'axios';
+
+function App() {
+ let [emptyBasket, setEmptyBasket] = useState(true);
+ let [basketList, setBasketList] = useState([])
+ let [mainItems, setMainItems] = useState([
+ { category: "No Elements", elements: [{ id: 1, label: "" }, { id: 2, label: "" }, { id: 3, label: "" }] },
+ ])
+ let [mainPanel, setMainPanel] = useState('ITEMS_LIST');
+ useEffect(async () => {
+ const result = await axios.get(
+ 'http://localhost:1234/Items'
+ , {
+ headers: {
+ 'Authorization': "bearerToken eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNjE5ODg1MjU2fQ.LxUB938hxe-m5IXZsTsjiUAa9g1oiLJ6mfryPkRbid8"
+ }
+ }).then(res => {
+ setMainItems(res.data);
+ });
+
+ }, [])
+
+ function addToBucket(newItem) {
+ setEmptyBasket(false);
+ let data = [...basketList];
+ let categoryIndex = data.findIndex((element) => element.Category === newItem.Category);
+ if (categoryIndex != -1) {
+ let itemIndex = data[categoryIndex].Items.findIndex((item) => Item.label === newItem.label);
+ if (itemIndex != -1) {
+ data[categoryIndex].Items[itemIndex].q++;
+ } else {
+ data[categoryIndex].Items.push({ ...newItem, q: 1 });
+ }
+ } else {
+ data.push({ Category: newItem.Category, Items: [{ ...newItem, q: 1 }] });
+ }
+ console.log(data);
+ setBasketList(data);
+ }
+ let categories = mainItems.map(element => element.Category)
+ function toggleMainPage(panel) {
+ setMainPannel(panel);
+ }
+ return (
+