├── .gitignore
├── .prettierrc
├── README.md
├── craco.config.js
├── package.json
├── public
├── _redirects
├── favicon-32x32.png
├── favicon.ico
├── index.html
├── manifest.json
├── robots.txt
└── shop.png
├── src
├── App.js
├── App.scss
├── assets
│ ├── coupon.png
│ ├── delete.png
│ ├── delivery.png
│ ├── frontpage.svg
│ ├── shop.svg
│ ├── uempty_cart.svg
│ └── wishlist.png
├── components
│ ├── Aboutus
│ │ ├── Aboutus.jsx
│ │ ├── bike.svg
│ │ ├── delivered.svg
│ │ ├── qual.svg
│ │ ├── rating.svg
│ │ └── undraw_profile_pic_ic5t.svg
│ ├── AddressPage
│ │ ├── AddressCard.jsx
│ │ ├── AddressForm.jsx
│ │ ├── AddressModal.js
│ │ ├── AddressPage.jsx
│ │ ├── OrderSuccess.jsx
│ │ └── SelectAddress.jsx
│ ├── Cart.jsx
│ ├── Categories
│ │ ├── Categories.jsx
│ │ ├── CategoryCard.jsx
│ │ └── CircularCard.jsx
│ ├── Footer
│ │ ├── Async.svg
│ │ ├── Footer.css
│ │ ├── Footer.jsx
│ │ └── wave.svg
│ ├── Home.jsx
│ ├── LandingPageItems
│ │ ├── Banner.jsx
│ │ ├── Container.jsx
│ │ ├── ItemCard.jsx
│ │ ├── Items.jsx
│ │ └── LandingPageItems.jsx
│ ├── Loading.js
│ ├── Navbar.jsx
│ ├── OrderPage
│ │ ├── EmptyOrder.jsx
│ │ ├── OrderItem.jsx
│ │ ├── Orderpage.jsx
│ │ └── RatingStars.jsx
│ ├── ProductDetails
│ │ └── ProductDetails.js
│ ├── Products
│ │ ├── Card.js
│ │ └── ProductsList.js
│ ├── ToastContainer.js
│ ├── Wishlist
│ │ ├── EmptyWishlist.jsx
│ │ ├── Wishlist.jsx
│ │ ├── WishlistCard.jsx
│ │ └── icon.svg
│ ├── cart.scss
│ └── icons
│ │ └── navIcon.js
├── config
│ ├── axios.config.js
│ └── myLog.js
├── images
│ ├── categories-accessories.jpg
│ ├── categories-cosmetics.jpg
│ ├── categories-electronics.jfif
│ ├── categories-footwear.jpg
│ ├── categories-home-decor.jpg
│ ├── categories-kids-wear.jpg
│ ├── categories-mens-clothing.jpg
│ ├── categories-womens-clothing.jpg
│ └── order-images
│ │ ├── deliveredicon.svg
│ │ ├── emptyOrder.svg
│ │ └── successfulorder.svg
├── index.js
├── index.scss
├── redux
│ ├── slices
│ │ ├── Cartslice.js
│ │ ├── addressSlice.js
│ │ ├── orderSlice.js
│ │ ├── productSlice.js
│ │ └── whishlistSlice.js
│ └── store.js
├── services
│ ├── addresses.js
│ ├── api.js
│ ├── orders.js
│ ├── products.js
│ └── wishlist.js
└── styles
│ ├── home.scss
│ └── productList.scss
├── tailwind.config.js
├── tailwindcss-config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .env
8 |
9 | # testing
10 | /coverage
11 |
12 | # production
13 | /build
14 |
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
26 | package-lock.json
27 | /.vscode
28 | /build
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "es5",
4 | "endOfLine": "lf"
5 | }
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Async Store
2 |
3 |
4 |
6 |
7 |
8 | [](https://app.netlify.com/sites/asyncstore/deploys)
9 |
10 |
11 |
12 |
13 |
14 |
Async Store
15 |
16 |
17 | You need to enable JavaScript to run this app.
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/shop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Team-Asyncc/async-ecommerce/857adc7456789f57b8fe85a8bb495f31ba3a2dd0/public/shop.png
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from 'react';
2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
3 | import Navbar from './components/Navbar';
4 |
5 | import Loading from './components/Loading';
6 | import './App.scss';
7 | import ToastContainer from './components/ToastContainer';
8 |
9 | // Dynamic Imports
10 | const Home = React.lazy(() => import('./components/Home'));
11 | const Aboutus = React.lazy(() => import('./components/Aboutus/Aboutus'));
12 | const ProductsList = React.lazy(() =>
13 | import('./components/Products/ProductsList')
14 | );
15 | const Orderpage = React.lazy(() => import('./components/OrderPage/Orderpage'));
16 | const Wishlist = React.lazy(() => import('./components/Wishlist/Wishlist'));
17 | const Cart = React.lazy(() => import('./components/Cart'));
18 | const ProductDetails = React.lazy(() =>
19 | import('./components/ProductDetails/ProductDetails')
20 | );
21 | const OrderSuccess = React.lazy(() =>
22 | import('./components/AddressPage/OrderSuccess')
23 | );
24 | const AddressPage = React.lazy(() =>
25 | import('./components/AddressPage/AddressPage')
26 | );
27 |
28 | function App() {
29 | return (
30 |
31 |
32 |
35 |
47 |
48 |
49 | );
50 | }
51 |
52 | export default App;
53 |
--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap');
2 |
3 | body {
4 | &::-webkit-scrollbar {
5 | width: 8px;
6 | background-color: #d9d0e8;
7 | border-radius: 5px;
8 | overflow: hidden;
9 | }
10 | &::-webkit-scrollbar-thumb {
11 | background-color: #a39cb1;
12 | // border-radius: 5px;
13 | }
14 | }
15 |
16 | .custom-scroll {
17 | &::-webkit-scrollbar {
18 | width: 8px;
19 | background-color: #d9d0e8;
20 | border-radius: 5px;
21 | overflow: hidden;
22 | }
23 | &::-webkit-scrollbar-thumb {
24 | background-color: #a39cb1;
25 | border-radius: 5px;
26 | }
27 | }
28 | .App {
29 | // background-color: #f5f3f7;
30 | font-family: 'Montserrat', sans-serif;
31 | box-sizing: border-box;
32 | }
33 |
34 | .App-header {
35 | min-height: 100vh;
36 | display: flex;
37 | flex-direction: column;
38 | align-items: center;
39 | justify-content: center;
40 | font-size: calc(10px + 2vmin);
41 | color: #000;
42 | }
43 |
44 | .categories-electronics {
45 | background: url(./images/categories-electronics.jfif) no-repeat center
46 | center/cover;
47 | }
48 |
49 | .categories-mens-clothing {
50 | background: url(./images/categories-mens-clothing.jpg) no-repeat center
51 | center/cover;
52 | }
53 |
54 | .categories-womens-clothing {
55 | background: url(./images/categories-womens-clothing.jpg) no-repeat center
56 | center/cover;
57 | }
58 |
59 | .categories-kids-wear {
60 | background: url(./images/categories-kids-wear.jpg) no-repeat center
61 | center/cover;
62 | }
63 |
64 | .categories-footwear {
65 | background: url(./images/categories-footwear.jpg) no-repeat top center/cover;
66 | }
67 |
68 | .categories-accessories {
69 | background: url(./images/categories-accessories.jpg) no-repeat center
70 | center/cover;
71 | }
72 |
73 | .categories-home-decor {
74 | background: url(./images/categories-home-decor.jpg) no-repeat center
75 | center/cover;
76 | }
77 |
78 | .categories-cosmetics {
79 | background: url(./images/categories-cosmetics.jpg) no-repeat center
80 | center/cover;
81 | }
82 |
83 | .navbar-link {
84 | color: black;
85 | font-size: 1.275rem;
86 | font-weight: 500;
87 | // margin: 0px 3px 0px 3px;
88 | padding: 3px 2px;
89 | text-decoration: none;
90 | position: relative;
91 |
92 | &:after {
93 | bottom: -4px;
94 | content: '';
95 | display: block;
96 | height: 2px;
97 | left: 0;
98 | position: absolute;
99 | background: rgba(236, 72, 153, 1);
100 | opacity: 0.6;
101 | transition: width 0.6s ease 0s, opacity 0.6s ease 0s;
102 | width: 0;
103 | }
104 |
105 | &:hover:after {
106 | width: 100%;
107 | opacity: 0.9;
108 | }
109 | }
110 | .active-class {
111 | color: rgba(236, 72, 153, 1);
112 | }
113 |
--------------------------------------------------------------------------------
/src/assets/coupon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Team-Asyncc/async-ecommerce/857adc7456789f57b8fe85a8bb495f31ba3a2dd0/src/assets/coupon.png
--------------------------------------------------------------------------------
/src/assets/delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Team-Asyncc/async-ecommerce/857adc7456789f57b8fe85a8bb495f31ba3a2dd0/src/assets/delete.png
--------------------------------------------------------------------------------
/src/assets/delivery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Team-Asyncc/async-ecommerce/857adc7456789f57b8fe85a8bb495f31ba3a2dd0/src/assets/delivery.png
--------------------------------------------------------------------------------
/src/assets/shop.svg:
--------------------------------------------------------------------------------
1 |
2 |
12 |
--------------------------------------------------------------------------------
/src/assets/uempty_cart.svg:
--------------------------------------------------------------------------------
1 | empty_cart
13 | Our Story
14 |
15 |
16 |
17 | Providing our customers with a sophisticated ecommerce retail
18 | shopping experience. Our products coupled with a relaxed and
19 | gourmet atmosphere appeals to a wide variety of customers. With
20 | top-rated selections in fine quality clothing products, cosmetic
21 | products,and other accessories, Async Store is committed to
22 | providing the best merchandise selection at the lowest possible
23 | prices.
24 |
25 |
26 |
27 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 2.7K
36 |
37 |
Visitors
38 |
39 |
40 |
41 | 1.8K
42 |
43 |
Subscribes
44 |
45 |
46 |
47 | 150
48 |
49 |
Orders
50 |
51 |
52 |
53 | 500
54 |
55 |
Products
56 |
57 |
58 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | Made to Create Good
70 |
71 |
72 | We design outdoor products to help you create good moments that
73 | become lasting memories.
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | Free Shipping & Returns
82 |
83 |
84 | Free shipping and returns on all orders in India.
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | 200+ 5 Star Reviews
94 |
95 |
96 | Ingenious, quality products designed to last for a long time.
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 | We Deliver Happiness
105 |
106 |
107 | We design outdoor products to help you create good moments that
108 | become lasting memories.
109 |
110 |
111 |
112 |
114 | {/* testimonials */}
115 |
116 |
117 | Testimonials
118 |
119 |
120 |
121 |
122 |
123 |
129 |
131 |
132 | I bought for a TShirt for my small sister.Overall design &
133 | colours are attractive. Value for money.
134 |
135 |
136 |
142 |
143 | Swetabh Singh
144 |
145 | Customer
146 |
147 |
148 |
149 |
150 |
151 |
152 |
158 |
160 |
161 | The jewellery products are very beautiful and afforable.
162 |
163 |
164 |
170 |
171 | Mohit Singh
172 |
173 | Customer
174 |
175 |
176 |
177 |
178 |
179 |
181 |
182 |
183 | );
184 | };
185 |
186 | export default Aboutus;
187 |
--------------------------------------------------------------------------------
/src/components/Aboutus/bike.svg:
--------------------------------------------------------------------------------
1 | profile pic
12 |
{name}
13 |
14 |
15 | {address1} {address2} {district}
16 |
17 | {district} {state} {pincode}
18 |
19 |
20 | {'Mobile: '}
21 | {mobileno}
22 |
23 |
24 |
27 |
28 | {
31 | const d = { val: storedAddress, id: idx };
32 | dispatch(setSelected(d));
33 | openModal();
34 | }}
35 | >
36 | EDIT
37 |
38 | dispatch(removeAddress(idx))}
41 | >
42 | REMOVE
43 |
44 |
45 |
36 |
Open Modal
37 |
44 |
45 | close
46 |
47 |
49 |
68 |
75 |
76 |
78 |
79 |
80 |
81 |
82 |
83 | Select Delivery Address
84 |
85 |
86 |
87 |
88 | {storedAddresses.length === 0 ? (
89 |
90 | Nothing here...
91 |
92 | ) : (
93 |
94 |
99 | )}
100 |
101 | {
103 | dispatch(setSelected([]));
104 |
105 | openModal();
106 | }}
107 | className="w-2/5 mt-6 rounded border-pink-300 border-4 p-1 text-xl font-semibold text-pink-500 hover:text-gray-100 hover:bg-pink-500 hover:border-pink-500"
108 | >
109 | ADD NEW ADDRESS
110 |
111 |
112 |
113 |
114 |
115 |
116 | PRICE DETAILS ({`${numberOfCartItems} Items`})
117 |
118 |
119 | TOTAL MRP:
120 | {` ${totalPrice.toFixed(2)}₹`}
121 |
122 |
123 | DISCOUNT ON MRP:
124 |
125 | -₹ {(totalPrice / 10).toFixed(2)}
126 |
127 |
128 |
129 | COUPON DISCOUNT: 0₹
130 |
131 |
132 | Convenience Fee: {' '}
133 | FREE
134 |
135 |
136 | TOTAL AMOUNT: {' '}
137 | {(totalPrice - totalPrice / 10).toFixed(2)}₹
138 |
139 | {storedAddresses.length === 0 ? (
140 |
{
142 | dispatch(setSelected([]));
143 |
144 | openModal();
145 | }}
146 | className="w-full mt-6 rounded p-1 text-2xl font-semibold bg-pink-500 text-gray-100 hover:bg-pink-600 hover:shadow-md"
147 | >
148 | ADD ADDRESS
149 |
150 | ) : (
151 |
152 |
{
155 | const cartWithDate = cart.map((item) => {
156 | const date = new Date();
157 | const dateData = date.toUTCString().slice(0, 17);
158 | return { ...item, date: dateData };
159 | });
160 | toast('Order placed successfully', { icon: '🥰' });
161 | dispatch(addOrder(cartWithDate));
162 | dispatch(clearCart());
163 | }}
164 | >
165 | PLACE ORDER
166 |
167 |
168 | )}
169 |
170 |
171 |
172 |
173 |
11 |
20 |
21 |
22 | Order Placed Successfully
23 |
24 |
25 |
26 |
27 | CONTINUE SHOPPING
28 |
29 |
30 |
26 | {availableAddress.map((storedAddress, idx) => {
27 | return (
28 |
43 | );
44 | })}
45 |
15 |
16 | {1 > 0 ? (
17 |
18 | {selectedItem.length > 0 ? (
19 |
20 |
21 |
22 | {selectedItem.map((item, idx) => {
23 | totalPrice += item.price * (item.quantity + 1);
24 | return (
25 |
26 |
27 |
32 |
33 |
34 |
35 |
36 |
37 | {item.title}
38 |
39 |
{
44 | dispatch(removeItem(item.id));
45 | console.log(item.id);
46 | }}
47 | />
48 |
49 |
50 | {item.description.slice(0, 75)}
51 |
52 |
53 |
54 | ₹ {item.price * (item.quantity + 1).toFixed(2)}
55 |
56 |
57 |
58 | {(
59 | (item.price / 10 + item.price) *
60 | (item.quantity + 1)
61 | ).toFixed(2)}
62 |
63 |
64 |
(10% off)
65 |
66 |
67 |
68 |
69 | QUANTITY :{' '}
70 | {
77 | dispatch(incItem(item.id));
78 | }}
79 | >
80 | +
81 |
82 | {item.quantity + 1}
83 | dispatch(decItem(item.id))}
90 | >
91 | -
92 |
93 |
94 |
95 |
96 |
97 |
98 |
103 |
104 | Delivery expected 30 august !
105 | FREE
106 |
107 |
108 |
109 |
110 |
119 | CONTINUE SHOPPING
120 |
121 |
122 |
123 |
124 |
125 | Apply coupon{' '}
126 | DEVSNEST10 to avail
127 | flat 10% off on
128 | your first order{' '}
129 |
130 |
131 |
136 |
Apply for coupon
137 |
141 |
143 |
144 | Congratualtions !! your order is eligible for
145 | FREE shipping!
146 |
147 |
148 |
149 | Bag subtotal
150 | {totalPrice.toFixed(2)}₹
151 |
152 |
153 | Shipping charge
154 | FREE
155 |
156 |
157 | Discount MRP
158 |
159 | -{(totalPrice / 10).toFixed(2)}₹
160 |
161 |
162 |
163 | Total MRP
164 | {totalPrice.toFixed(2)}
165 |
166 |
167 | You will save {(totalPrice / 10).toFixed(2)}₹ on this
168 | order
169 |
170 |
171 |
175 |
177 |
178 |
179 | ) : (
180 |
181 |
182 |
183 |
184 | Your bag is empty! Let’s fill it up shall we?
185 |
186 |
187 |
189 | CONTINUE SHOPPING
190 |
191 |
192 |
193 |
195 | VIEW WISHLIST
196 |
197 |
198 |
199 |
200 |
201 | )}
202 |
203 | ) : null}
204 |
205 |
9 |
CATEGORIES
10 |
11 |
73 |
74 |
7 |
8 |
{category_type}
9 |
8 | );
9 | };
10 |
11 | export default CircularCard;
12 |
--------------------------------------------------------------------------------
/src/components/Footer/Async.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.css:
--------------------------------------------------------------------------------
1 | .container{
2 | display: flex;
3 | justify-content: space-around;
4 | }
5 |
6 | .custom-shape-divider-bottom-1629698163 {
7 | position: absolute;
8 | bottom: 0;
9 | left: 0;
10 | width: 100%;
11 | overflow: hidden;
12 | line-height: 0;
13 | transform: rotate(180deg);
14 | }
15 |
16 | .custom-shape-divider-bottom-1629698163 svg {
17 | position: relative;
18 | display: block;
19 | width: calc(122% + 1.3px);
20 | height: 126px;
21 | }
22 |
23 | .custom-shape-divider-bottom-1629698163 .shape-fill {
24 | fill: #D381C9;
25 | }
--------------------------------------------------------------------------------
/src/components/Footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './Footer.css';
3 | import InstagramIcon from '@material-ui/icons/Instagram';
4 | import FacebookIcon from '@material-ui/icons/Facebook';
5 | import YouTubeIcon from '@material-ui/icons/YouTube';
6 | import TwitterIcon from '@material-ui/icons/Twitter';
7 | import waves from './wave.svg'
8 |
9 | const Footer = () => {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 | A sync Store
17 |
18 |
24 | Suscribe
25 |
26 |
27 |
28 |
29 |
Contact Us
30 |
31 |
Phone: +1 (0) 000 0000 001
32 | Email: asyncteam@outlook.com
33 |
34 | Address:1234 Street Name City, AA 99999
35 |
36 |
37 |
38 |
39 | {/* {} */}
40 |
71 |
72 |
73 | Copyright © Team Async. All Rights Reserved
74 |
75 |
19 |
20 |
25 | );
26 | };
27 |
28 | export default Home;
29 |
--------------------------------------------------------------------------------
/src/components/LandingPageItems/Banner.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import frontpage from '../../assets/frontpage.svg';
4 |
5 | const Banner = () => {
6 | return (
7 |
8 |
9 |
10 | A sync Store
11 |
12 |
13 | The perfect place to shop
14 |
15 |
16 |
17 | Shop now
18 |
19 |
20 |
21 |
22 |
8 |
9 | {items.map((obj, idx) => {
10 | return
15 |
16 | );
17 |
18 | };
19 |
20 | export default Container;
--------------------------------------------------------------------------------
/src/components/LandingPageItems/ItemCard.jsx:
--------------------------------------------------------------------------------
1 | const ItemCard = ({ imageurl, description }) => {
2 | return (
3 | <>
4 |
8 |
9 |
10 | {description}
11 |
12 |
Starting from Rs. 499
13 |
6 |
7 |
8 | {category.heading}
9 |
10 |
ViewMore
11 |
12 |
13 |
20 |
29 | {({ open }) => (
30 | <>
31 |
32 |
33 |
34 | {/* Mobile menu button*/}
35 |
36 | Open main menu
37 | {open ? (
38 |
43 |
44 |
45 |
46 |
47 |
49 | {/*
50 | Logo
51 | className= */}
52 |
53 |
54 |
55 | {navigation.map((item, idx) => (
56 |
62 |
63 | {item.name}
64 |
65 |
66 | ))}
67 |
68 |
69 |
70 |
71 | {/* Fav Icon */}
72 |
77 |
79 |
84 | {/* Cart Icon */}
85 |
87 |
88 |
89 |
92 |
93 | {navigation.map((item, idx) => (
94 |
99 |
107 | {item.name}
108 |
109 |
110 | ))}
111 |
112 |
113 |
114 | )}
115 |
116 |
117 | );
118 | }
119 |
--------------------------------------------------------------------------------
/src/components/OrderPage/EmptyOrder.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import emptyOrder from '../../images/order-images/emptyOrder.svg';
4 |
5 | const EmptyOrder = () => {
6 | return (
7 |
11 |
20 |
21 |
22 | You haven't placed any order yet!
23 |
24 |
25 | Order section is empty. After placing order, You can track them from
26 | here!
27 |
28 |
29 |
30 |
31 | START SHOPPING
32 |
33 |
34 |
9 |
10 |
11 |
12 |
Delivered
13 |
{`On ${item.date}`}
14 |
15 |
16 |
17 |
18 |
23 |
24 |
25 |
26 | {item.title}
27 |
28 |
29 | {item.description.slice(0, 50)}
30 |
31 | {item.size ? (
32 |
Size: {item.size}
33 | ) : null}
34 |
35 | Quantity: {item.quantity + 1}
36 |
37 |
38 |
39 |
47 |
48 |
49 |
51 |
23 |
24 |
25 | Showing All Orders
26 |
27 |
28 | {showAllOrders
29 | ? orders.map((item, idx) => {
30 | return
36 | {showAllOrders ? null : (
37 |
setShowAllOrders((s) => true)}
41 | >
42 | VIEW MORE
43 |
44 | )}
45 |
46 | Showing 1-1 of 1
47 |
48 |
49 |
8 |
13 | ) : (
14 |
15 |
20 | );
21 | };
22 |
23 | const StarRating = ({ ratingVal }) => {
24 | const [rating, setRating] = useState(parseInt(ratingVal) || 0);
25 | const [selection, setSelection] = React.useState(0);
26 |
27 | const hoverOver = (event) => {
28 | let val = 0;
29 | if (event && event.target && event.target.getAttribute('data-star-id'))
30 | val = event.target.getAttribute('data-star-id');
31 | setSelection(val);
32 | };
33 | return (
34 |
35 | Rate Product
36 |
hoverOver(null)}
38 | onClick={(e) =>
39 | setRating(e.target.getAttribute('data-star-id') || rating)
40 | }
41 | onMouseOver={hoverOver}
42 | >
43 | {Array.from({ length: 5 }, (v, i) => (
44 | = i + 1 : rating >= i + 1}
48 | />
49 | ))}
50 |
51 |
35 |
36 |
37 |
38 |
39 |
40 |
{currentProduct.title}
41 |
42 | {currentProduct.description}
43 |
44 |
45 | {currentProduct.rating}
46 | 520 ratings
48 |
49 |
50 |
51 |
₹ {currentProduct.price}
52 |
53 | ₹{2 * currentProduct.price}{' '}
54 |
55 | (50% OFF)
56 |
57 |
58 |
59 | {has_sizes.includes(currentProduct.category) && (
60 |
61 |
SELECT SIZE
62 |
63 | {sizes.map((val, idx) => (
64 |
setSize(val)}
68 | style={{
69 | color: val === size ? 'white' : '#000',
70 | backgroundColor:
71 | val === size ? 'rgb(236, 72, 153)' : 'transparent',
72 | borderRadius: '50%',
73 | }}
74 | >
75 | {val}
76 |
77 | ))}
78 |
79 |
80 | )}
81 |
82 |
83 | {
86 | let have = cartItems.some(
87 | (val) => val.id === currentProduct.id
88 | );
89 | if (have) {
90 | toast.error('Item already in cart', {
91 | icon: '🙄',
92 | });
93 |
94 | return;
95 | }
96 |
97 | dispatch(addItem({ ...currentProduct, size }));
98 | toast.success('Item Added to cart', {
99 | icon: '😍',
100 | });
101 | }}
102 | >
103 | ADD TO CART
104 |
105 | {
108 | dispatch(addToWhishlist(currentProduct));
109 | }}
110 | >
111 | ADD TO WISHLIST
112 |
113 |
114 |
115 |
116 |
13 |
14 |
setVisible(true)}
17 | onMouseLeave={() => setVisible(false)}
18 | >
19 |
20 |
21 |
22 |
23 |
24 |
25 | {val.title.length > 20 ? (
26 | {val.title.slice(0, 21)}...
27 | ) : (
28 | {val.title}
29 | )}
30 |
31 |
32 | {val.description.length > 28 ? (
33 | {val.description.slice(0, 20)}...
34 | ) : (
35 | {val.description}
36 | )}
37 |
38 |
39 |
₹ {val.price}
40 |
( 50% OFF )
41 |
42 |
43 |
44 |
setVisible(true)}
49 | onMouseLeave={() => setVisible(false)}
50 | >
51 | {
54 | dispatch(addToWhishlist(val));
55 | }}
56 | >
57 | WISHLIST
58 |
59 |
60 |
32 |
33 | {categoryList.map((val, idx) => (
34 | {
40 | const has = category.includes(val);
41 | if (has) setCategory((s) => s.filter((item) => item !== val));
42 | else setCategory((s) => [...s, val]);
43 | }}
44 | >
45 | {val}
46 |
47 | ))}
48 |
49 |
50 | {products
51 | .filter(
52 | (item) => category.includes(item.category) || category.length === 0
53 | )
54 | .map((val, idx) => {
55 | return
58 |
59 |
60 | );
61 | };
62 |
63 | export default ProductsList;
64 |
--------------------------------------------------------------------------------
/src/components/ToastContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Toaster } from 'react-hot-toast';
3 |
4 | const ToastContainer = () => {
5 | return
8 |
9 |
10 | YOUR WISHLIST IS EMPTY
11 |
12 |
13 | Add the items you like to your wishlist. Review them anytime and
14 | easily move them to the cart.
15 |
16 |
17 |
18 |
19 | CONTINUE SHOPPING
20 |
21 |
22 |
23 |
18 | {wishlist.length > 0 ? (
19 |
20 |
21 |
22 | MY WISHLIST {'\u00a0\u00a0'}
23 | {wishlist.length} items
24 |
25 |
26 | {wishlist.map((productObj, index) => {
27 | return
30 |
31 |
32 | ) : (
33 |
34 | )}
35 |
11 |
12 |
13 |
dispatch(removeFromWhishlist(productObj.id))}
17 | />
18 |
24 |
25 |
26 |
27 | {productObj.title.length > 20 ? (
28 | {productObj.title.slice(0, 21)}...
29 | ) : (
30 | {productObj.title}
31 | )}
32 |
33 |
34 |
₹ {productObj.price}
35 |
36 | ₹ 2000
37 |
38 |
39 | ( 50% OFF )
40 |
41 |
42 |
43 |
44 |
45 | {
48 | dispatch(removeFromWhishlist(productObj.id));
49 | dispatch(addItem(productObj));
50 | }}
51 | >
52 | MOVE TO CART
53 |
54 |
55 |
32 |
39 |
40 | );
41 | };
42 |
43 | export const AsyncIcon = () => {
44 | return (
45 |
46 |
53 |
98 |
2 |
8 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.scss';
4 | import App from './App';
5 | import store from './redux/store';
6 | import { Provider } from 'react-redux';
7 |
8 | ReactDOM.render(
9 |
10 |
11 |
13 | ,
14 | document.getElementById('root')
15 | );
16 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | /* ./src/index.css */
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 |
6 | body {
7 | margin: 0;
8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
9 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
10 | sans-serif;
11 | -webkit-font-smoothing: antialiased;
12 | -moz-osx-font-smoothing: grayscale;
13 | background-color: #f5f3f7;
14 | }
15 |
16 | code {
17 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
18 | monospace;
19 | }
20 |
--------------------------------------------------------------------------------
/src/redux/slices/Cartslice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | function cartInitialState()
3 | {
4 | if(localStorage.getItem("items")===null)
5 | return []
6 | return JSON.parse( localStorage.getItem("items"))
7 | }
8 | export const cartSlice = createSlice({
9 | name: 'cart',
10 | initialState: cartInitialState(),
11 | reducers: {
12 | addItem: (state, action) => {
13 | localStorage.setItem("items",JSON.stringify([...state ,action.payload]));
14 | return [...state, action.payload];
15 | },
16 | removeItem: (state, action) =>{
17 |
18 | const newState= state.filter((item) => {
19 | return item.id !== action.payload;
20 | })
21 | localStorage.setItem("items",JSON.stringify(newState))
22 | return newState
23 | },
24 | clearCart: () => [],
25 | incItem: (state, action) => {
26 | const newState = state.map((item) => {
27 | if (item.id === action.payload && item.quantity !== 4)
28 | return { ...item, quantity: item.quantity + 1 };
29 | return item;
30 | });
31 | localStorage.setItem("items",JSON.stringify(newState))
32 | return newState;
33 | },
34 | decItem: (state, action) => {
35 | const newState = state.map((item) => {
36 | if (item.id === action.payload && item.quantity !== 0)
37 | return { ...item, quantity: item.quantity - 1 };
38 | return item;
39 | });
40 | localStorage.setItem("items",JSON.stringify(newState))
41 | return newState;
42 | },
43 | },
44 | });
45 | export const { addItem, removeItem, clearCart, incItem, decItem } =
46 | cartSlice.actions;
47 | export default cartSlice.reducer;
48 |
--------------------------------------------------------------------------------
/src/redux/slices/addressSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import { storeAddressses } from '../../services/addresses';
3 |
4 | const initialState = {
5 | storedAddresses: [],
6 | selectedAddress: [],
7 | };
8 |
9 | export const addressSlice = createSlice({
10 | name: 'address',
11 | initialState: initialState,
12 | reducers: {
13 | setAllAddress: (state, action) => {
14 | return { ...action.payload };
15 | },
16 | addAddress: (state, action) => {
17 | state.storedAddresses = [...state.storedAddresses, action.payload];
18 | storeAddressses(state);
19 | },
20 | removeAddress: (state, action) => {
21 | state.storedAddresses = state.storedAddresses.filter(
22 | (item, idx) => idx !== action.payload
23 | );
24 | storeAddressses(state);
25 | },
26 | updateAddress: (state, action) => {
27 | state.storedAddresses = state.storedAddresses.map((currAddress, idx) => {
28 | if (idx === action.payload.id) return action.payload.val;
29 | return currAddress;
30 | });
31 | storeAddressses(state);
32 | },
33 | setSelected: (state, action) => {
34 | state.selectedAddress = action.payload;
35 | },
36 | },
37 | });
38 | export const {
39 | addAddress,
40 | removeAddress,
41 | setAllAddress,
42 | updateAddress,
43 | setSelected,
44 | } = addressSlice.actions;
45 |
46 | export default addressSlice.reducer;
47 |
--------------------------------------------------------------------------------
/src/redux/slices/orderSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import { storeOrders } from '../../services/orders';
3 |
4 | export const orderSlice = createSlice({
5 | name: 'orders',
6 | initialState: [],
7 | reducers: {
8 | getAllorders: (state, action) => {
9 | return [...action.payload];
10 | },
11 | addOrder: (state, action) => {
12 | const newState = [...state, ...action.payload];
13 | storeOrders(newState);
14 | return newState;
15 | },
16 | },
17 | });
18 | export const { getAllorders, addOrder } = orderSlice.actions;
19 |
20 | export default orderSlice.reducer;
21 |
--------------------------------------------------------------------------------
/src/redux/slices/productSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
2 | import { getAllProducts, getSpecificProduct } from '../../services/products';
3 |
4 | const initialState = {
5 | isLoading: false,
6 | products: [],
7 | currentProduct: null,
8 | };
9 |
10 | export const loadProducts = createAsyncThunk(
11 | 'products/loadProducts',
12 | async () => {
13 | const data = await getAllProducts();
14 | return data;
15 | }
16 | );
17 |
18 | export const getProductDetails = createAsyncThunk(
19 | 'products/getSingleProduct',
20 | async (id) => {
21 | const data = await getSpecificProduct(id);
22 | return data;
23 | }
24 | );
25 |
26 | const productSlice = createSlice({
27 | name: 'productSlice',
28 | initialState: initialState,
29 | reducers: {
30 | resetCurrentProduct: (state) => {
31 | state.currentProduct = null;
32 | },
33 |
34 | toggleLoading: (state) => {
35 | state.isLoading = !state.isLoading;
36 | },
37 | },
38 |
39 | extraReducers: (cases) => {
40 | cases
41 | .addCase(loadProducts.pending, (state, action) => {
42 | state.isLoading = true;
43 | })
44 | .addCase(loadProducts.fulfilled, (state, action) => {
45 | state.isLoading = false;
46 | state.products = [...action.payload];
47 | })
48 | .addCase(getProductDetails.pending, (state, action) => {
49 | state.isLoading = true;
50 | })
51 | .addCase(getProductDetails.fulfilled, (state, action) => {
52 | state.isLoading = false;
53 | state.currentProduct = action.payload;
54 | });
55 | },
56 | });
57 |
58 | export const { resetCurrentProduct, toggleLoading } = productSlice.actions;
59 | export default productSlice.reducer;
60 |
--------------------------------------------------------------------------------
/src/redux/slices/whishlistSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import { storeWishlist } from '../../services/wishlist';
3 | import toast from 'react-hot-toast';
4 |
5 | const whishlistSlice = createSlice({
6 | name: 'whishlistSlice',
7 | initialState: [],
8 | reducers: {
9 | addToWhishlist: (state, action) => {
10 | for (let item of state) {
11 | if (item.id === action.payload.id) {
12 | toast.success('Item already in wishlist', {
13 | icon: '😶',
14 | });
15 | return state;
16 | }
17 | }
18 | toast.success('Item added to wishlist', {
19 | icon: '👏',
20 | });
21 | const newState = [...state, action.payload];
22 | storeWishlist(newState);
23 | return newState;
24 | },
25 | removeFromWhishlist: (state, action) => {
26 | const newState = state.filter((item) => item.id !== action.payload);
27 | storeWishlist(newState);
28 | return newState;
29 | },
30 | clearWhishlist: (state) => {
31 | return [];
32 | },
33 | getWishlist: (state, action) => {
34 | return [...action.payload];
35 | },
36 | },
37 | });
38 |
39 | export const {
40 | addToWhishlist,
41 | removeFromWhishlist,
42 | clearWhishlist,
43 | getWishlist,
44 | } = whishlistSlice.actions;
45 |
46 | export default whishlistSlice.reducer;
47 |
--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import ordersReducer from './slices/orderSlice';
3 | import productSlice from './slices/productSlice';
4 | import cartSlice from './slices/Cartslice';
5 | import whishlistSlice from './slices/whishlistSlice';
6 | import addressSlice from './slices/addressSlice';
7 |
8 | const store = configureStore({
9 | reducer: {
10 | orders: ordersReducer,
11 | products: productSlice,
12 | cart: cartSlice,
13 | wishlist: whishlistSlice,
14 | addressData: addressSlice,
15 | },
16 | });
17 |
18 | export default store;
19 |
--------------------------------------------------------------------------------
/src/services/addresses.js:
--------------------------------------------------------------------------------
1 | export const loadAddresses = () => {
2 | const data = localStorage.getItem('addresses');
3 | let storedAddress = JSON.parse(data);
4 | if (!storedAddress)
5 | storedAddress = {
6 | storedAddresses: [],
7 | selectedAddress: [],
8 | };
9 | return storedAddress;
10 | };
11 |
12 | export const storeAddressses = (data) => {
13 | const storeData = JSON.stringify(data);
14 | localStorage.setItem('addresses', storeData);
15 | };
16 |
--------------------------------------------------------------------------------
/src/services/api.js:
--------------------------------------------------------------------------------
1 | import myLog from '../config/myLog';
2 |
3 | export const API_BASE_URL = process.env.REACT_APP_API_URL;
4 | myLog(`using api base url:`, API_BASE_URL);
5 |
6 | export const API_ENDPOINTS = {
7 | GET_PRODUCTS: `/all`,
8 | GET_SINGLE_PRODUCT: '/get',
9 | CATEGORY: '/category',
10 | };
11 |
--------------------------------------------------------------------------------
/src/services/orders.js:
--------------------------------------------------------------------------------
1 | export const loadOrders = () => {
2 | const data = localStorage.getItem('orders');
3 | let storedOrderList = JSON.parse(data);
4 | if (!storedOrderList) storedOrderList = [];
5 | return storedOrderList;
6 | };
7 |
8 | export const storeOrders = (data) => {
9 | console.log('called to store order locally');
10 | const storeData = JSON.stringify(data);
11 | localStorage.setItem('orders', storeData);
12 | };
13 |
--------------------------------------------------------------------------------
/src/services/products.js:
--------------------------------------------------------------------------------
1 | import axios from '../config/axios.config';
2 | import { API_ENDPOINTS } from './api';
3 |
4 | export const getAllProducts = async () => {
5 | const response = await axios.get(API_ENDPOINTS.GET_PRODUCTS);
6 | return response.data;
7 | };
8 |
9 | export const getSpecificProduct = async (id) => {
10 | const response = await axios.get(`${API_ENDPOINTS.GET_SINGLE_PRODUCT}/${id}`);
11 | return response.data;
12 | };
13 |
--------------------------------------------------------------------------------
/src/services/wishlist.js:
--------------------------------------------------------------------------------
1 | export const loadWishlist = () => {
2 | const data = localStorage.getItem('wishlist');
3 | let storedWishlist = JSON.parse(data);
4 | if (!storedWishlist) storedWishlist = [];
5 | return storedWishlist;
6 | };
7 |
8 | export const storeWishlist = (data) => {
9 | const storeData = JSON.stringify(data);
10 | localStorage.setItem('wishlist', storeData);
11 | };
12 |
--------------------------------------------------------------------------------
/src/styles/home.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Team-Asyncc/async-ecommerce/857adc7456789f57b8fe85a8bb495f31ba3a2dd0/src/styles/home.scss
--------------------------------------------------------------------------------
/src/styles/productList.scss:
--------------------------------------------------------------------------------
1 | .hover-span {
2 | display: none;
3 | }
4 |
5 | .hover-active {
6 | display: block;
7 | background-color: #f5f3f7;
8 | left: 0;
9 | bottom: 35px;
10 | z-index: 9;
11 | }
12 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
3 | darkMode: false, // or 'media' or 'class'
4 | theme: {
5 | extend: {
6 | screens: {
7 | lgCustom: '1100px',
8 | xlCustom: '1340px',
9 | },
10 | outline: {
11 | pink: '2px solid #f9a8d400',
12 | },
13 | },
14 | },
15 | variants: {
16 | extend: {},
17 | },
18 | plugins: [],
19 | };
20 |
--------------------------------------------------------------------------------
/tailwindcss-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: [],
3 | darkMode: false, // or 'media' or 'class'
4 | theme: {
5 | extend: {},
6 | },
7 | variants: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
--------------------------------------------------------------------------------
5 | 
10 | 
11 | 
12 | 
13 |
14 |