├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── images │ ├── amazon.png │ ├── product_0.jpg │ ├── product_1.jpg │ ├── product_2.jpg │ ├── product_3.jpg │ ├── product_4.jpg │ ├── product_5.jpg │ ├── product_6.jpg │ ├── product_7.jpg │ ├── product_8.jpg │ ├── product_9.jpg │ ├── carousel_1.jpg │ ├── carousel_2.jpg │ ├── carousel_3.jpg │ ├── carousel_4.jpg │ ├── carousel_5.jpg │ ├── category_0.jpg │ ├── category_1.jpg │ ├── category_2.jpg │ ├── category_3.jpg │ ├── category_4.jpg │ ├── category_5.jpg │ ├── home_grid_1.jpg │ ├── home_grid_2.jpg │ ├── home_grid_3.jpg │ ├── home_grid_4.jpg │ ├── home_grid_5.jpg │ ├── home_grid_6.jpg │ ├── home_grid_7.jpg │ ├── home_grid_8.jpg │ ├── product_10.jpg │ ├── product_11.jpg │ ├── product_12.jpg │ ├── product_13.jpg │ ├── banner_image.jpg │ ├── banner_image_2.jpg │ ├── carousel_vid.mp4 │ ├── product_0_small.jpg │ ├── product_10_small.jpg │ ├── product_11_small.jpg │ ├── product_12_small.jpg │ ├── product_13_small.jpg │ ├── product_1_small.jpg │ ├── product_2_small.jpg │ ├── product_3_small.jpg │ ├── product_4_small.jpg │ ├── product_5_small.jpg │ ├── product_6_small.jpg │ ├── product_7_small.jpg │ ├── product_8_small.jpg │ └── product_9_small.jpg ├── manifest.json ├── data │ ├── suggestions.json │ ├── products.json │ └── search.json └── index.html ├── src ├── utils │ ├── constants.js │ └── CallApi.js ├── redux │ ├── store.js │ └── cartSlice.js ├── index.css ├── index.js ├── components │ ├── HomePageCard.jsx │ ├── ProductBadge.jsx │ ├── ProductRatings.jsx │ ├── index.js │ ├── ProductDetails.jsx │ ├── CarouselProduct.jsx │ ├── Carousel.jsx │ ├── SearchResults.jsx │ ├── CarouselCategory.jsx │ ├── HomePage.jsx │ ├── NavBar.jsx │ ├── Search.jsx │ ├── ProductPage.jsx │ └── Checkout.jsx └── App.js ├── .gitignore ├── tailwind.config.js ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/images/amazon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/amazon.png -------------------------------------------------------------------------------- /public/images/product_0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_0.jpg -------------------------------------------------------------------------------- /public/images/product_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_1.jpg -------------------------------------------------------------------------------- /public/images/product_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_2.jpg -------------------------------------------------------------------------------- /public/images/product_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_3.jpg -------------------------------------------------------------------------------- /public/images/product_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_4.jpg -------------------------------------------------------------------------------- /public/images/product_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_5.jpg -------------------------------------------------------------------------------- /public/images/product_6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_6.jpg -------------------------------------------------------------------------------- /public/images/product_7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_7.jpg -------------------------------------------------------------------------------- /public/images/product_8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_8.jpg -------------------------------------------------------------------------------- /public/images/product_9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_9.jpg -------------------------------------------------------------------------------- /public/images/carousel_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/carousel_1.jpg -------------------------------------------------------------------------------- /public/images/carousel_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/carousel_2.jpg -------------------------------------------------------------------------------- /public/images/carousel_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/carousel_3.jpg -------------------------------------------------------------------------------- /public/images/carousel_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/carousel_4.jpg -------------------------------------------------------------------------------- /public/images/carousel_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/carousel_5.jpg -------------------------------------------------------------------------------- /public/images/category_0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/category_0.jpg -------------------------------------------------------------------------------- /public/images/category_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/category_1.jpg -------------------------------------------------------------------------------- /public/images/category_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/category_2.jpg -------------------------------------------------------------------------------- /public/images/category_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/category_3.jpg -------------------------------------------------------------------------------- /public/images/category_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/category_4.jpg -------------------------------------------------------------------------------- /public/images/category_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/category_5.jpg -------------------------------------------------------------------------------- /public/images/home_grid_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/home_grid_1.jpg -------------------------------------------------------------------------------- /public/images/home_grid_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/home_grid_2.jpg -------------------------------------------------------------------------------- /public/images/home_grid_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/home_grid_3.jpg -------------------------------------------------------------------------------- /public/images/home_grid_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/home_grid_4.jpg -------------------------------------------------------------------------------- /public/images/home_grid_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/home_grid_5.jpg -------------------------------------------------------------------------------- /public/images/home_grid_6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/home_grid_6.jpg -------------------------------------------------------------------------------- /public/images/home_grid_7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/home_grid_7.jpg -------------------------------------------------------------------------------- /public/images/home_grid_8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/home_grid_8.jpg -------------------------------------------------------------------------------- /public/images/product_10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_10.jpg -------------------------------------------------------------------------------- /public/images/product_11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_11.jpg -------------------------------------------------------------------------------- /public/images/product_12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_12.jpg -------------------------------------------------------------------------------- /public/images/product_13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_13.jpg -------------------------------------------------------------------------------- /public/images/banner_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/banner_image.jpg -------------------------------------------------------------------------------- /public/images/banner_image_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/banner_image_2.jpg -------------------------------------------------------------------------------- /public/images/carousel_vid.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/carousel_vid.mp4 -------------------------------------------------------------------------------- /public/images/product_0_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_0_small.jpg -------------------------------------------------------------------------------- /public/images/product_10_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_10_small.jpg -------------------------------------------------------------------------------- /public/images/product_11_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_11_small.jpg -------------------------------------------------------------------------------- /public/images/product_12_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_12_small.jpg -------------------------------------------------------------------------------- /public/images/product_13_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_13_small.jpg -------------------------------------------------------------------------------- /public/images/product_1_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_1_small.jpg -------------------------------------------------------------------------------- /public/images/product_2_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_2_small.jpg -------------------------------------------------------------------------------- /public/images/product_3_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_3_small.jpg -------------------------------------------------------------------------------- /public/images/product_4_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_4_small.jpg -------------------------------------------------------------------------------- /public/images/product_5_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_5_small.jpg -------------------------------------------------------------------------------- /public/images/product_6_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_6_small.jpg -------------------------------------------------------------------------------- /public/images/product_7_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_7_small.jpg -------------------------------------------------------------------------------- /public/images/product_8_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_8_small.jpg -------------------------------------------------------------------------------- /public/images/product_9_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonnyDavies/amazon-clone-frontend/HEAD/public/images/product_9_small.jpg -------------------------------------------------------------------------------- /src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const BASE_URL = ".."; 2 | export const GB_CURRENCY = Intl.NumberFormat("en-GB", { 3 | style: "currency", 4 | currency: "GBP", 5 | }); 6 | -------------------------------------------------------------------------------- /src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import cartReducer from "./cartSlice"; 3 | 4 | export default configureStore({ 5 | reducer: { 6 | cart: cartReducer, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .btn { 7 | @apply bg-yellow-400 w-full p-3 text-xs xl:text-sm rounded hover:bg-yellow-500 mt-3; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import { Provider } from "react-redux"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | import store from "./redux/store"; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /src/utils/CallApi.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { BASE_URL } from "./constants"; 3 | 4 | const config = { 5 | headers: { 6 | "Content-Type": "application/json", 7 | Accept: "application/json", 8 | }, 9 | }; 10 | 11 | export const callAPI = async (resource) => { 12 | const { data } = await axios.get(`${BASE_URL}/${resource}`, config); 13 | return data; 14 | }; 15 | -------------------------------------------------------------------------------- /.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 4 | theme: { 5 | extend: { 6 | colors: { 7 | amazonclone: { 8 | background: "#EAEDED", 9 | light_blue: "#232F3A", 10 | yellow: "#FEBD69", 11 | DEFAULT: "#131921", 12 | }, 13 | }, 14 | }, 15 | }, 16 | plugins: [], 17 | }; 18 | -------------------------------------------------------------------------------- /src/components/HomePageCard.jsx: -------------------------------------------------------------------------------- 1 | const HomePageCard = ({ title, img, link }) => { 2 | return ( 3 |
4 |
{title}
5 |
6 | Home card 11 |
12 |
{link}
13 |
14 | ); 15 | }; 16 | 17 | export default HomePageCard; 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 2 | import { 3 | HomePage, 4 | NavBar, 5 | Checkout, 6 | SearchResults, 7 | ProductPage, 8 | } from "./components"; 9 | 10 | const App = () => { 11 | return ( 12 | 13 | 14 | 15 | } /> 16 | } /> 17 | } /> 18 | } /> 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /src/components/ProductBadge.jsx: -------------------------------------------------------------------------------- 1 | const ProductBadge = ({ badge }) => { 2 | if (badge === "choice") { 3 | return ( 4 | 5 | Amazon's Choice 6 | 7 | ); 8 | } else if (badge === "seller") { 9 | return ( 10 | 11 | #1 Best Seller 12 | 13 | ); 14 | } else if (badge === "limited") { 15 | return ( 16 | 17 | Limited Time Deal 18 | 19 | ); 20 | } 21 | 22 | return
; 23 | }; 24 | 25 | export default ProductBadge; 26 | -------------------------------------------------------------------------------- /src/components/ProductRatings.jsx: -------------------------------------------------------------------------------- 1 | import { StarIcon } from "@heroicons/react/24/outline"; 2 | 3 | const ProductRatings = (props) => { 4 | const starNumber = props.avgRating; 5 | const ratingNumber = props.ratings; 6 | 7 | return ( 8 |
9 | {Array.from({ length: starNumber }, (_, i) => ( 10 | 14 | ))} 15 | {Array.from({ length: 5 - starNumber }, (_, i) => ( 16 | 17 | ))} 18 | {ratingNumber} ratings 19 |
20 | ); 21 | }; 22 | 23 | export default ProductRatings; 24 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as HomePage } from "./HomePage"; 2 | export { default as Carousel } from "./Carousel"; 3 | export { default as HomePageCard } from "./HomePageCard"; 4 | export { default as CarouselCategory } from "./CarouselCategory"; 5 | export { default as CarouselProduct } from "./CarouselProduct"; 6 | export { default as NavBar } from "./NavBar"; 7 | export { default as Search } from "./Search"; 8 | export { default as Checkout } from "./Checkout"; 9 | export { default as ProductPage } from "./ProductPage"; 10 | export { default as SearchResults } from "./SearchResults"; 11 | export { default as ProductDetails } from "./ProductDetails"; 12 | export { default as ProductBadge } from "./ProductBadge"; 13 | export { default as ProductRatings } from "./ProductRatings"; 14 | -------------------------------------------------------------------------------- /src/components/ProductDetails.jsx: -------------------------------------------------------------------------------- 1 | import { ProductBadge, ProductRatings } from "./"; 2 | 3 | const ProductDetails = ({ product, ratings }) => { 4 | return ( 5 |
6 |
7 | {product.title} 8 |
9 |
10 | by {product.brand} 11 |
12 | {ratings && ( 13 |
14 | 18 |
19 | )} 20 |
21 | {product.attribute} 22 |
23 |
24 | 25 |
26 |
27 | ); 28 | }; 29 | 30 | export default ProductDetails; 31 | -------------------------------------------------------------------------------- /src/components/CarouselProduct.jsx: -------------------------------------------------------------------------------- 1 | import { Swiper, SwiperSlide } from "swiper/react"; 2 | import { Navigation } from "swiper"; 3 | import { Link } from "react-router-dom"; 4 | 5 | import "swiper/css"; 6 | import "swiper/css/navigation"; 7 | 8 | const CarouselProduct = () => { 9 | return ( 10 |
11 |
Best Sellers
12 | 18 | {Array.from({ length: 9 }, (_, i) => ( 19 | 20 | 21 | Carousel product 25 | 26 | 27 | ))} 28 | 29 |
30 | ); 31 | }; 32 | 33 | export default CarouselProduct; 34 | -------------------------------------------------------------------------------- /public/data/suggestions.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Guinness World Records 2023" 5 | }, 6 | { 7 | "id": 2, 8 | "title": "One: Simple One-Pan Wonders" 9 | }, 10 | { 11 | "id": 3, 12 | "title": "The Bullet That Missed: (The Thursday Murder Club 3)" 13 | }, 14 | { 15 | "id": 4, 16 | "title": "Interesting Facts For Curious Minds" 17 | }, 18 | { 19 | "id": 5, 20 | "title": "It Start with Us" 21 | }, 22 | { 23 | "id": 6, 24 | "title": "SPACEBOY" 25 | }, 26 | { 27 | "id": 7, 28 | "title": "Lessons in Chemistry" 29 | }, 30 | { 31 | "id": 8, 32 | "title": "2023 Guide to the Night Sky" 33 | }, 34 | { 35 | "id": 9, 36 | "title": "No Plan B" 37 | }, 38 | { 39 | "id": 10, 40 | "title": "BOSS Men's Prime Shirt" 41 | }, 42 | { 43 | "id": 11, 44 | "title": "Apple 2022 10.9-inch iPad" 45 | }, 46 | { 47 | "id": 12, 48 | "title": "DeLonghi Nescafé Dolce Coffee Machine" 49 | }, 50 | { 51 | "id": 13, 52 | "title": "Apple iPhone 14 Pro - Deep Purple" 53 | } 54 | ] 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "amazon-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@heroicons/react": "^2.0.16", 7 | "@reduxjs/toolkit": "^1.9.3", 8 | "@testing-library/jest-dom": "^5.16.5", 9 | "@testing-library/react": "^13.4.0", 10 | "@testing-library/user-event": "^13.5.0", 11 | "axios": "^1.3.4", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-redux": "^8.0.5", 15 | "react-router-dom": "^6.9.0", 16 | "react-scripts": "5.0.1", 17 | "swiper": "^9.1.1", 18 | "web-vitals": "^2.1.4" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "tailwindcss": "^3.2.7" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Amazon Clone in React, Tailwind CSS & Redux 2 | 3 | ![amazon_clone_v6](https://user-images.githubusercontent.com/17878339/231386523-1b0f7bb9-b83d-4a3e-a1bf-12405ebebbd2.png) 4 | 5 | This repository contains an Amazon Clone with React, Tailwind CSS and Redux. 6 | 7 | ## YouTube 8 | 9 | [Watch the Tutorial](https://youtu.be/pnnblIo1iO0) 10 | 11 | ## Features 12 | 13 | ### Home Page 14 | 15 | Contains Carousel containing images and video: 16 | 17 | ![HomePage](https://user-images.githubusercontent.com/17878339/230745262-681f4ad3-e34c-4a06-8ef3-d50218d93f94.gif) 18 | 19 | ### Nav Bar 20 | 21 | Complete with search box that offers suggestions as you type: 22 | 23 | ![NavBar](https://user-images.githubusercontent.com/17878339/230745497-4136d398-1991-4d96-a3ef-de7e6ca9977a.gif) 24 | 25 | ### Product Page 26 | 27 | ![ProductPage](https://user-images.githubusercontent.com/17878339/230745350-f1f0825c-fc68-4f3d-a5cd-cb0e051d1aed.gif) 28 | 29 | ### Checkout Page 30 | 31 | ![Checkout](https://user-images.githubusercontent.com/17878339/230745697-b166ff53-b07d-4cac-9947-61688ac6c2a3.gif) 32 | 33 | ## Prerequisites 34 | 35 | Node 14.x Version 36 | 37 | ## Cloning the repository 38 | 39 | ```shell 40 | git clone https://github.com/JonnyDavies/amazon-clone-frontend.git 41 | ``` 42 | 43 | ## Start the app 44 | 45 | ```shell 46 | npm start 47 | ``` 48 | -------------------------------------------------------------------------------- /src/components/Carousel.jsx: -------------------------------------------------------------------------------- 1 | import { Swiper, SwiperSlide } from "swiper/react"; 2 | import { Navigation, Autoplay } from "swiper"; 3 | 4 | import "swiper/css"; 5 | import "swiper/css/navigation"; 6 | 7 | const Carousel = () => { 8 | return ( 9 |
10 | 20 | 21 | Carousel POR 22 | 23 | 24 | Carousel POR 25 | 26 | 27 | 30 | 31 | 32 | Carousel POR 33 | 34 | 35 | Carousel POR 36 | 37 | 38 |
39 |
40 | ); 41 | }; 42 | 43 | export default Carousel; 44 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Amazon Clone 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/SearchResults.jsx: -------------------------------------------------------------------------------- 1 | import { useSearchParams, Link } from "react-router-dom"; 2 | import { useEffect, useState } from "react"; 3 | import { ProductDetails } from "./"; 4 | import { callAPI } from "../utils/CallApi"; 5 | import { GB_CURRENCY } from "../utils/constants"; 6 | 7 | const SearchResults = () => { 8 | const [searchParams] = useSearchParams(); 9 | const [products, setProducts] = useState(null); 10 | 11 | const getSearchResults = () => { 12 | const searchTerm = searchParams.get("searchTerm"); 13 | const category = searchParams.get("category"); 14 | 15 | callAPI(`data/search.json`).then((searchResults) => { 16 | const categoryResults = searchResults[category]; 17 | if (searchTerm) { 18 | const results = categoryResults.filter((product) => 19 | product.title.toLowerCase().includes(searchTerm.toLowerCase()) 20 | ); 21 | setProducts(results); 22 | } else { 23 | setProducts(categoryResults); 24 | } 25 | }); 26 | }; 27 | 28 | useEffect(() => { 29 | getSearchResults(); 30 | }, [searchParams]); 31 | 32 | return ( 33 |
34 | {products && 35 | products.map((product, key) => { 36 | return ( 37 | 38 |
39 |
40 | Search result product 45 |
46 |
47 |
48 | 49 |
50 | {GB_CURRENCY.format(product.price)} 51 |
52 |
53 |
54 |
55 | 56 | ); 57 | })} 58 |
59 | ); 60 | }; 61 | 62 | export default SearchResults; 63 | -------------------------------------------------------------------------------- /src/components/CarouselCategory.jsx: -------------------------------------------------------------------------------- 1 | import { Swiper, SwiperSlide } from "swiper/react"; 2 | import { Navigation } from "swiper"; 3 | import { useNavigate, createSearchParams } from "react-router-dom"; 4 | 5 | import "swiper/css"; 6 | import "swiper/css/navigation"; 7 | 8 | const CarouselCategory = () => { 9 | const navigate = useNavigate(); 10 | const searchCategory = (category) => { 11 | navigate({ 12 | pathname: "search", 13 | search: `${createSearchParams({ 14 | category: `${category}`, 15 | searchTerm: ``, 16 | })}`, 17 | }); 18 | }; 19 | 20 | return ( 21 |
22 |
Shop by Category
23 | 29 | searchCategory("Deals")} 31 | className="cursor-pointer" 32 | > 33 | Deal category 34 | 35 | searchCategory("Amazon")} 37 | className="cursor-pointer" 38 | > 39 | Amazon category 40 | 41 | searchCategory("Fashion")} 43 | className="cursor-pointer" 44 | > 45 | Fashion category 46 | 47 | searchCategory("Computers")} 49 | className="cursor-pointer" 50 | > 51 | Computers category 52 | 53 | searchCategory("Home")} 55 | className="cursor-pointer" 56 | > 57 | Home category 58 | 59 | searchCategory("Mobiles")} 61 | className="cursor-pointer" 62 | > 63 | Mobiles category 64 | 65 | 66 |
67 | ); 68 | }; 69 | 70 | export default CarouselCategory; 71 | -------------------------------------------------------------------------------- /src/redux/cartSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | products: [], 5 | productsNumber: 0, 6 | }; 7 | 8 | export const cartSlice = createSlice({ 9 | name: "cart", 10 | initialState, 11 | reducers: { 12 | addToCart: (state, action) => { 13 | // check if in product array 14 | const addProductExists = state.products.find( 15 | (product) => product.id === action.payload.id 16 | ); 17 | if (addProductExists) { 18 | addProductExists.quantity += parseInt(action.payload.quantity); 19 | } else { 20 | state.products.push({ 21 | ...action.payload, 22 | quantity: parseInt(action.payload.quantity), 23 | }); 24 | } 25 | state.productsNumber = 26 | state.productsNumber + parseInt(action.payload.quantity); 27 | }, 28 | removeFromCart: (state, action) => { 29 | // find the product removing the array 30 | const productToRemove = state.products.find( 31 | (product) => product.id === action.payload 32 | ); 33 | // remove the quantity from product number 34 | state.productsNumber = state.productsNumber - productToRemove.quantity; 35 | // find index of the product removing 36 | const index = state.products.findIndex( 37 | (product) => product.id === action.payload 38 | ); 39 | // remove from the array 40 | state.products.splice(index, 1); 41 | }, 42 | incrementInCart: (state, action) => { 43 | const itemInc = state.products.find((item) => item.id === action.payload); 44 | if (itemInc.quantity >= 1) { 45 | itemInc.quantity = itemInc.quantity + 1; 46 | } 47 | state.productsNumber = state.productsNumber + 1; 48 | }, 49 | decrementInCart: (state, action) => { 50 | const itemDec = state.products.find((item) => item.id === action.payload); 51 | if (itemDec.quantity === 1) { 52 | const index = state.products.findIndex( 53 | (item) => item.id === action.payload 54 | ); 55 | state.products.splice(index, 1); 56 | } else { 57 | itemDec.quantity--; 58 | } 59 | state.productsNumber = state.productsNumber - 1; 60 | }, 61 | }, 62 | }); 63 | 64 | export const { addToCart, removeFromCart, incrementInCart, decrementInCart } = 65 | cartSlice.actions; 66 | export default cartSlice.reducer; 67 | -------------------------------------------------------------------------------- /src/components/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import { Carousel, HomePageCard, CarouselCategory, CarouselProduct } from "./"; 2 | 3 | const HomePage = () => { 4 | return ( 5 |
6 |
7 | 8 |
9 | 14 | 19 | 24 | 29 | 34 | 39 | 44 | 49 |
50 | Banner 2 55 |
56 |
57 | 58 | 59 |
60 | Banner 1 65 |
66 |
67 |
68 | ); 69 | }; 70 | 71 | export default HomePage; 72 | -------------------------------------------------------------------------------- /src/components/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import { ShoppingCartIcon } from "@heroicons/react/24/outline"; 2 | import { Link } from "react-router-dom"; 3 | import { useSelector } from "react-redux"; 4 | import { Search } from "./"; 5 | 6 | const NavBar = () => { 7 | const cart = useSelector((state) => state.cart.productsNumber); 8 | return ( 9 |
10 |
11 | {/* Left */} 12 |
13 | 14 | Amazon logo 19 | 20 |
21 |
Deliver to
22 |
United Kingdom
23 |
24 |
25 | {/* Middle */} 26 |
27 | 28 |
29 | {/* Right */} 30 |
31 |
32 |
Hello, sign in
33 |
34 | Accounts & Lists 35 |
36 |
37 |
38 |
Returns
39 |
& Orders
40 |
41 | 42 |
43 | 44 |
45 |
46 | {cart} 47 |
48 |
49 |
Cart
50 |
51 | 52 |
53 |
54 |
55 |
Today's Deals
56 |
Customer Service
57 |
Registry
58 |
Gift Cards
59 |
Sell
60 |
61 |
62 | ); 63 | }; 64 | 65 | export default NavBar; 66 | -------------------------------------------------------------------------------- /src/components/Search.jsx: -------------------------------------------------------------------------------- 1 | import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; 2 | import { useState, useEffect } from "react"; 3 | import { useNavigate, createSearchParams } from "react-router-dom"; 4 | 5 | import { callAPI } from "../utils/CallApi"; 6 | 7 | const Search = () => { 8 | const [suggestions, setSuggestions] = useState(null); 9 | const [searchTerm, setSearchTerm] = useState(""); 10 | const [category, setCategory] = useState("All"); 11 | const navigate = useNavigate(); 12 | 13 | const onHandleSubmit = (e) => { 14 | e.preventDefault(); 15 | 16 | navigate({ 17 | pathname: "search", 18 | search: `${createSearchParams({ 19 | category: `${category}`, 20 | searchTerm: `${searchTerm}`, 21 | })}`, 22 | }); 23 | 24 | setSearchTerm(""); 25 | setCategory("All"); 26 | }; 27 | 28 | const getSuggestions = () => { 29 | callAPI(`data/suggestions.json`).then((suggestionResults) => { 30 | setSuggestions(suggestionResults); 31 | }); 32 | }; 33 | 34 | useEffect(() => { 35 | getSuggestions(); 36 | }, []); 37 | 38 | return ( 39 |
40 |
41 | 53 | setSearchTerm(e.target.value)} 58 | /> 59 | 62 |
63 | {suggestions && ( 64 |
65 | {suggestions 66 | .filter((suggestion) => { 67 | const currentSearchTerm = searchTerm.toLowerCase(); 68 | const title = suggestion.title.toLowerCase(); 69 | return ( 70 | currentSearchTerm && 71 | title.startsWith(currentSearchTerm) && 72 | title !== currentSearchTerm 73 | ); 74 | }) 75 | .slice(0, 10) 76 | .map((suggestion) => ( 77 |
setSearchTerm(suggestion.title)} 80 | > 81 | {suggestion.title} 82 |
83 | ))} 84 |
85 | )} 86 |
87 | ); 88 | }; 89 | 90 | export default Search; 91 | -------------------------------------------------------------------------------- /src/components/ProductPage.jsx: -------------------------------------------------------------------------------- 1 | import { useParams, Link } from "react-router-dom"; 2 | import { useState, useEffect } from "react"; 3 | import { useDispatch } from "react-redux"; 4 | import { ProductDetails } from "./"; 5 | import { GB_CURRENCY } from "../utils/constants"; 6 | import { callAPI } from "../utils/CallApi"; 7 | import { addToCart } from "../redux/cartSlice"; 8 | 9 | const ProductPage = () => { 10 | const { id } = useParams(); 11 | const [product, setProduct] = useState(null); 12 | const [quantity, setQuantity] = useState("1"); 13 | const dispatch = useDispatch(); 14 | 15 | const getProduct = () => { 16 | callAPI(`data/products.json`).then((productResults) => { 17 | setProduct(productResults[id]); 18 | }); 19 | }; 20 | 21 | const addQuantityToProduct = () => { 22 | setProduct((product.quantity = quantity)); 23 | return product; 24 | }; 25 | 26 | useEffect(() => { 27 | getProduct(); 28 | }, []); 29 | 30 | if (!product?.title) return

Loading Product ...

; 31 | 32 | return ( 33 | product && ( 34 |
35 |
36 |
37 | {/* Left */} 38 |
39 | Main product 40 |
41 | {/* Middle */} 42 |
43 |
44 | 45 |
46 |
47 | {product.description} 48 |
49 |
50 | {/* Right */} 51 |
52 |
53 | {GB_CURRENCY.format(product.price)} 54 |
55 |
56 | RRP:{" "} 57 | 58 | {GB_CURRENCY.format(product.oldPrice)} 59 | 60 |
61 |
62 | FREE Returns 63 |
64 |
65 | FREE Delivery 66 |
67 |
68 | In Stock 69 |
70 |
71 | Quantity: 72 | 80 |
81 | 82 | 88 | 89 |
90 |
91 |
92 |
93 | ) 94 | ); 95 | }; 96 | 97 | export default ProductPage; 98 | -------------------------------------------------------------------------------- /src/components/Checkout.jsx: -------------------------------------------------------------------------------- 1 | import { useSelector, useDispatch } from "react-redux"; 2 | import { Link } from "react-router-dom"; 3 | import { ProductDetails } from "./"; 4 | import { GB_CURRENCY } from "../utils/constants"; 5 | import { 6 | removeFromCart, 7 | decrementInCart, 8 | incrementInCart, 9 | } from "../redux/cartSlice"; 10 | 11 | const Checkout = () => { 12 | const products = useSelector((state) => state.cart.products); 13 | const itemsNumber = useSelector((state) => state.cart.productsNumber); 14 | const subtotal = useSelector((state) => 15 | state.cart.products.reduce( 16 | (subtotal, product) => subtotal + product.price * product.quantity, 17 | 0 18 | ) 19 | ); 20 | const dispatch = useDispatch(); 21 | 22 | return ( 23 |
24 |
25 |
26 | {/* Products */} 27 |
28 |
Shopping Cart
29 | {products.map((product) => { 30 | return ( 31 |
32 |
33 |
34 |
35 | 36 | Checkout product 41 | 42 |
43 |
44 |
45 | 46 | 47 | 48 |
49 |
50 | 56 |
57 |
58 |
61 | dispatch(decrementInCart(product.id)) 62 | } 63 | > 64 | - 65 |
66 |
67 | {product.quantity} 68 |
69 |
72 | dispatch(incrementInCart(product.id)) 73 | } 74 | > 75 | + 76 |
77 |
78 |
79 |
80 |
81 |
82 | {GB_CURRENCY.format(product.price)} 83 |
84 |
85 |
86 |
87 | ); 88 | })} 89 |
90 | Subtotal ({itemsNumber} items):{" "} 91 | 92 | {GB_CURRENCY.format(subtotal)} 93 | 94 |
95 |
96 | {/* Checkout */} 97 |
98 |
99 | Your order qualifies for{" "} 100 | FREE DELIVERY. Delivery Details 101 |
102 |
103 | Subtotal ({itemsNumber} items):{" "} 104 | 105 | {GB_CURRENCY.format(subtotal)} 106 | 107 |
108 | 109 |
110 |
111 |
112 |
113 | ); 114 | }; 115 | 116 | export default Checkout; 117 | -------------------------------------------------------------------------------- /public/data/products.json: -------------------------------------------------------------------------------- 1 | { 2 | "0": { 3 | "id": 0, 4 | "title": "No Plan B", 5 | "image": "../images/product_0.jpg", 6 | "image_small": "../images/product_0_small.jpg", 7 | "attribute": "Paperback", 8 | "description": "The gripping new Jack Reacher thriller from the No.1 bestselling authors Lee Child and Andrew Child.", 9 | "brand": "Lee Child", 10 | "avgRating": 4, 11 | "ratings": 24089, 12 | "price": 11.0, 13 | "oldPrice": 22.0, 14 | "badge": "seller" 15 | }, 16 | "1": { 17 | "id": 1, 18 | "title": "Guinness World Records 2023", 19 | "image": "../images/product_1.jpg", 20 | "image_small": "../images/product_1_small.jpg", 21 | "attribute": "Hardcover", 22 | "brand": "Guinness World Records", 23 | "description": "The 2023 edition takes readers on a journey that's out of this world! ", 24 | "avgRating": 5, 25 | "ratings": 929, 26 | "price": 8.5, 27 | "oldPrice": 22.0, 28 | "quantity": 0, 29 | "badge": "choice" 30 | }, 31 | "2": { 32 | "id": 2, 33 | "title": "One: Simple One-Pan Wonders", 34 | "image": "../images/product_2.jpg", 35 | "image_small": "../images/product_2_small.jpg", 36 | "attribute": "Paperback", 37 | "brand": "Jamie Oliver", 38 | "description": "Give them the simplest cookbook ever this Christmas . . . Jamie's back to basics with over 120 simple, delicious, ONE pan recipes", 39 | "avgRating": 4, 40 | "ratings": 2993, 41 | "price": 13.0, 42 | "oldPrice": 23.0, 43 | "badge": "choice" 44 | }, 45 | "3": { 46 | "id": 3, 47 | "title": "The Bullet That Missed: (The Thursday Murder Club 3)", 48 | "image": "../images/product_3.jpg", 49 | "image_small": "../images/product_3_small.jpg", 50 | "attribute": "Paperback", 51 | "description": "Except trouble is never far away where the Thursday Murder Club is concerned. ", 52 | "brand": "Richard Osman", 53 | "avgRating": 5, 54 | "ratings": 29283, 55 | "price": 10.0, 56 | "oldPrice": 20.0 57 | }, 58 | "4": { 59 | "id": 4, 60 | "title": "Interesting Facts For Curious Minds", 61 | "image": "../images/product_4.jpg", 62 | "image_small": "../images/product_4_small.jpg", 63 | "attribute": "Hardcover", 64 | "description": "Want to impress your friends and family with both useful, worthless but undeniably interesting facts? ", 65 | "brand": "Jordan Moore", 66 | "avgRating": 4, 67 | "ratings": 885, 68 | "price": 10.9, 69 | "oldPrice": 13.99, 70 | "badge": "limited" 71 | }, 72 | "5": { 73 | "id": 5, 74 | "title": "It Start with Us", 75 | "image": "../images/product_5.jpg", 76 | "image_small": "../images/product_5_small.jpg", 77 | "attribute": "Paperback", 78 | "description": "Colleen Hoover tells fan favourite Atlas’s side of the story and shares what comes next in this long-anticipated sequel to the #1 Sunday Times bestseller It Ends with Us ", 79 | "brand": "Colleen Hoover", 80 | "avgRating": 4, 81 | "ratings": 44402, 82 | "price": 7.0, 83 | "oldPrice": 14.99, 84 | "badge": "choice" 85 | }, 86 | "6": { 87 | "id": 6, 88 | "title": "SPACEBOY", 89 | "image": "../images/product_6.jpg", 90 | "image_small": "../images/product_6_small.jpg", 91 | "attribute": "Paperback", 92 | "description": "Go back to the Space Race with No.1 bestselling author David Walliams for a breathless cinematic adventure full of mystery, action, laughs and surprises ", 93 | "brand": "David Walliams", 94 | "avgRating": 5, 95 | "ratings": 877, 96 | "price": 7.0, 97 | "oldPrice": 14.99, 98 | "badge": "choice" 99 | }, 100 | "7": { 101 | "id": 7, 102 | "title": "Lessons in Chemistry", 103 | "image": "../images/product_7.jpg", 104 | "image_small": "../images/product_7_small.jpg", 105 | "attribute": "Hardcover", 106 | "description": "Chemist Elizabeth Zott is not your average woman. In fact, Elizabeth Zott would be the first to point out that there is no such thing.", 107 | "brand": "Bonnie Garmus", 108 | "avgRating": 4, 109 | "ratings": 62749, 110 | "price": 8.0, 111 | "oldPrice": 16.99 112 | }, 113 | "8": { 114 | "id": 8, 115 | "title": "2023 Guide to the Night Sky", 116 | "image": "../images/product_8.jpg", 117 | "image_small": "../images/product_8_small.jpg", 118 | "attribute": "Hardcover", 119 | "description": "From the UK’s Number One Astronomy publisher, this is the bestselling stargazing handbook to the planets, stars and constellations visible from the northern hemisphere.", 120 | "brand": "Storm Dunlop", 121 | "avgRating": 4, 122 | "ratings": 134, 123 | "price": 4.79, 124 | "oldPrice": 6.99, 125 | "badge": "choice" 126 | }, 127 | "9": { 128 | "id": 9, 129 | "title": "Fire TV Stick Lite", 130 | "image": "../images/product_9.jpg", 131 | "image_small": "../images/product_9_small.jpg", 132 | "attribute": "Streaming Device", 133 | "description": "Our most affordable Fire TV Stick—enjoy fast streaming in Full HD. Comes with Alexa Voice Remote Lite. Easy to set up, stays hidden—plug in behind your TV, turn on the TV and connect to the internet to get set up. ", 134 | "brand": "Amazon", 135 | "avgRating": 4, 136 | "ratings": 17602, 137 | "price": 34.99, 138 | "oldPrice": 40.99, 139 | "badge": "choice" 140 | }, 141 | "10": { 142 | "id": 10, 143 | "title": "BOSS Men's Prime Shirt", 144 | "image": "../images/product_10.jpg", 145 | "image_small": "../images/product_10_small.jpg", 146 | "attribute": "Polo", 147 | "description": "Shirt; BOSS; HUGO BOSS. 100% Cotton. Machine Wash. Fastening: Pull On. Collar Style: Classic. Slim Fit", 148 | "brand": "Hugo Boss", 149 | "avgRating": 3, 150 | "ratings": 10, 151 | "price": 42.95, 152 | "oldPrice": 45.0 153 | }, 154 | "11": { 155 | "id": 11, 156 | "title": "Apple 2022 10.9-inch iPad", 157 | "image": "../images/product_11.jpg", 158 | "image_small": "../images/product_11_small.jpg", 159 | "attribute": "iPad", 160 | "description": "Striking 10.9-inch Liquid Retina display with True Tone. A14 Bionic chip with 6-core CPU and 4-core GPU. 12MP Wide back camera", 161 | "brand": "Apple", 162 | "avgRating": 5, 163 | "ratings": 262, 164 | "price": 499.0, 165 | "oldPrice": 549.0, 166 | "badge": "choice" 167 | }, 168 | "12": { 169 | "id": 12, 170 | "title": "DeLonghi Nescafé Dolce Coffee Machine", 171 | "image": "../images/product_12.jpg", 172 | "image_small": "../images/product_12_small.jpg", 173 | "attribute": "Coffee Machine", 174 | "description": "Over 40 beverage varieties including Nescafe Dolce Gusto or starbucks coffees. Hot and cold drink capability for hot and cold beverages prepared with one easy move of the machine’s manual lever. Easy to clean as all the coffee grinds stay in the pods there is no mess, no fuss", 175 | "brand": "Nescafé", 176 | "avgRating": 4, 177 | "ratings": 6283, 178 | "price": 34.99, 179 | "oldPrice": 79.99, 180 | "badge": "limited" 181 | }, 182 | "13": { 183 | "id": 13, 184 | "title": "Apple iPhone 14 Pro - Deep Purple", 185 | "image": "../images/product_13.jpg", 186 | "image_small": "../images/product_13_small.jpg", 187 | "attribute": "Mobile", 188 | "description": "6.1-inch Super Retina XDR display featuring Always-On and ProMotion. Dynamic Island, a magical new way to interact with iPhone. 48MP Main camera for up to 4x greater resolution. Cinematic mode now in 4K Dolby Vision up to 30 fps", 189 | "brand": "Apple", 190 | "avgRating": 5, 191 | "ratings": 1047, 192 | "price": 1039.0, 193 | "oldPrice": 1099.0, 194 | "badge": "seller" 195 | } 196 | } 197 | -------------------------------------------------------------------------------- /public/data/search.json: -------------------------------------------------------------------------------- 1 | { 2 | "All": [ 3 | { 4 | "id": 0, 5 | "title": "No Plan B", 6 | "image": "../images/product_0.jpg", 7 | "image_small": "../images/product_0_small.jpg", 8 | "attribute": "Paperback", 9 | "description": "The gripping new Jack Reacher thriller from the No.1 bestselling authors Lee Child and Andrew Child.", 10 | "brand": "Lee Child", 11 | "avgRating": 4, 12 | "ratings": 24089, 13 | "price": 11.0, 14 | "oldPrice": 22.0, 15 | "badge": "seller" 16 | }, 17 | { 18 | "id": 1, 19 | "title": "Guinness World Records 2023", 20 | "image": "../images/product_1.jpg", 21 | "image_small": "../images/product_1_small.jpg", 22 | "attribute": "Hardcover", 23 | "brand": "Guinness World Records", 24 | "description": "The 2023 edition takes readers on a journey that's out of this world! ", 25 | "avgRating": 5, 26 | "ratings": 929, 27 | "price": 8.5, 28 | "oldPrice": 22.0, 29 | "quantity": 0, 30 | "badge": "choice" 31 | }, 32 | { 33 | "id": 2, 34 | "title": "One: Simple One-Pan Wonders", 35 | "image": "../images/product_2.jpg", 36 | "image_small": "../images/product_2_small.jpg", 37 | "attribute": "Paperback", 38 | "brand": "Jamie Oliver", 39 | "description": "Give them the simplest cookbook ever this Christmas . . . Jamie's back to basics with over 120 simple, delicious, ONE pan recipes", 40 | "avgRating": 4, 41 | "ratings": 2993, 42 | "price": 13.0, 43 | "oldPrice": 23.0, 44 | "badge": "choice" 45 | }, 46 | { 47 | "id": 3, 48 | "title": "The Bullet That Missed: (The Thursday Murder Club 3)", 49 | "image": "../images/product_3.jpg", 50 | "image_small": "../images/product_3_small.jpg", 51 | "attribute": "Paperback", 52 | "description": "Except trouble is never far away where the Thursday Murder Club is concerned. ", 53 | "brand": "Richard Osman", 54 | "avgRating": 5, 55 | "ratings": 29283, 56 | "price": 10.0, 57 | "oldPrice": 20.0 58 | }, 59 | { 60 | "id": 4, 61 | "title": "Interesting Facts For Curious Minds", 62 | "image": "../images/product_4.jpg", 63 | "image_small": "../images/product_4_small.jpg", 64 | "attribute": "Hardcover", 65 | "description": "Want to impress your friends and family with both useful, worthless but undeniably interesting facts? ", 66 | "brand": "Jordan Moore", 67 | "avgRating": 4, 68 | "ratings": 885, 69 | "price": 10.9, 70 | "oldPrice": 13.99, 71 | "badge": "limited" 72 | }, 73 | { 74 | "id": 5, 75 | "title": "It Start with Us", 76 | "image": "../images/product_5.jpg", 77 | "image_small": "../images/product_5_small.jpg", 78 | "attribute": "Paperback", 79 | "description": "Colleen Hoover tells fan favourite Atlas’s side of the story and shares what comes next in this long-anticipated sequel to the #1 Sunday Times bestseller It Ends with Us ", 80 | "brand": "Colleen Hoover", 81 | "avgRating": 4, 82 | "ratings": 44402, 83 | "price": 7.0, 84 | "oldPrice": 14.99, 85 | "badge": "choice" 86 | }, 87 | { 88 | "id": 6, 89 | "title": "SPACEBOY", 90 | "image": "../images/product_6.jpg", 91 | "image_small": "../images/product_6_small.jpg", 92 | "attribute": "Paperback", 93 | "description": "Go back to the Space Race with No.1 bestselling author David Walliams for a breathless cinematic adventure full of mystery, action, laughs and surprises ", 94 | "brand": "David Walliams", 95 | "avgRating": 5, 96 | "ratings": 877, 97 | "price": 7.0, 98 | "oldPrice": 14.99, 99 | "badge": "choice" 100 | }, 101 | { 102 | "id": 7, 103 | "title": "Lessons in Chemistry", 104 | "image": "../images/product_7.jpg", 105 | "image_small": "../images/product_7_small.jpg", 106 | "attribute": "Hardcover", 107 | "description": "Chemist Elizabeth Zott is not your average woman. In fact, Elizabeth Zott would be the first to point out that there is no such thing.", 108 | "brand": "Bonnie Garmus", 109 | "avgRating": 4, 110 | "ratings": 62749, 111 | "price": 8.0, 112 | "oldPrice": 16.99 113 | }, 114 | { 115 | "id": 8, 116 | "title": "2023 Guide to the Night Sky", 117 | "image": "../images/product_8.jpg", 118 | "image_small": "../images/product_8_small.jpg", 119 | "attribute": "Hardcover", 120 | "description": "From the UK’s Number One Astronomy publisher, this is the bestselling stargazing handbook to the planets, stars and constellations visible from the northern hemisphere.", 121 | "brand": "Storm Dunlop", 122 | "avgRating": 4, 123 | "ratings": 134, 124 | "price": 4.79, 125 | "oldPrice": 6.99, 126 | "badge": "choice" 127 | }, 128 | { 129 | "id": 9, 130 | "title": "Fire TV Stick Lite", 131 | "image": "../images/product_9.jpg", 132 | "image_small": "../images/product_9_small.jpg", 133 | "attribute": "Streaming Device", 134 | "description": "Our most affordable Fire TV Stick—enjoy fast streaming in Full HD. Comes with Alexa Voice Remote Lite. Easy to set up, stays hidden—plug in behind your TV, turn on the TV and connect to the internet to get set up. ", 135 | "brand": "Amazon", 136 | "avgRating": 4, 137 | "ratings": 17602, 138 | "price": 34.99, 139 | "oldPrice": 40.99, 140 | "badge": "choice" 141 | }, 142 | { 143 | "id": 10, 144 | "title": "BOSS Men's Prime Shirt", 145 | "image": "../images/product_10.jpg", 146 | "image_small": "../images/product_10_small.jpg", 147 | "attribute": "Polo", 148 | "description": "Shirt; BOSS; HUGO BOSS. 100% Cotton. Machine Wash. Fastening: Pull On. Collar Style: Classic. Slim Fit", 149 | "brand": "Hugo Boss", 150 | "avgRating": 3, 151 | "ratings": 10, 152 | "price": 42.95, 153 | "oldPrice": 45.0 154 | }, 155 | { 156 | "id": 11, 157 | "title": "Apple 2022 10.9-inch iPad", 158 | "image": "../images/product_11.jpg", 159 | "image_small": "../images/product_11_small.jpg", 160 | "attribute": "iPad", 161 | "description": "Striking 10.9-inch Liquid Retina display with True Tone. A14 Bionic chip with 6-core CPU and 4-core GPU. 12MP Wide back camera", 162 | "brand": "Apple", 163 | "avgRating": 5, 164 | "ratings": 262, 165 | "price": 499.0, 166 | "oldPrice": 549.0, 167 | "badge": "choice" 168 | }, 169 | { 170 | "id": 12, 171 | "title": "DeLonghi Nescafé Dolce Coffee Machine", 172 | "image": "../images/product_12.jpg", 173 | "image_small": "../images/product_12_small.jpg", 174 | "attribute": "Coffee Machine", 175 | "description": "Over 40 beverage varieties including Nescafe Dolce Gusto or starbucks coffees. Hot and cold drink capability for hot and cold beverages prepared with one easy move of the machine’s manual lever. Easy to clean as all the coffee grinds stay in the pods there is no mess, no fuss", 176 | "brand": "Nescafé", 177 | "avgRating": 4, 178 | "ratings": 6283, 179 | "price": 34.99, 180 | "oldPrice": 79.99, 181 | "badge": "limited" 182 | }, 183 | { 184 | "id": 13, 185 | "title": "Apple iPhone 14 Pro - Deep Purple", 186 | "image": "../images/product_13.jpg", 187 | "image_small": "../images/product_13_small.jpg", 188 | "attribute": "Mobile", 189 | "description": "6.1-inch Super Retina XDR display featuring Always-On and ProMotion. Dynamic Island, a magical new way to interact with iPhone. 48MP Main camera for up to 4x greater resolution. Cinematic mode now in 4K Dolby Vision up to 30 fps", 190 | "brand": "Apple", 191 | "avgRating": 5, 192 | "ratings": 1047, 193 | "price": 1039.0, 194 | "oldPrice": 1099.0, 195 | "badge": "seller" 196 | } 197 | ], 198 | "Computers": [ 199 | { 200 | "id": 11, 201 | "title": "Apple 2022 10.9-inch iPad", 202 | "image": "../images/product_11.jpg", 203 | "image_small": "../images/product_11_small.jpg", 204 | "attribute": "iPad", 205 | "description": "Striking 10.9-inch Liquid Retina display with True Tone. A14 Bionic chip with 6-core CPU and 4-core GPU. 12MP Wide back camera", 206 | "brand": "Apple", 207 | "avgRating": 5, 208 | "ratings": 262, 209 | "price": 499.0, 210 | "oldPrice": 549.0, 211 | "badge": "choice" 212 | } 213 | ], 214 | "Deals": [ 215 | { 216 | "id": 12, 217 | "title": "DeLonghi Nescafé Dolce Coffee Machine", 218 | "image": "../images/product_12.jpg", 219 | "image_small": "../images/product_12_small.jpg", 220 | "attribute": "Coffee Machine", 221 | "description": "Over 40 beverage varieties including Nescafe Dolce Gusto or starbucks coffees. Hot and cold drink capability for hot and cold beverages prepared with one easy move of the machine’s manual lever. Easy to clean as all the coffee grinds stay in the pods there is no mess, no fuss", 222 | "brand": "Nescafé", 223 | "avgRating": 4, 224 | "ratings": 6283, 225 | "price": 34.99, 226 | "oldPrice": 79.99, 227 | "badge": "limited" 228 | }, 229 | { 230 | "id": 4, 231 | "title": "Interesting Facts For Curious Minds", 232 | "image": "../images/product_4.jpg", 233 | "image_small": "../images/product_4_small.jpg", 234 | "attribute": "Hardcover", 235 | "description": "Want to impress your friends and family with both useful, worthless but undeniably interesting facts? ", 236 | "brand": "Jordan Moore", 237 | "avgRating": 4, 238 | "ratings": 885, 239 | "price": 10.9, 240 | "oldPrice": 13.99, 241 | "badge": "limited" 242 | } 243 | ], 244 | "Amazon": [ 245 | { 246 | "id": 9, 247 | "title": "Fire TV Stick Lite", 248 | "image": "../images/product_9.jpg", 249 | "image_small": "../images/product_9_small.jpg", 250 | "attribute": "Streaming Device", 251 | "description": "Our most affordable Fire TV Stick—enjoy fast streaming in Full HD. Comes with Alexa Voice Remote Lite. Easy to set up, stays hidden—plug in behind your TV, turn on the TV and connect to the internet to get set up. ", 252 | "brand": "Amazon", 253 | "avgRating": 4, 254 | "ratings": 17602, 255 | "price": 34.99, 256 | "oldPrice": 40.99, 257 | "badge": "choice" 258 | } 259 | ], 260 | "Fashion": [ 261 | { 262 | "id": 10, 263 | "title": "BOSS Men's Prime Shirt", 264 | "image": "../images/product_10.jpg", 265 | "image_small": "../images/product_10_small.jpg", 266 | "attribute": "Polo", 267 | "description": "Shirt; BOSS; HUGO BOSS. 100% Cotton. Machine Wash. Fastening: Pull On. Collar Style: Classic. Slim Fit", 268 | "brand": "Hugo Boss", 269 | "avgRating": 3, 270 | "ratings": 10, 271 | "price": 42.95, 272 | "oldPrice": 45.0 273 | } 274 | ], 275 | "Home": [ 276 | { 277 | "id": 12, 278 | "title": "DeLonghi Nescafé Dolce Coffee Machine", 279 | "image": "../images/product_12.jpg", 280 | "image_small": "../images/product_12_small.jpg", 281 | "attribute": "Coffee Machine", 282 | "description": "Over 40 beverage varieties including Nescafe Dolce Gusto or starbucks coffees. Hot and cold drink capability for hot and cold beverages prepared with one easy move of the machine’s manual lever. Easy to clean as all the coffee grinds stay in the pods there is no mess, no fuss", 283 | "brand": "Nescafé", 284 | "avgRating": 4, 285 | "ratings": 6283, 286 | "price": 34.99, 287 | "oldPrice": 79.99, 288 | "badge": "limited" 289 | } 290 | ], 291 | "Mobiles": [ 292 | { 293 | "id": 13, 294 | "title": "Apple iPhone 14 Pro - Deep Purple", 295 | "image": "../images/product_13.jpg", 296 | "image_small": "../images/product_13_small.jpg", 297 | "attribute": "Mobile", 298 | "description": "6.1-inch Super Retina XDR display featuring Always-On and ProMotion. Dynamic Island, a magical new way to interact with iPhone. 48MP Main camera for up to 4x greater resolution. Cinematic mode now in 4K Dolby Vision up to 30 fps", 299 | "brand": "Apple", 300 | "avgRating": 5, 301 | "ratings": 1047, 302 | "price": 1039.0, 303 | "oldPrice": 1099.0, 304 | "badge": "seller" 305 | } 306 | ] 307 | } 308 | --------------------------------------------------------------------------------