Skip to content

Commit 0d61b91

Browse files
Apoorve8055Apoorve8055
committed
Amazon-clone-ready
1 parent 7c0d3e0 commit 0d61b91

File tree

16 files changed

+21112
-54
lines changed

16 files changed

+21112
-54
lines changed

‎.firebaserc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"projects": {
3+
"default": "e-clone-7026f"
4+
}
5+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
/node_modules
55
/.pnp
66
.pnp.js
7+
.firebase
78

89
# testing
910
/coverage

‎firebase.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"hosting": {
3+
"public": "build",
4+
"ignore": [
5+
"firebase.json",
6+
"**/.*",
7+
"**/node_modules/**"
8+
]
9+
}
10+
}

‎package-lock.json

+20,239
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+8
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,20 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.11.3",
7+
"@material-ui/icons": "^4.11.2",
68
"@testing-library/jest-dom": "^5.11.4",
79
"@testing-library/react": "^11.1.0",
810
"@testing-library/user-event": "^12.1.10",
11+
"firebase": "^8.3.1",
12+
"firebase-tools": "^9.8.0",
13+
"material-ui-flags": "^1.2.4",
914
"react": "^17.0.2",
1015
"react-dom": "^17.0.2",
16+
"react-number-format": "^4.5.3",
17+
"react-router-dom": "^5.2.0",
1118
"react-scripts": "4.0.3",
19+
"styled-components": "^5.2.1",
1220
"web-vitals": "^1.0.1"
1321
},
1422
"scripts": {

‎src/App.css

+2-37
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,3 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
1+
* {
2+
margin: 0%;
383
}

‎src/App.js

+61-17
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,69 @@
11
import logo from './logo.svg';
22
import './App.css';
3+
import Header from './Components/HeaderComponent/Header'
4+
import Home from './Pages/Home/Home';
5+
import {
6+
BrowserRouter as Router,
7+
Switch,
8+
Route
9+
} from "react-router-dom"
10+
import styled from 'styled-components';
11+
import { auth, db } from './Firebase/firebase';
12+
import { useEffect, useState } from 'react';
13+
import Login from './Pages/Login/Login';
14+
import Cart from './Pages/Cart/Cart';
15+
316

417
function App() {
18+
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')));
19+
const [cartItems, setCartItems] = useState([]);
20+
21+
const getCartItems = () => {
22+
db.collection('cartItems').onSnapshot((snapshot)=>{
23+
let tempItems =[];
24+
25+
tempItems = snapshot.docs.map(doc=>({
26+
id:doc.id,
27+
product:doc.data()
28+
}));
29+
30+
31+
setCartItems(tempItems);
32+
})
33+
};
34+
35+
const signOut = () =>{
36+
37+
auth.signOut().then(()=>{
38+
localStorage.removeItem('user');
39+
setUser(null);
40+
})
41+
};
42+
43+
useEffect(() => {
44+
getCartItems();
45+
}, []);
546
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
22-
);
47+
<Router>
48+
49+
{
50+
!user?(<Login setUser={setUser}/>):(
51+
52+
<Container>
53+
<Header product={cartItems} user={user} signOut={signOut} />
54+
<Switch>
55+
<Route path="/cart"> <Cart product={cartItems}/> </Route>
56+
<Route path="/"> <Home/> </Route>
57+
</Switch>
58+
</Container>
59+
)
60+
}
61+
62+
</Router>);
2363
}
2464

2565
export default App;
66+
67+
const Container = styled.div`
68+
background-color: #EAEDED;
69+
`;

‎src/Components/CartComponent/CartItem.js

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React from 'react'
2+
import styled from 'styled-components';
3+
import { db } from '../../Firebase/firebase';
4+
5+
6+
function CartItem({id,name,price,product_img,quantity,in_stock}) {
7+
8+
let options = [];
9+
10+
for (let i = 1; i< Math.max(quantity+1,10); i++) {
11+
options.push(<option value={i}>Quantity: {i}</option> )
12+
}
13+
14+
const changeQuantity = (selectQuantity) =>{
15+
db.collection('cartItems').doc(id).update({
16+
quantity:parseInt(selectQuantity)
17+
})
18+
};
19+
20+
const DeleteCartItem = (e) => {
21+
e.preventDefault();
22+
db.collection('cartItems').doc(id).delete()
23+
};
24+
return (
25+
<Container>
26+
<ImageConatiner>
27+
<img src={product_img}/>
28+
</ImageConatiner>
29+
30+
<CartItemInfo>
31+
<CartItemInfoTop>
32+
<h2>{name}</h2>
33+
</CartItemInfoTop>
34+
35+
<InStock>
36+
{in_stock == true ? (<InOfStock>In Stock</InOfStock>) : (<OutOfStock>Out of Stock</OutOfStock>) }
37+
</InStock>
38+
39+
<CartItemInfoBottom>
40+
<CartItemQuantityContainer>
41+
<select
42+
value={quantity}
43+
onChange={(e)=>changeQuantity(e.target.value)}
44+
>
45+
{options}
46+
</select>
47+
48+
49+
</CartItemQuantityContainer>
50+
<CartItemDeleteContainer
51+
onClick={(e)=>DeleteCartItem(e)}
52+
>
53+
Delete
54+
</CartItemDeleteContainer>
55+
</CartItemInfoBottom>
56+
</CartItemInfo>
57+
58+
<CartItemPrice>
59+
₹{price}
60+
</CartItemPrice>
61+
</Container>
62+
)
63+
}
64+
65+
export default CartItem
66+
67+
const Container = styled.div`
68+
display:flex;
69+
padding-top:12px;
70+
padding-bottom:12px;
71+
border-bottom:1px solid #DDD;
72+
73+
`;
74+
75+
const ImageConatiner = styled.div`
76+
width:180px;
77+
height:180px;
78+
flex-shrink:0;
79+
flex-grow:0;
80+
img{
81+
object-fit:contain;
82+
width:100%;
83+
height:100%;
84+
}
85+
`;
86+
const CartItemInfo = styled.div`
87+
padding-left:12px;
88+
flex-grow:1;
89+
`;
90+
const CartItemInfoTop = styled.div`
91+
color:#007185;
92+
93+
94+
h2{
95+
font-size:18px;
96+
}
97+
`;
98+
const CartItemInfoBottom = styled.div`
99+
margin-top:4px;
100+
display:flex;
101+
align-items:center;
102+
`;
103+
const CartItemQuantityContainer = styled.div`
104+
select{
105+
border-radius:7px;
106+
backgroud-color:#F0F2F2;
107+
padding:8px;
108+
box-shadow: 0 2px 5px rgba(15,17,17,.15);
109+
110+
:focus{
111+
outline:none;
112+
}
113+
}
114+
115+
`;
116+
const CartItemDeleteContainer = styled.div`
117+
color: #007185;
118+
margin-left:16px;
119+
cursor:pointer;
120+
`;
121+
const CartItemPrice = styled.div`
122+
font-size:18px;
123+
font-weight:700;
124+
margin-left:16px;
125+
`;
126+
127+
const InStock = styled.div`
128+
padding-top:px;
129+
padding-bottom:px;
130+
`;
131+
const InOfStock = styled.span`
132+
color:green;
133+
`;
134+
const OutOfStock = styled.span`
135+
color:#ec5050c9;
136+
`;
137+

‎src/Components/CartComponent/CartItems.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react'
2+
import styled from 'styled-components';
3+
import CartItem from './CartItem';
4+
import {Link} from "react-router-dom";
5+
function CartItemss({products}) {
6+
return (
7+
<Container>
8+
<Title>Your Amazon Cart</Title>
9+
10+
<CartSubtile>Check your Saved for later items below or&nbsp;
11+
<Link to="/">continue shopping</Link>.
12+
13+
</CartSubtile>
14+
15+
<hr/>
16+
17+
<ItemsContainer>
18+
{
19+
20+
products.length > 0 ? (products.map(data=>(<CartItem key={data.id} id={data.id} name={data.product.name} price={data.product.price} product_img={data.product.product_img} quantity={data.product.quantity} in_stock={data.product.in_stock}/> ))):(<Empty>Cart is Empty.</Empty>)
21+
22+
}
23+
24+
</ItemsContainer>
25+
26+
</Container>
27+
)
28+
}
29+
30+
export default CartItemss
31+
const Container = styled.div`
32+
padding:20px;
33+
flex:0.7;
34+
background-color:white;
35+
margin-right:18px;
36+
37+
`;
38+
39+
const Title = styled.h1`
40+
margin-bottom:1px;
41+
`;
42+
const ItemsContainer = styled.div``;
43+
44+
const CartSubtile = styled.div`
45+
margin-bottom:15px;
46+
`;
47+
48+
const Empty = styled.div`
49+
display:flex;
50+
flex:1;
51+
margin-top:50px;
52+
align-item:center;
53+
justify-content:center;
54+
color:#00000066;
55+
`;

0 commit comments

Comments
 (0)