Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Assignment-2 MAHMOUD BEN HASSINE #27

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions Assignment-2 MAHMOUD/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
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
16,613 changes: 16,613 additions & 0 deletions Assignment-2 MAHMOUD/package-lock.json

Large diffs are not rendered by default.

39 changes: 39 additions & 0 deletions Assignment-2 MAHMOUD/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
{
"name": "assign2",
"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",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-select": "^4.3.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts 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"
]
}
}
Binary file added Assignment-2 MAHMOUD/public/favicon.ico
Binary file not shown.
17 changes: 17 additions & 0 deletions Assignment-2 MAHMOUD/public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</body>

</html>
Binary file added Assignment-2 MAHMOUD/public/logo192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assignment-2 MAHMOUD/public/logo512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions Assignment-2 MAHMOUD/public/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
3 changes: 3 additions & 0 deletions Assignment-2 MAHMOUD/public/robots.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
44 changes: 44 additions & 0 deletions Assignment-2 MAHMOUD/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.App {
text-align: center;
display:flex;
flex-direction: row;
background-color: #FAFAFE;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
h1 ,h2 {
font-family: 'Quicksand';
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
56 changes: 56 additions & 0 deletions Assignment-2 MAHMOUD/src/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import './App.css';
import SideNav from './components/sideNav/SideNav'
import Items from './components/Items/items.js'
import Panel from './components/Panel/panel'
import { useState } from 'react'
export default function App() {
const [bucket, setBucket] = useState([
{
category: "Fruits",
items: [
{ label: "kiwi", q: 1 },
{ label: "WaterMelon", q: 1 }

]
},
{
category: "Fish",
items: [
{ label: "tuna ", q: 1 }

]
}
])
const [mainItems,setMainItems] = useState([
{ category: "Fish", elements: [{ id: 1, label: "tuna" }, { id: 2, label: "carp" }, { id: 3, label: "sardin" }] },
{ category: "Meat", elements: [{ id: 1, label: "chicken" }, { id: 2, label: "beef" }, { id: 3, label: "pork" }, { id: 4, label: "turkey" }] },
{ category: "Fruits", elements: [{ id: 1, label: "Avocado" }, { id: 2, label: "kiwi" }, { id: 3, label: "WaterMelon" }] }
])

const addToBucket=(category, newItem)=> {
let data = [...bucket];

let categoryIndex = data.findIndex((element) => element.category === 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({ label: newItem.label, q: 1 });
}
} else {
data.push({ category: category, items: [{ label: newItem.label, q: 1 }] });
}
setBucket(data);
}
const categories = mainItems.map(element => element.category)
return (
<div className="App">
<SideNav />
<Items items={mainItems} addToBucket={addToBucket} />
<Panel bucket={bucket} categories={categories} />
</div>
);
}


101 changes: 101 additions & 0 deletions Assignment-2 MAHMOUD/src/components/Items/items.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
.wrapper {
width : 900px;
margin : 30px 80px;
margin-right : 10px;
}
.categoryWrapper {
margin : 20px 0 ;
}
.categoryWrapper h1 {
text-align: left;
margin :10px 10px;
font-size: 22px;
}

.itemsWrapper {
width: 100%;
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: start;
}
.itemBtn {
background: #FFFFFF;
width: 182px;
height: fit-content;
margin: 10px 10px;

box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.05);
border-radius:12px ;
border : none;
align-items: center;
display: inline-flex;
justify-content: space-around;
cursor : pointer
}
.itemsWrapper :hover {
box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.05);

}
.itemBtn h2 {
font-size: 18px;
}
.itemBtn span {
margin-left: 10px;
margin-right: 15;
color : #C1C1C4;
width:14px;
}

/* HEADER */
.header {
display : flex;
flex-direction: row;
height : fit-content;
align-items: center;
margin-bottom:57px;
}
.header h2 {
width :450px;
text-align: start;
font-family: Quicksand;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 32px;
}
.header h2 span {
color : #F9A109;
}

.header div {
display : inline-flex;
align-items: center;
}
.search{
background: #FFFFFF;
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.04);
border-radius: 12px;
padding : 16px;
}
.search input {
border : none;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #BDBDBD;
margin-left:23px;
}

Loading