├── .gitignore ├── .vscode └── settings.json ├── README.md ├── jsconfig.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── App.scss ├── App.test.js ├── api │ ├── products.js │ └── utils.js ├── cart-context.js ├── components │ ├── general │ │ ├── CurrencyFormat.js │ │ ├── CurrencyFormat.scss │ │ ├── Error.js │ │ ├── Error.scss │ │ ├── Loader.js │ │ ├── Loader.scss │ │ ├── Rating.js │ │ └── Rating.scss │ ├── header │ │ ├── Account.js │ │ ├── Account.scss │ │ ├── Cart.js │ │ ├── Cart.scss │ │ ├── DeliveryLocation.js │ │ ├── DeliveryLocation.scss │ │ ├── Logo.js │ │ ├── Logo.scss │ │ ├── Orders.js │ │ ├── Orders.scss │ │ ├── Search.js │ │ ├── Search.scss │ │ ├── index.js │ │ └── index.scss │ └── product │ │ ├── AddToCart.js │ │ ├── AddToCart.scss │ │ ├── ImageSlider.js │ │ ├── ImageSlider.scss │ │ ├── Information.js │ │ └── Information.scss ├── data.json ├── images │ └── amazon-logo.png ├── index.css ├── index.js ├── logo.svg ├── pages │ ├── cart │ │ ├── CartItem.js │ │ ├── CartItem.scss │ │ ├── index.js │ │ └── index.scss │ ├── home │ │ ├── Banner.js │ │ ├── Banner.scss │ │ ├── ProductCard.js │ │ ├── ProductCard.scss │ │ ├── Products.js │ │ ├── Products.scss │ │ ├── index.js │ │ └── index.scss │ ├── login │ │ └── index.js │ └── product │ │ ├── index.js │ │ └── index.scss ├── reportWebVitals.js ├── setupTests.js ├── styles │ ├── _base.scss │ ├── _normalize.scss │ ├── _utils.scss │ └── _variables.scss └── utils.js │ └── product.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 | 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 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.enable": true, 3 | "prettier.useEditorConfig": false, 4 | "prettier.trailingComma": "all", 5 | "prettier.singleQuote": true, 6 | "editor.formatOnSave": true, 7 | "editor.defaultFormatter": "esbenp.prettier-vscode", 8 | "[javascript]": { 9 | "editor.defaultFormatter": "esbenp.prettier-vscode" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App for applications 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src" 4 | }, 5 | "include": ["src"] 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "amazon-clone-final", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@mdi/js": "^5.9.55", 7 | "@mdi/react": "^1.4.0", 8 | "@testing-library/jest-dom": "^5.11.4", 9 | "@testing-library/react": "^11.1.0", 10 | "@testing-library/user-event": "^12.1.10", 11 | "classnames": "^2.2.6", 12 | "nuka-carousel": "^4.7.5", 13 | "react": "^17.0.1", 14 | "react-dom": "^17.0.1", 15 | "react-router-dom": "^5.2.0", 16 | "react-scripts": "4.0.2", 17 | "web-vitals": "^1.0.1" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "devDependencies": { 44 | "node-sass": "^5.0.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ib-sundeep/amazon-clone/48d3b73a4433caafa1012f279bbfcfdc7306702a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Amazon 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ib-sundeep/amazon-clone/48d3b73a4433caafa1012f279bbfcfdc7306702a/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ib-sundeep/amazon-clone/48d3b73a4433caafa1012f279bbfcfdc7306702a/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 2 | 3 | import Header from './components/header'; 4 | import CartPage from './pages/cart'; 5 | import ProductPage from './pages/product'; 6 | import LoginPage from './pages/login'; 7 | import HomePage from './pages/home'; 8 | 9 | import './App.scss'; 10 | 11 | function App() { 12 | return ( 13 | 14 |
15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | ); 37 | } 38 | 39 | export default App; 40 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | @import 'styles/normalize'; 2 | 3 | @import 'styles/variables'; 4 | 5 | @import 'styles/base'; 6 | @import 'styles/utils'; 7 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/api/products.js: -------------------------------------------------------------------------------- 1 | import { apiRequest } from './utils'; 2 | 3 | function getProductsList() { 4 | return apiRequest('GET', '/products'); 5 | } 6 | 7 | function getProduct(id) { 8 | return apiRequest('GET', 'products/' + id); 9 | 10 | } 11 | 12 | // eslint-disable-next-line import/no-anonymous-default-export 13 | export default { 14 | getList: getProductsList, 15 | getProduct: getProduct 16 | }; 17 | -------------------------------------------------------------------------------- /src/api/utils.js: -------------------------------------------------------------------------------- 1 | const API_BASE = 'https://602fc537a1e9d20017af105e.mockapi.io/api/v1/'; 2 | 3 | /** 4 | * Parses JSON responses for easier consumption. 5 | * 6 | * The returned promise behaves as follows: 7 | * * For "OK" responses (2xx status codes) 8 | * * If the body has JSON, it resolves to the JSON itself 9 | * * If the body has no JSON (i.e. is empty), it resolves to null 10 | * * For all other responses, it rejects with an `Error` object that contains 11 | * the following properties: 12 | * * `isFromServer`: Set to true, indicating it is a server error 13 | * * `response`: The complete response, for reference if required 14 | * * `responseJson`: The response body pre-converted to JSON for convenience 15 | * 16 | * @param {Object} response 17 | * @returns {Promise<{}>} 18 | */ 19 | export async function parseJsonResponse(response) { 20 | let json = null; 21 | try { 22 | json = await response.json(); 23 | } catch (e) { 24 | // TODO Do something if response has no, or invalid JSON 25 | } 26 | 27 | if (response.ok) { 28 | return json; 29 | } else { 30 | const error = new Error(response.statusText); 31 | error.isFromServer = true; 32 | error.response = response; 33 | error.responseJson = json; 34 | 35 | throw error; 36 | } 37 | } 38 | 39 | /** 40 | * Performs an API request. 41 | * 42 | * @param {string} method - 'GET', 'POST' etc. 43 | * @param {string} path 44 | * @param {Object} [body] 45 | * @param {Object} [options] - `fetch` options other than `method` and `body` 46 | * @returns {Promise<{}>} As returned by {@link parseJsonResponse} 47 | */ 48 | export async function apiRequest(method, path, body = null) { 49 | const options = { method }; 50 | if (body && method !== 'GET') { 51 | options.body = JSON.stringify(body); 52 | } 53 | 54 | const finalPath = API_BASE + path; 55 | const response = await fetch(finalPath, options); 56 | 57 | return parseJsonResponse(response); 58 | } 59 | -------------------------------------------------------------------------------- /src/cart-context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { calculatePriceDetails } from 'utils.js/product'; 4 | 5 | const CartStateContext = React.createContext(); 6 | const CartDispatchContext = React.createContext(); 7 | 8 | function cartReducer(state, action) { 9 | switch (action.type) { 10 | case 'increment': { 11 | const product = action.payload; 12 | const currentEntry = state.products[product.id]; 13 | let newEntry; 14 | if (currentEntry) { 15 | newEntry = { 16 | ...currentEntry, 17 | quantity: currentEntry.quantity + 1, 18 | }; 19 | } else { 20 | newEntry = { 21 | ...product, 22 | quantity: 1, 23 | }; 24 | } 25 | 26 | const { finalPrice } = calculatePriceDetails(product.price); 27 | return { 28 | ...state, 29 | totalQuantity: state.totalQuantity + 1, 30 | totalPrice: state.totalPrice + finalPrice, 31 | products: { 32 | ...state.products, 33 | [product.id]: newEntry, 34 | }, 35 | }; 36 | } 37 | case 'decrement': { 38 | const product = action.payload; 39 | const currentEntry = state.products[product.id]; 40 | if (!currentEntry) return state; 41 | 42 | let newEntry; 43 | if (currentEntry.quantity === 1) { 44 | newEntry = null; 45 | } else { 46 | newEntry = { 47 | ...currentEntry, 48 | quantity: currentEntry.quantity - 1, 49 | }; 50 | } 51 | 52 | const { finalPrice } = calculatePriceDetails(product.price); 53 | return { 54 | ...state, 55 | totalQuantity: state.totalQuantity - 1, 56 | totalPrice: state.totalPrice - finalPrice, 57 | products: { 58 | ...state.products, 59 | [product.id]: newEntry, 60 | }, 61 | }; 62 | } 63 | default: { 64 | throw new Error(`Unhandled action type: ${action.type}`); 65 | } 66 | } 67 | } 68 | 69 | function CartProvider({ children }) { 70 | const [state, dispatch] = React.useReducer(cartReducer, { 71 | products: {}, 72 | totalQuantity: 0, 73 | totalPrice: 0, 74 | }); 75 | return ( 76 | 77 | 78 | {children} 79 | 80 | 81 | ); 82 | } 83 | 84 | function useCartState() { 85 | const context = React.useContext(CartStateContext); 86 | if (context === undefined) { 87 | throw new Error('useCountState must be used within a CountProvider'); 88 | } 89 | return context; 90 | } 91 | 92 | function useCartDispatch() { 93 | const context = React.useContext(CartDispatchContext); 94 | if (context === undefined) { 95 | throw new Error('useCountDispatch must be used within a CountProvider'); 96 | } 97 | return context; 98 | } 99 | 100 | export { CartProvider, useCartState, useCartDispatch }; 101 | -------------------------------------------------------------------------------- /src/components/general/CurrencyFormat.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from '@mdi/react'; 3 | import { mdiCurrencyInr } from '@mdi/js'; 4 | import classNames from 'classnames'; 5 | 6 | import './CurrencyFormat.scss'; 7 | 8 | const currenyCodeIconMap = { 9 | INR: mdiCurrencyInr, 10 | }; 11 | 12 | const currencyCodeLocaleMap = { 13 | INR: 'en-IN', 14 | }; 15 | 16 | function CurrencyFormat({ 17 | className, 18 | value, 19 | currencyCode, 20 | iconSize = 1, 21 | ...remainingProps 22 | }) { 23 | return ( 24 |
28 | 29 | 30 | {value.toLocaleString(currencyCodeLocaleMap[currencyCode])} 31 | 32 |
33 | ); 34 | } 35 | 36 | export default CurrencyFormat; 37 | -------------------------------------------------------------------------------- /src/components/general/CurrencyFormat.scss: -------------------------------------------------------------------------------- 1 | .currency-format { 2 | display: flex; 3 | align-items: center; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/general/Error.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './Error.scss'; 4 | 5 | function Error({ message, actionLabel = 'Try again', actionFn }) { 6 | return ( 7 |
8 |
{message}
9 | {actionFn && ( 10 | 13 | )} 14 |
15 | ); 16 | } 17 | 18 | export default Error; 19 | 20 | // => functional component 21 | // => props 22 | // => useState, useEff 23 | -------------------------------------------------------------------------------- /src/components/general/Error.scss: -------------------------------------------------------------------------------- 1 | .error { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | padding: 1rem; 8 | 9 | &__message { 10 | text-align: center; 11 | font-size: var(--h4-size); 12 | font-weight: bold; 13 | } 14 | 15 | &__button { 16 | cursor: pointer; 17 | margin-top: 1rem; 18 | background-color: var(--theme-color-1); 19 | padding: 1rem; 20 | border-radius: var(--border-radius); 21 | color: var(--light-font-color); 22 | border: none; 23 | outline: none; 24 | box-shadow: none; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/general/Loader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './Loader.scss'; 4 | 5 | function Loader({ size }) { 6 | return ( 7 |
8 |
9 |
10 | ); 11 | } 12 | 13 | export default Loader; 14 | -------------------------------------------------------------------------------- /src/components/general/Loader.scss: -------------------------------------------------------------------------------- 1 | @keyframes spin { 2 | 0% { 3 | transform: rotate(0deg); 4 | } 5 | 6 | 50% { 7 | transform: rotate(180deg); 8 | } 9 | 10 | 100% { 11 | transform: rotate(360deg); 12 | } 13 | } 14 | 15 | .loader { 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | padding: 1rem; 20 | 21 | &__icon { 22 | border-radius: 50%; 23 | animation: 360ms linear 0s infinite running spin; 24 | border: 0.5rem solid #e2e2e2; 25 | border-top-color: var(--theme-color-1); 26 | border-right-color: var(--theme-color-1); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/general/Rating.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from '@mdi/react'; 3 | import { mdiStar, mdiStarOutline } from '@mdi/js'; 4 | import classNames from 'classnames'; 5 | 6 | import './Rating.scss'; 7 | 8 | function Rating({ rating, maxRating, size = 1.2 }) { 9 | return ( 10 |
11 | {new Array(maxRating).fill(0).map((_, index) => { 12 | const isActive = rating >= index + 1; 13 | return ( 14 | 22 | ); 23 | })} 24 |
25 | ); 26 | } 27 | 28 | export default Rating; 29 | -------------------------------------------------------------------------------- /src/components/general/Rating.scss: -------------------------------------------------------------------------------- 1 | .rating { 2 | display: flex; 3 | align-items: center; 4 | 5 | &__star { 6 | margin: 0.2rem; 7 | color: #e2e2e2; 8 | 9 | &--active { 10 | color: var(--theme-color-1); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/header/Account.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from '@mdi/react'; 3 | import { mdiMenuDown } from '@mdi/js'; 4 | 5 | import './Account.scss'; 6 | 7 | function Account() { 8 | return ( 9 |
10 |
Hello, Sign in
11 |
12 | My Account 13 | 14 |
15 |
16 | ); 17 | } 18 | 19 | export default Account; 20 | -------------------------------------------------------------------------------- /src/components/header/Account.scss: -------------------------------------------------------------------------------- 1 | .account { 2 | padding: 0 1rem; 3 | cursor: pointer; 4 | 5 | &__hint { 6 | font-size: var(--h6-size); 7 | margin-bottom: 0.2rem; 8 | } 9 | 10 | &__title { 11 | font-weight: bolder; 12 | margin-right: 0.2rem; 13 | } 14 | 15 | &__arrow { 16 | color: var(--hint-light-font-color); 17 | margin-bottom: -0.5rem; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/header/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from '@mdi/react'; 3 | import { mdiCartOutline } from '@mdi/js'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | import './Cart.scss'; 7 | 8 | import { useCartState } from 'cart-context'; 9 | 10 | function Cart() { 11 | const { totalQuantity } = useCartState(); 12 | 13 | return ( 14 | 15 | 16 |
{totalQuantity}
17 | 18 | ); 19 | } 20 | 21 | export default Cart; 22 | -------------------------------------------------------------------------------- /src/components/header/Cart.scss: -------------------------------------------------------------------------------- 1 | .h-cart { 2 | padding: 0 1rem; 3 | display: flex; 4 | align-items: center; 5 | 6 | &__count { 7 | font-weight: bolder; 8 | color: var(--theme-color-1); 9 | margin-left: 0.3rem; 10 | font-size: var(--h4-size); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/header/DeliveryLocation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from '@mdi/react'; 3 | import { mdiMapMarkerOutline } from '@mdi/js'; 4 | 5 | import './DeliveryLocation.scss'; 6 | 7 | function DeliveryLocation() { 8 | return ( 9 |
10 | 15 |
16 |
Hello
17 |
Select your address
18 |
19 |
20 | ); 21 | } 22 | 23 | export default DeliveryLocation; 24 | -------------------------------------------------------------------------------- /src/components/header/DeliveryLocation.scss: -------------------------------------------------------------------------------- 1 | .delivery-location { 2 | display: flex; 3 | align-items: flex-end; 4 | padding: 1rem; 5 | 6 | &__pin { 7 | margin-right: 0.2rem; 8 | } 9 | 10 | &__hint { 11 | color: var(--hint-light-font-color); 12 | font-size: var(--h6-size); 13 | margin-bottom: 0.1rem; 14 | } 15 | 16 | &__title { 17 | font-weight: bold; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/header/Logo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import BrandLogo from 'images/amazon-logo.png'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | import './Logo.scss'; 7 | 8 | function Logo({ country = 'in' }) { 9 | return ( 10 | 11 | Amazon 12 | {country && .{country}} 13 | 14 | ); 15 | } 16 | 17 | export default Logo; 18 | -------------------------------------------------------------------------------- /src/components/header/Logo.scss: -------------------------------------------------------------------------------- 1 | .logo { 2 | padding: 1.5rem 1.5rem 0 1rem; 3 | position: relative; 4 | 5 | &__img { 6 | height: calc(var(--header-height) - 2rem); 7 | max-width: 100%; 8 | } 9 | 10 | &__country { 11 | position: absolute; 12 | font-size: var(--h6-size); 13 | right: 0; 14 | bottom: 2.2rem; 15 | font-weight: bold; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/header/Orders.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './Orders.scss'; 4 | 5 | function Orders() { 6 | return ( 7 |
8 |
Returns
9 |
& Orders
10 |
11 | ); 12 | } 13 | 14 | export default Orders; 15 | -------------------------------------------------------------------------------- /src/components/header/Orders.scss: -------------------------------------------------------------------------------- 1 | .h-orders { 2 | padding: 0 1rem; 3 | cursor: pointer; 4 | 5 | &__hint { 6 | font-size: var(--h6-size); 7 | margin-bottom: 0.2rem; 8 | } 9 | 10 | &__title { 11 | font-weight: bolder; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/header/Search.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Icon from '@mdi/react'; 3 | import { mdiMagnify } from '@mdi/js'; 4 | 5 | import './Search.scss'; 6 | 7 | const categories = [ 8 | 'All Categories', 9 | 'Deals', 10 | 'Alexa Skills', 11 | 'Amazon Devices', 12 | 'Amazon Fashion', 13 | 'Amazon Pantry', 14 | 'Appliances', 15 | 'Apps & Games', 16 | 'Baby', 17 | 'Beauty', 18 | 'Big Bazaar', 19 | 'Books', 20 | 'Car & Motorbike', 21 | 'Clothing & Accessories', 22 | 'Collectibles', 23 | 'Computers & Accessories', 24 | 'Electronics', 25 | 'Furniture', 26 | 'Garden & Outdoors', 27 | 'Gift Cards', 28 | 'Grocery & Gourmet Foods', 29 | 'Health & Personal Care', 30 | 'Home & Kitchen', 31 | 'Industrial & Scientific', 32 | 'Jewellery', 33 | 'Kindle Store', 34 | 'Luggage & Bags', 35 | 'Luxury Beauty', 36 | 'Movies & TV Shows', 37 | 'Music', 38 | 'Musical Instruments', 39 | 'Office Products', 40 | 'Pet Supplies', 41 | 'Prime Video', 42 | 'Shoes & Handbags', 43 | 'Software', 44 | 'Sports, Fitness & Outdoors', 45 | 'Tools & Home Improvement', 46 | 'Toys & Games', 47 | 'Under ₹500', 48 | 'Video Games', 49 | 'Watches', 50 | ]; 51 | 52 | function Search() { 53 | const [category, setCategory] = useState(0); 54 | 55 | return ( 56 |
57 | 68 | 69 | 72 |
73 | ); 74 | } 75 | 76 | export default Search; 77 | -------------------------------------------------------------------------------- /src/components/header/Search.scss: -------------------------------------------------------------------------------- 1 | .search { 2 | display: flex; 3 | align-items: stretch; 4 | flex: 1 0 0; 5 | margin: 1rem 1rem; 6 | border-radius: var(--border-radius); 7 | overflow: hidden; 8 | 9 | select, 10 | button, 11 | input { 12 | border: none; 13 | outline: none; 14 | box-shadow: none; 15 | padding: 0.8rem; 16 | } 17 | 18 | &__select { 19 | display: inline-block; 20 | background-color: #f2f2f2; 21 | border-right: 0.1rem solid #e2e2e2 !important; 22 | width: 14rem; 23 | font-size: var(--h6-size); 24 | text-align: center; 25 | } 26 | 27 | &__input { 28 | display: inline-block; 29 | background-color: #ffffff; 30 | color: var(--default-font-color); 31 | font-size: var(--h5-size); 32 | flex: 1 0 0; 33 | } 34 | 35 | &__button { 36 | cursor: pointer; 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | background-color: var(--theme-color-1); 41 | border-top-right-radius: var(--border-radius); 42 | border-bottom-right-radius: var(--border-radius); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/header/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './index.scss'; 4 | 5 | import DeliveryLocation from './DeliveryLocation'; 6 | import Logo from './Logo'; 7 | import Search from './Search'; 8 | import Account from './Account'; 9 | import Cart from './Cart'; 10 | import Orders from './Orders'; 11 | 12 | function Header() { 13 | return ( 14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | ); 25 | } 26 | 27 | export default Header; 28 | -------------------------------------------------------------------------------- /src/components/header/index.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | height: var(--header-height); 3 | background-color: var(--theme-color-2); 4 | color: var(--light-font-color); 5 | position: fixed; 6 | width: 100%; 7 | z-index: 100; 8 | 9 | &__container { 10 | padding: 0 1rem; 11 | display: flex; 12 | align-items: center; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/product/AddToCart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from '@mdi/react'; 3 | import { mdiMinus, mdiPlus } from '@mdi/js'; 4 | 5 | import './AddToCart.scss'; 6 | 7 | import { useCartDispatch, useCartState } from 'cart-context'; 8 | 9 | function AddToCard({ product }) { 10 | const { products } = useCartState(); 11 | const dispatch = useCartDispatch(); 12 | 13 | const cartEntry = products[product.id]; 14 | 15 | if (cartEntry) { 16 | return ( 17 |
18 | 24 |
{cartEntry.quantity}
25 | 31 |
32 | ); 33 | } else { 34 | return ( 35 | 41 | ); 42 | } 43 | } 44 | 45 | export default AddToCard; 46 | -------------------------------------------------------------------------------- /src/components/product/AddToCart.scss: -------------------------------------------------------------------------------- 1 | .add-to-cart { 2 | display: inline-flex; 3 | align-items: stretch; 4 | border: 0.1rem solid #e2e2e2; 5 | 6 | &__action { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | background-color: var(--theme-color-1); 11 | padding: 0.5rem 1rem; 12 | cursor: pointer; 13 | border: none; 14 | outline: none; 15 | box-shadow: none; 16 | } 17 | 18 | &__quantity { 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | padding: 0.5rem; 23 | font-weight: bold; 24 | min-width: 3rem; 25 | } 26 | } 27 | 28 | .add-to-cart-button { 29 | padding: 0.5rem 1rem; 30 | background-color: var(--theme-color-1); 31 | cursor: pointer; 32 | border: 0.1rem solid #e2e2e2; 33 | outline: none; 34 | box-shadow: none; 35 | font-weight: bold; 36 | } 37 | -------------------------------------------------------------------------------- /src/components/product/ImageSlider.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | 3 | import './ImageSlider.scss'; 4 | 5 | function ImageSlider({ product }) { 6 | const [images, setImages] = useState([]); 7 | const [image, setImage] = useState(''); 8 | useEffect( 9 | function () { 10 | setImages(product.images); 11 | if (product.images) { 12 | setImage(product.images[0]); 13 | } else { 14 | setImage(''); 15 | } 16 | }, 17 | [product], 18 | ); 19 | 20 | const imageClick = (src) => { 21 | setImage(src); 22 | }; 23 | return ( 24 |
25 |
26 |
    27 | {images && 28 | images.map((image, i) => ( 29 |
  • { 33 | imageClick(image); 34 | }} 35 | > 36 | {product.title} 37 |
    • 38 | ))} 39 |
40 |
41 |
42 |
43 | {product.title} 44 |
45 |
46 |
47 | ); 48 | } 49 | 50 | export default ImageSlider; 51 | -------------------------------------------------------------------------------- /src/components/product/ImageSlider.scss: -------------------------------------------------------------------------------- 1 | .slider { 2 | display: flex; 3 | 4 | &__listing { 5 | list-style-type: none; 6 | } 7 | 8 | &__list { 9 | cursor: pointer; 10 | padding: 0 0rem 1rem 1rem; 11 | 12 | img { 13 | width: 6rem; 14 | height: 6rem; 15 | object-fit: contain; 16 | object-position: center; 17 | border: 1px solid #a2a6ac; 18 | border-radius: 2px; 19 | 20 | &:hover { 21 | border-color: #e77600; 22 | } 23 | } 24 | } 25 | 26 | &__right { 27 | padding: 2rem; 28 | img { 29 | width: 60rem; 30 | height: 60rem; 31 | object-fit: contain; 32 | object-position: center; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/product/Information.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Information.scss'; 3 | import Rating from 'components/general/Rating'; 4 | import { calculatePriceDetails } from 'utils.js/product'; 5 | import CurrencyFormat from 'components/general/CurrencyFormat'; 6 | import AddToCard from 'components/product/AddToCart'; 7 | 8 | function Information({ product }) { 9 | const { finalPrice, basePrice } = calculatePriceDetails( 10 | product.price, 11 | ); 12 | return ( 13 | <> 14 | {product && ( 15 |
16 |
{product.title}
17 |
Brand: {product.category}
18 | {product.rating && ( 19 |
20 | 21 |
{product.rating.count} ratings
22 |
23 | )} 24 | 25 | {product.price && ( 26 |
27 |
28 | M.R.P. : 29 | 34 |
35 |
36 | Price. : 37 | 42 |
43 |
44 | You Save : 45 | {product.price.discount} 46 |
47 |
48 | )} 49 | 50 | 51 | 52 | 53 |
54 | {product.specs && 55 | product.specs.map((spec, i) => ( 56 |
57 | {spec.name} : {spec.value} 58 |
59 | ))} 60 |
61 | 62 |
63 |
About this item
64 |
    65 | {product.features && 66 | product.features.map((feature, i) => ( 67 |
  • 68 | {feature} 69 |
    • 70 | ))} 71 |
72 |
73 |
74 | )} 75 | 76 | ); 77 | } 78 | 79 | export default Information; 80 | -------------------------------------------------------------------------------- /src/components/product/Information.scss: -------------------------------------------------------------------------------- 1 | .information { 2 | padding: 2rem 0 0 0; 3 | &__header { 4 | font-size: var(--h3-size); 5 | font-weight: bold; 6 | } 7 | 8 | &__category { 9 | color: var(--link-color); 10 | font-size: var(--h6-size); 11 | } 12 | 13 | &__label { 14 | color: var(--hint-font-color); 15 | font-size: var(--h6-size); 16 | } 17 | 18 | &__price { 19 | display: flex; 20 | } 21 | 22 | &__specs { 23 | padding-top: 2rem; 24 | } 25 | 26 | &__features { 27 | padding-top: 2rem; 28 | } 29 | 30 | &__rating { 31 | display: flex; 32 | padding: 0.5rem 0; 33 | border-bottom: 1px solid var(--border-color); 34 | } 35 | 36 | &__pricing { 37 | padding: 1rem 0 2rem 2rem; 38 | } 39 | 40 | &__spec-header { 41 | font-size: var(--h4-size); 42 | font-weight: bold; 43 | } 44 | 45 | &__rating-label { 46 | color: var(--link-color); 47 | padding-left: 1rem; 48 | } 49 | } 50 | .strikethrough { 51 | text-decoration: line-through; 52 | } 53 | -------------------------------------------------------------------------------- /src/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "1", 4 | "title": "TP-Link Archer C6 Gigabit MU-MIMO Wireless Router", 5 | "category": "Routers", 6 | "price": { 7 | "currency": "INR", 8 | "value": 4999, 9 | "discount": 55 10 | }, 11 | "brand": "TP Link", 12 | "images": [ 13 | "https://images-na.ssl-images-amazon.com/images/I/51NOjinGjrL._SX679_.jpg", 14 | "https://images-na.ssl-images-amazon.com/images/I/51%2BAGYLfveL._SX679_.jpg", 15 | "https://images-na.ssl-images-amazon.com/images/I/51xvX18fJAL._SX679_.jpg", 16 | "https://images-na.ssl-images-amazon.com/images/I/615zlpg1EKL._SX679_.jpg", 17 | "https://images-na.ssl-images-amazon.com/images/I/51ppa5rxMHL._SX679_.jpg", 18 | "https://images-na.ssl-images-amazon.com/images/I/518dL4MqFZL._SX679_.jpg" 19 | ], 20 | "features": [ 21 | "Dual Band WiFi speed —— Simultaneous 2.4GHz 300 Mb…l available bandwidth; supports 802.11ac standard", 22 | "Ultimate Range Wi-Fi —— 4 external antennas and on… stable wireless connections and optimal coverage", 23 | "Qualcomm Chipset —— High-Performance Chipset provides an excellent connection experience", 24 | "MU-MIMO —— MU-MIMO achieves 2X efficiency by communicating with up to 2 devices at once", 25 | "Gigabit Ports —— With one Gigabit WAN port and fou… wired devices to the Archer C6 and get impressed", 26 | "Access Point Mode —— Supports Access Point mode to create a new Wi-Fi access point", 27 | "Easy setup —— Easy network management at your fingertips with TP-Link Tether", 28 | "Support One Mesh function, by connecting different…seamless Wi-Fi connection with the same wifi name", 29 | "Worry-free customer support — For other installati…00 2094 168 or write us at support.in@tp-link.com" 30 | ], 31 | "specs": [], 32 | "rating": { 33 | "count": 1945, 34 | "value": 4 35 | } 36 | }, 37 | { 38 | "id": "2", 39 | "title": "Apple MacBook Pro", 40 | "category": "Laptops", 41 | "price": { 42 | "currency": "INR", 43 | "value": 117900, 44 | "discount": 11 45 | }, 46 | "brand": "Apple", 47 | "images": [ 48 | "https://images-na.ssl-images-amazon.com/images/I/71YRSVXhgQL._SX679_.jpg", 49 | "https://images-na.ssl-images-amazon.com/images/I/71Ztc9lofJL._SX679_.jpg", 50 | "https://images-na.ssl-images-amazon.com/images/I/81mq%2BcwSDwL._SX679_.jpg", 51 | "https://images-na.ssl-images-amazon.com/images/I/71EVEyqBwJL._SX679_.jpg", 52 | "https://images-na.ssl-images-amazon.com/images/I/71LY-aeAEnL._SX679_.jpg" 53 | ], 54 | "features": [ 55 | "Eighth-generation quad-core Intel Core i5 processor", 56 | "Brilliant Retina display with True Tone technology", 57 | "Backlit Magic Keyboard", 58 | "Touch Bar and Touch ID  ", 59 | "Intel Iris Plus Graphics 645", 60 | "Ultra-fast SSD", 61 | "Two Thunderbolt 3 (USB-C) ports", 62 | "Up to 10 hours of battery life", 63 | "802.11ac Wi-Fi", 64 | "Force Touch trackpad" 65 | ], 66 | "specs": [ 67 | { 68 | "name": "Brand", 69 | "value": "Apple" 70 | }, 71 | { 72 | "name": "Operating System", 73 | "value": "MacOS 10.15 Catalina" 74 | }, 75 | { 76 | "name": "CPU Manufacturer", 77 | "value": "Intel" 78 | }, 79 | { 80 | "name": "Screen Size", 81 | "value": "13 Inches" 82 | }, 83 | { 84 | "name": "Computer Memory Size", 85 | "value": "8 GB" 86 | } 87 | ], 88 | "rating": { 89 | "count": 4156, 90 | "value": 5 91 | } 92 | }, 93 | { 94 | "id": "3", 95 | "title": "Voltas 1.4 Ton 5 Star Inverter Adjustable Split AC", 96 | "category": "Air Conditioners", 97 | "price": { 98 | "currency": "INR", 99 | "value": 68990, 100 | "discount": 49 101 | }, 102 | "brand": "Voltas", 103 | "images": [ 104 | "https://images-na.ssl-images-amazon.com/images/I/71XKkmpD2FL._SX679_.jpg", 105 | "https://images-na.ssl-images-amazon.com/images/I/813iYIldZLL._SX679_.jpg", 106 | "https://images-na.ssl-images-amazon.com/images/I/71CIopvPlPL._SX679_.jpg", 107 | "https://images-na.ssl-images-amazon.com/images/I/71CIopvPlPL._SX679_.jpg", 108 | "https://images-na.ssl-images-amazon.com/images/I/61eEIsK3cPL._SX679_.jpg", 109 | "https://images-na.ssl-images-amazon.com/images/I/61hBL0Ak5EL._SX679_.jpg", 110 | "https://images-na.ssl-images-amazon.com/images/I/71tcg3dBJUL._SX679_.jpg" 111 | ], 112 | "features": [ 113 | "Adjustable Split AC with inverter compressor: Variable speed compressor which adjusts power depending on heat load. It is most energy efficient and comes with 2 Adjustable modes to choose within different tonnages for different cooling needs", 114 | "Capacity: 1.4 ton ton. Suitable for medium sized rooms (111 to 150 sq ft)", 115 | "Energy Rating: 5 Star|Best in class efficiency|Annual Energy Consumption: 830.48 units|ISEER Value: 4.51", 116 | "Manufacturer Warranty : 1 year on product, 4 years on compressor", 117 | "Copper Condenser Coil: Better cooling and performance with requires low maintenance", 118 | "Key Features: 2-Mode Adjustable cooling (1 Ton & 1.4 Ton); Noise level: 46 db; High Ambient Cooling: 50 Degree celsius", 119 | "Special Features: Stabilizer Free Operation, Advanced Air Purification, Superdry Mode, Anti Dust Filter, 4 Way Auto Louver, Steady Cool Compressor, Low Frequency Torque Control", 120 | "Refrigerant type: R-32 . Environment friendly - no ozone depletion potential & low global warming potential", 121 | "IDU Net Dimension: 24.2 x 99 x 31.5", 122 | "Included in the box: Indoor Unit, Outdoor Unit, Remote Control, User manual, Warranty Card." 123 | ], 124 | "specs": [], 125 | "rating": { 126 | "count": 8143, 127 | "value": 3 128 | } 129 | }, 130 | { 131 | "id": "4", 132 | "title": "IFB 17 L Solo Microwave Oven", 133 | "category": "Ovens", 134 | "price": { 135 | "currency": "INR", 136 | "value": 6190, 137 | "discount": 18 138 | }, 139 | "brand": "IFB", 140 | "images": [ 141 | "https://images-na.ssl-images-amazon.com/images/I/81hN9SfFWEL._SX679_.jpg", 142 | "https://images-na.ssl-images-amazon.com/images/I/71WDneSY%2BTL._SX679_.jpg", 143 | "https://images-na.ssl-images-amazon.com/images/I/71guEj9hUDL._SX679_.jpg", 144 | "https://images-na.ssl-images-amazon.com/images/I/71dN-i5-79L._SX679_.jpg", 145 | "https://images-na.ssl-images-amazon.com/images/I/71rXoP6rGvL._SX679_.jpg", 146 | "https://images-na.ssl-images-amazon.com/images/I/81E9bQ3LUoL._SX679_.jpg" 147 | ], 148 | "features": [ 149 | "17L Capacity:Suitable for bachelors & small families;Solo: Can be used for reheating, defrosting and cooking", 150 | "Warranty: 1 year on product and 3 years on magnetron and cavity", 151 | "Brand does not provide starter kit with this product", 152 | "Control: jog Dials that are easy to use with a long life", 153 | "Special features: 3 auto cook menu options", 154 | "Also included in the box: Warranty card, user manual" 155 | ], 156 | "specs": [ 157 | { 158 | "name": "Model Name", 159 | "value": "17PM-MEC1" 160 | }, 161 | { 162 | "name": "Brand", 163 | "value": "IFB" 164 | }, 165 | { 166 | "name": "Colour", 167 | "value": "White" 168 | }, 169 | { 170 | "name": "Human Interface Input", 171 | "value": "Dial" 172 | }, 173 | { 174 | "name": "Installation Type", 175 | "value": "Countertop" 176 | } 177 | ], 178 | "rating": { 179 | "count": 7930, 180 | "value": 4 181 | } 182 | }, 183 | { 184 | "id": "5", 185 | "title": "Samsung Galaxy M31s", 186 | "category": "Mobile", 187 | "price": { 188 | "currency": "INR", 189 | "value": 22999, 190 | "discount": 15 191 | }, 192 | "brand": "Samsung", 193 | "images": [ 194 | "https://images-na.ssl-images-amazon.com/images/I/61d-phh4GfL._SY879_.jpg", 195 | "https://images-na.ssl-images-amazon.com/images/I/61MMMHnfxEL._SY879_.jpg", 196 | "https://images-na.ssl-images-amazon.com/images/I/61Cl1ytOA9L._SY879_.jpg", 197 | "https://images-na.ssl-images-amazon.com/images/I/61OavvFAYqL._SY879_.jpg", 198 | "https://images-na.ssl-images-amazon.com/images/I/61IhA2nsCFL._SY879_.jpg", 199 | "https://images-na.ssl-images-amazon.com/images/I/41KEW5zgeCL._SY879_.jpg" 200 | ], 201 | "features": [ 202 | "Quad camera setup - 64MP (F1.8) main camera + 12MP (F2.2) ultra wide camera + 5MP (F2.4) depth camera + 5MP (F2.4) macro camera | 32MP (F2.2) front camera", 203 | "16.4 centimeters (6.5-inch) super Amoled - Infinity-O display, FHD+ capacitive multi-touch touchscreen with 1080 x 2400 pixels resolution, 407 ppi pixel density and Contrast Ratio: 78960:1", 204 | "Memory, Storage & SIM: 6GB RAM, 128GB internal memory expandable up to 512GB | Dual SIM (nano+nano) dual-standby (4G+4G)", 205 | "Android v10.0 operating system with 1.7GHz+2.3GHz Exynos 9611 octa core processor", 206 | "6000mAH lithium-ion battery with 5x fast charge | 25W Type-C fast charger in the box", 207 | "1 year manufacturer warranty for device and 6 months manufacturer warranty for in-box accessories including batteries from the date of purchase", 208 | "Box also includes: Travel adapter, USB Type-C to Type-C Cable, ejection pin and user manual", 209 | "Fast face unlock and fingerprint sensor | Dual SIM (nano+nano) with dual standby and dual VoLTE, Dedicated Sim slot" 210 | ], 211 | "specs": [], 212 | "rating": { 213 | "count": 4192, 214 | "value": 4 215 | } 216 | }, 217 | { 218 | "id": "6", 219 | "title": "Mi TV 4A PRO 108 cm", 220 | "category": "TV", 221 | "price": { 222 | "currency": "INR", 223 | "value": 25990, 224 | "discount": 4 225 | }, 226 | "brand": "MI", 227 | "images": [ 228 | "https://images-na.ssl-images-amazon.com/images/I/710rArA2OPL._SX679_.jpg", 229 | "https://images-na.ssl-images-amazon.com/images/I/71934SolopL._SY879_.jpg", 230 | "https://images-na.ssl-images-amazon.com/images/I/71sR3Lui0QL._SX679_.jpg", 231 | "https://images-na.ssl-images-amazon.com/images/I/81rONKWm24L._SX679_.jpg", 232 | "https://images-na.ssl-images-amazon.com/images/I/71EVyyOn%2BHL._SX679_.jpg", 233 | "https://images-na.ssl-images-amazon.com/images/I/71UWQtowtVL._SX679_.jpg" 234 | ], 235 | "features": [ 236 | "Resolution : Full HD (1920x1080) | Refresh Rate: 60 hertz", 237 | "Connectivity: 3 HDMI ports to connect set top box, Blu Ray players, gaming console | 3 USB ports to connect hard drives and other USB devices", 238 | "Sound: 20 Watts Output | DTS-HD sound", 239 | "Smart TV Features :Built-In Wi-Fi | PatchWall | Netflix | Prime Video | Disney+Hotstar and more | Android TV 9.0 | Google Assistant | Data Saver", 240 | "Display : LED Panel | Vivid Picture engine", 241 | "Warranty Information: 1 year warranty on product and 1 year extra on Panel", 242 | "Installation/Wall mounting/demo will be arranged by Amazon Home Services or Xiaomi service partner. For more information, please call Mi support on 1800-103-6286 | Wall Mount is not included in the box and will be charged extra at the time of installation", 243 | "Easy returns: This product is eligible for replacement within 10 days of delivery in case of any product defects, damage or features not matching the description provided" 244 | ], 245 | "specs": [], 246 | "rating": { 247 | "count": 7471, 248 | "value": 4 249 | } 250 | }, 251 | { 252 | "id": "7", 253 | "title": "Sony HT-S20R 5.1ch Dolby Digital Soundbar Home Theatre System", 254 | "category": "Speakers", 255 | "price": { 256 | "currency": "INR", 257 | "value": "19990", 258 | "discount": 25 259 | }, 260 | "brand": "Ball", 261 | "images": [ 262 | "https://images-na.ssl-images-amazon.com/images/I/71%2Bs6K1eovL._SX679_.jpg", 263 | "https://images-na.ssl-images-amazon.com/images/I/716Oew8ULNL._SX679_.jpg", 264 | "https://images-na.ssl-images-amazon.com/images/I/61xdnSRoGJL._SX679_.jpg", 265 | "https://images-na.ssl-images-amazon.com/images/I/71-pq-88U0L._SX679_.jpg", 266 | "https://images-na.ssl-images-amazon.com/images/I/81xCZtJT2XL._SX679_.jpg", 267 | "https://images-na.ssl-images-amazon.com/images/I/81VumirUshL._SX679_.jpg" 268 | ], 269 | "features": [ 270 | "5.1channel Soundbar", 271 | "Bluetooth connectivity for wireless audio streaming", 272 | "USB Audio Playback", 273 | "Installation: Brand will contact for installation for this product once delivered. Contact Sony for assistance @ 18001037799 and provide product's model name as well as seller's details mentioned on the invoice" 274 | ], 275 | "specs": [], 276 | "rating": { 277 | "count": 3756, 278 | "value": 3 279 | } 280 | }, 281 | { 282 | "id": "8", 283 | "title": "Canon EOS M50 24.1MP Mirrorless Camera", 284 | "category": "Camera", 285 | "price": { 286 | "currency": "INR", 287 | "value": 61785, 288 | "discount": 9 289 | }, 290 | "brand": "Canon", 291 | "images": [ 292 | "https://images-na.ssl-images-amazon.com/images/I/813SEryW1SL._SX679_.jpg", 293 | "https://images-na.ssl-images-amazon.com/images/I/81j0d8pNBFL._SX679_.jpg", 294 | "https://images-na.ssl-images-amazon.com/images/I/81fdRep8ucL._SX679_.jpg", 295 | "https://images-na.ssl-images-amazon.com/images/I/81xIqFQjUYL._SX679_.jpg", 296 | "https://images-na.ssl-images-amazon.com/images/I/61kUhfFuUkL._SX679_.jpg" 297 | ], 298 | "features": [ 299 | "Product 1: Sensor: APS-C CMOS sensor with 24.1 MP (high resolution for large prints and image cropping)", 300 | "Product 1: ISO: 100-25600  sensitivity range (critical for obtaining grain-free pictures, especially in low light)", 301 | "Product 1: Image Processor: DIGIC 8 with 143 autofocus points (important for speed and accuracy of autofocus and burst photography)", 302 | "Product 1: Video Resolution: 4K video with fully manual control and selectable frame rates (excellent for precision and high-quality video work)", 303 | "Product 2: Make sure this fits by entering your model number.", 304 | "Product 2: Shot speeds up to 60MB/s*, transfer speeds up to 150MB/s* and other factors. 1Mb=1, 000, 000 bytes. X = 150Kb/sec.", 305 | "Product 2: Perfect for shooting 4K UHD video) and sequential burst mode photography", 306 | "Product 2: Capture uninterrupted video with UHS speed Class 3 (U3) and video Speed Class 30 (v30)(2)" 307 | ], 308 | "specs": [], 309 | "rating": { 310 | "count": 2121, 311 | "value": 4 312 | } 313 | }, 314 | { 315 | "id": "9", 316 | "title": "TP-Link LB110 Wi-Fi SmartLight 10W", 317 | "category": "Smart Light", 318 | "price": { 319 | "currency": "INR", 320 | "value": 2999, 321 | "discount": 14 322 | }, 323 | "brand": "TP Link", 324 | "images": [ 325 | "https://images-na.ssl-images-amazon.com/images/I/21UWhFAM0uL.jpg", 326 | "https://images-na.ssl-images-amazon.com/images/I/51UFif-KbPL._SY879_.jpg", 327 | "https://images-na.ssl-images-amazon.com/images/I/61DkhFWUW9L._SX679_.jpg", 328 | "https://images-na.ssl-images-amazon.com/images/I/81wcm%2B51XJL._SX679_.jpg", 329 | "https://images-na.ssl-images-amazon.com/images/I/713j6TvkK8L._SX679_.jpg", 330 | "https://images-na.ssl-images-amazon.com/images/I/811Af-8LVuL._SX679_.jpg" 331 | ], 332 | "features": [ 333 | "Manage Remotely – Control your lights from anywhere with your tablet or smartphone using the free Kasa app (iOS, Android)", 334 | "Dimmable Light – Adjust brightness to suit your mood", 335 | "Voice Control – Pair to Amazon Alexa to enable voice control", 336 | "Monitor Power – Track real-time energy used to stay informed", 337 | "Save Energy – Reduce energy use up to 80% without brightness or quality loss compared to a 60W incandescent bulb", 338 | "No Hub Required – Connect the bulb to your Wi-Fi at home" 339 | ], 340 | "specs": [], 341 | "rating": { 342 | "count": 8594, 343 | "value": 4 344 | } 345 | }, 346 | { 347 | "id": "10", 348 | "title": "Samsung 6.5 kg Fully-Automatic Top Loading Washing Machine", 349 | "category": "Washing Maching", 350 | "price": { 351 | "currency": "INR", 352 | "value": 16800, 353 | "discount": 14 354 | }, 355 | "brand": "Samsung", 356 | "images": [ 357 | "https://images-na.ssl-images-amazon.com/images/I/51QmQjHQASL._SX679_.jpg", 358 | "https://images-na.ssl-images-amazon.com/images/I/613b9IdBr0L._SX679_.jpg", 359 | "https://images-na.ssl-images-amazon.com/images/I/71bJ8Zn8zFL._SX679_.jpg", 360 | "https://images-na.ssl-images-amazon.com/images/I/71tlart4XFL._SX679_.jpg", 361 | "https://images-na.ssl-images-amazon.com/images/I/71nz2h5uIdL._SX679_.jpg", 362 | "https://images-na.ssl-images-amazon.com/images/I/71g3lps0Y%2BL._SX679_.jpg" 363 | ], 364 | "features": [ 365 | "Fully-automatic top load washing machine: Affordable with great wash quality, Easy to use", 366 | "Capacity 6.5 Kg: Suitable for families with 3 to 4 members", 367 | "Product Warranty: 2 years comprehensive warranty on product and 2 years on motor", 368 | "RPM 680 : Higher spin speeds helps in faster drying", 369 | "6 Wash Programs : Normal, Quick wash, Delicates, Soak + Normal, Energy Saving, Eco Tub Clean", 370 | "Special Features - Stylish design, Intuitive LED control panel, Centre Jet Technology for powerful washing, Monsoon mode for Indian specific use, Air turbo, Auto restart, Water level selector, Child lock safety, Power Filtration with magic lint filter, Tempered glass window, Diamond Drum for gentle fabric care", 371 | "In the box componenets : Washing Machine, Hose Drain, Hose Inlet, Warranty Card, User Manual, Shutter (Rat Mesh), Clip Ring, Screw Fitting" 372 | ], 373 | "specs": [], 374 | "rating": { 375 | "count": 9508, 376 | "value": 4 377 | } 378 | }, 379 | { 380 | "id": "11", 381 | "title": "Samsung 253L 3 Star Inverter Frost Free Double Door Refrigerator", 382 | "category": "Refrigerator", 383 | "price": { 384 | "currency": "INR", 385 | "value": 28990, 386 | "discount": 19 387 | }, 388 | "brand": "Samsung", 389 | "images": [ 390 | "https://images-na.ssl-images-amazon.com/images/I/71WdrLib1GL._SY879_.jpg", 391 | "https://images-na.ssl-images-amazon.com/images/I/81ckXJGNRpL._SY879_.jpg", 392 | "https://images-na.ssl-images-amazon.com/images/I/61ysDeam3aL._SY879_.jpg", 393 | "https://images-na.ssl-images-amazon.com/images/I/81DPGNfFv4L._SY879_.jpg", 394 | "https://images-na.ssl-images-amazon.com/images/I/81mj7RTMkyL._SY879_.jpg", 395 | "https://images-na.ssl-images-amazon.com/images/I/61eVJ3IL87L._SX679_.jpg" 396 | ], 397 | "features": [ 398 | "Frost Free, Double Door: auto defrost to stop ice-build up", 399 | "Capacity 253 liters: suitable for families with 2 to 3 members and bachelors", 400 | "Energy rating 3 Star : high Energy Efficiency", 401 | "Manufacturer warranty: 1 year on product, 10 years on compressor", 402 | "Digital Inverter Compressor : automatic adjustment of speed in response to cooling demand, quieter operation and uses less power", 403 | "Shelf type: spill proof toughened glass. The compressor even operates at 50°C", 404 | "Inside box: 1 unit Refrigerator & 1 unit user manual", 405 | "Spl. Features: voltage range : 100V - 300V | stabilizer free operation | coolpack & coolwall | freshroom | digital display | deodorizer" 406 | ], 407 | "specs": [], 408 | "rating": { 409 | "count": 8463, 410 | "value": 4 411 | } 412 | }, 413 | { 414 | "id": "12", 415 | "title": "LG 108 cm (43 inches) Full HD LED Smart TV", 416 | "category": "TV", 417 | "price": { 418 | "currency": "INR", 419 | "value": 40990, 420 | "discount": 27 421 | }, 422 | "brand": "LG", 423 | "images": [ 424 | "https://images-na.ssl-images-amazon.com/images/I/7173oa2fxXL._SX679_.jpg", 425 | "https://images-na.ssl-images-amazon.com/images/I/61QY6jFVXqL._SX679_.jpg", 426 | "https://images-na.ssl-images-amazon.com/images/I/71qklg0Uz8L._SX679_.jpg", 427 | "https://images-na.ssl-images-amazon.com/images/I/71vLUzEOkTL._SX679_.jpg", 428 | "https://images-na.ssl-images-amazon.com/images/I/61cn%2BcHnUcL._SX679_.jpg", 429 | "https://images-na.ssl-images-amazon.com/images/I/51RdUbNYUgL._SX679_.jpg" 430 | ], 431 | "features": [ 432 | "Resolution: Full HD (1920 x 1080) | Refresh Rate: 50 hertz", 433 | "Connectivity: 2 HDMI ports to connect set top box, Blu Ray players, gaming console | 1 USB ports to connect hard drives and other USB devices", 434 | "Sound: 20 Watts Output | 2.0 Ch Speaker| DTS Virtual:X | Clear Voice III | Sound Type: Down Firing | Optical Sound Sync", 435 | "Smart TV Features: WebOS Smart TV, Unlimited OTT App Support, LG Content Store, Home Dashboard, Mini TV Browser, Cloud Phots & Videos, Multi-Tasking, Screen Mirroring, Office 365, Wi-Fi", 436 | "Display: Active HDR | Display Type: Flat | BackLight Module: Slim LED", 437 | "Warranty Information: 1 Year LG India Comprehensive Warranty and additional 1 year Warranty is applicable on panel/module from the date of purchase", 438 | "Installation: For requesting installation/wall mounting/demo of this product once delivered, please directly call LG support on 1800 180 9999/1800 315 9999 and provide product's model name as well as seller's details mentioned on the invoice", 439 | "Easy returns: This product is eligible for replacement within 10 days of delivery in case of any product defects, damage or features not matching the description provided" 440 | ], 441 | "specs": [], 442 | "rating": { 443 | "count": 903, 444 | "value": 4 445 | } 446 | }, 447 | { 448 | "id": "13", 449 | "title": "Amazon Brand - Symbol Men's Regular Fit Polo Shirt", 450 | "category": "Tshirt", 451 | "price": { 452 | "currency": "INR", 453 | "value": 399, 454 | "discount": 2 455 | }, 456 | "brand": "Amazon", 457 | "images": [ 458 | "https://images-na.ssl-images-amazon.com/images/I/81VZO6P3jpL._UY879_.jpg", 459 | "https://images-na.ssl-images-amazon.com/images/I/816ZaMDW7PL._UY879_.jpg", 460 | "https://images-na.ssl-images-amazon.com/images/I/91s0jmcnQuL._UY879_.jpg", 461 | "https://images-na.ssl-images-amazon.com/images/I/71s4fURW5gL._UY879_.jpg" 462 | ], 463 | "features": [ 464 | "Care Instructions: Hand Wash Only", 465 | "Fit Type: Regular Fit", 466 | "Color:Bossa Nova", 467 | "60% Polyester and 40% Cotton", 468 | "Regular fit", 469 | "Half sleeve", 470 | "Nehru/Mandarin collar", 471 | "Hand wash" 472 | ], 473 | "specs": [], 474 | "rating": { 475 | "count": 6018, 476 | "value": 3 477 | } 478 | }, 479 | { 480 | "id": "14", 481 | "title": "Puma Unisex-Adult Sneakers Running Shoe", 482 | "category": "Shoes", 483 | "price": { 484 | "currency": "INR", 485 | "value": 3599, 486 | "discount": 23 487 | }, 488 | "brand": "Puma", 489 | "images": [ 490 | "https://images-na.ssl-images-amazon.com/images/I/71IiyEyPv6L._UY695_.jpg", 491 | "https://images-na.ssl-images-amazon.com/images/I/81q27RyrHAL._UY695_.jpg", 492 | "https://images-na.ssl-images-amazon.com/images/I/71WzLbefwfL._UY695_.jpg", 493 | "https://images-na.ssl-images-amazon.com/images/I/614vys3jRxL._UY695_.jpg", 494 | "https://images-na.ssl-images-amazon.com/images/I/71IIfpURCcL._UY695_.jpg", 495 | "https://images-na.ssl-images-amazon.com/images/I/81bdLWvoVXL._UY695_.jpg" 496 | ], 497 | "features": [ 498 | "Sole: EVA", 499 | "Closure: Speed Laces", 500 | "Shoe Width: Regular", 501 | "Style Name:-ST Activate SoftFoam+ Sneakers", 502 | "Upper Material:-Mesh", 503 | "Lower Material:-EVA", 504 | "Care Instructions: Wipe with a clean dry cloth", 505 | "Warranty Period: 90 Days Manufacturers Warranty" 506 | ], 507 | "specs": [], 508 | "rating": { 509 | "count": 4043, 510 | "value": 4 511 | } 512 | }, 513 | { 514 | "id": "15", 515 | "title": "Mi Smart Band 4", 516 | "category": "Smart Band", 517 | "price": { 518 | "currency": "INR", 519 | "value": 2499, 520 | "discount": 20 521 | }, 522 | "brand": "MI", 523 | "images": [ 524 | "https://images-na.ssl-images-amazon.com/images/I/71ZSpNjEl0L._SX679_.jpg", 525 | "https://images-na.ssl-images-amazon.com/images/I/71nAt0uKDtL._SX679_.jpg", 526 | "https://images-na.ssl-images-amazon.com/images/I/71iseBmChAL._SX679_.jpg", 527 | "https://images-na.ssl-images-amazon.com/images/I/71104yyE16L._SX679_.jpg", 528 | "https://images-na.ssl-images-amazon.com/images/I/71RtaoJYv7L._SX679_.jpg", 529 | "https://images-na.ssl-images-amazon.com/images/I/71Z5vKFlXyL._SX679_.jpg" 530 | ], 531 | "features": [ 532 | "The Mi Smart Band 4 features a 39.9% larger (than Mi Band 3) AMOLED color full-touch display with adjustable brightness, so everything is clear as can be. Compatible with Android 4.4 or later/iOS 9.0 or later. Body material:Polycarbonate", 533 | "With music control on the band you can change the song, increase/decrease the volume and groove on without even touching your phone", 534 | "With a sturdy 5ATM waterproof built, you can now take your band for a swim. It auto detects your swim style and captures 12 detailed data points for tracking. Connectivity - Bluetooth 5.0", 535 | "Health and wellness tracking at its best with 24/7 automatic heart rating monitoring and alerts to warn you when the heart rate is high", 536 | "Style the band display as per your mood with unlimited watch faces. Simply pick a photo from your gallery and set it as your watch face", 537 | "With the band on your wrist, you can receive text messages, silence or reject calls, and get social media notifications instantly", 538 | "Up to 20 days of long lasting battery life for uninterrupted performance", 539 | "Start your day right by understanding your sleep pattern with accurate light and deep sleep monitoring", 540 | "30+ features rolled into one band, your perfect companion", 541 | "Country of Origin: China" 542 | ], 543 | "specs": [], 544 | "rating": { 545 | "count": 7879, 546 | "value": 4 547 | } 548 | } 549 | ] 550 | -------------------------------------------------------------------------------- /src/images/amazon-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ib-sundeep/amazon-clone/48d3b73a4433caafa1012f279bbfcfdc7306702a/src/images/amazon-logo.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { CartProvider } from './cart-context' 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/cart/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from '@mdi/react'; 3 | import { mdiClose } from '@mdi/js'; 4 | 5 | import './CartItem.scss'; 6 | 7 | import CurrencyFormat from 'components/general/CurrencyFormat'; 8 | import { calculatePriceDetails } from 'utils.js/product'; 9 | import AddToCard from 'components/product/AddToCart'; 10 | 11 | function CartItem({ product }) { 12 | const { finalPrice } = calculatePriceDetails(product.price); 13 | return ( 14 |
15 |
16 | {product.title} 17 |
18 |
19 |
{product.title}
20 |
by {product.brand}
21 |
22 |
23 |
24 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
=
37 |
38 | 43 |
44 |
45 |
46 | ); 47 | } 48 | 49 | export default CartItem; 50 | -------------------------------------------------------------------------------- /src/pages/cart/CartItem.scss: -------------------------------------------------------------------------------- 1 | .cart-item { 2 | display: flex; 3 | align-items: flex-start; 4 | padding: 1rem; 5 | border-bottom: 0.1rem solid #e2e2e2; 6 | 7 | &__image { 8 | width: 10rem; 9 | 10 | img { 11 | width: 100%; 12 | } 13 | } 14 | 15 | &__details { 16 | padding: 0 1rem; 17 | flex: 1 0 0; 18 | } 19 | 20 | &__title { 21 | font-weight: bolder; 22 | margin-bottom: 0.5rem; 23 | font-size: var(--h3-size); 24 | } 25 | 26 | &__brand { 27 | color: var(--hint-font-color); 28 | } 29 | 30 | &__purchase { 31 | display: flex; 32 | align-items: center; 33 | justify-content: flex-end; 34 | padding: 0 1rem; 35 | min-width: 20rem; 36 | } 37 | 38 | &__price, 39 | &__amount { 40 | min-width: 8rem; 41 | } 42 | 43 | &__currency { 44 | justify-content: flex-end; 45 | } 46 | 47 | &__price, 48 | &__quantity, 49 | &__amount, 50 | &__multiply, 51 | &__assign { 52 | margin: 0 1rem; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/pages/cart/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './index.scss'; 4 | 5 | import { useCartState } from 'cart-context'; 6 | import CartItem from './CartItem'; 7 | import CurrencyFormat from 'components/general/CurrencyFormat'; 8 | 9 | function CartPage() { 10 | const { products, totalQuantity, totalPrice } = useCartState(); 11 | const productIds = Object.keys(products).filter((id) => products[id]); 12 | 13 | return ( 14 |
15 |
16 |
17 | {productIds.map((id) => ( 18 | 19 | ))} 20 |
21 | 22 |
23 | Subtotal ({totalQuantity} items):{' '} 24 | 29 |
30 |
31 |
32 | ); 33 | } 34 | 35 | export default CartPage; 36 | -------------------------------------------------------------------------------- /src/pages/cart/index.scss: -------------------------------------------------------------------------------- 1 | .cart { 2 | width: 100%; 3 | max-width: 150rem; 4 | margin: 0 auto; 5 | 6 | &__main { 7 | display: flex; 8 | align-items: flex-start; 9 | padding: 1rem; 10 | } 11 | 12 | &__items, 13 | &__summary { 14 | margin-right: 1rem; 15 | background-color: #ffffff; 16 | } 17 | 18 | &__items { 19 | box-shadow: var(--default-shadow); 20 | flex: 1 0 0; 21 | } 22 | 23 | &__summary { 24 | display: flex; 25 | align-items: flex-end; 26 | padding: 1rem; 27 | min-width: 30rem; 28 | box-shadow: var(--default-shadow); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/pages/home/Banner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Carousel from 'nuka-carousel'; 3 | import Icon from '@mdi/react'; 4 | import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'; 5 | 6 | import './Banner.scss'; 7 | 8 | const banners = [ 9 | 'https://images-eu.ssl-images-amazon.com/images/G/31/prime/Gateway/2020/May/gaming_3000x1200._CB431281466_.jpg', 10 | 'https://images-eu.ssl-images-amazon.com/images/G/31/img21/Wireless/WLA/Feb/NC/D21052619_WLA_BAU_GW-heroes_Headsets_FPF_FEB_DesktopTallHero_3000x1200._CB660350658_.jpg', 11 | 'https://images-eu.ssl-images-amazon.com/images/G/31/img21/Audio/MI/Final/MI_Gw_3000x1200._CB659658858_.jpg', 12 | ]; 13 | 14 | function Banner() { 15 | return ( 16 |
17 |
18 | ( 23 | 29 | )} 30 | renderCenterRightControls={({ nextSlide }) => ( 31 | 37 | )} 38 | renderBottomCenterControls={() => null} 39 | > 40 | {banners.map((bannerSrc, index) => ( 41 | {`Banner 42 | ))} 43 | 44 |
45 |
46 | ); 47 | } 48 | 49 | export default Banner; 50 | -------------------------------------------------------------------------------- /src/pages/home/Banner.scss: -------------------------------------------------------------------------------- 1 | .h-banner { 2 | --banner-fixed-height: 20vh; 3 | 4 | height: var(--banner-fixed-height); 5 | outline: none; 6 | 7 | .slider-control-centerright, 8 | .slider-control-centerleft { 9 | top: calc(var(--banner-fixed-height) * 0.5) !important; 10 | } 11 | 12 | &__control { 13 | cursor: pointer; 14 | color: var(--hint-light-font-color); 15 | } 16 | 17 | &__carousel { 18 | position: relative; 19 | 20 | &:before { 21 | content: ''; 22 | background: linear-gradient( 23 | -180deg, 24 | rgba(234, 237, 237, 0), 25 | var(--body-background-color) 26 | ); 27 | bottom: 0; 28 | left: 0; 29 | pointer-events: none; 30 | position: absolute; 31 | right: 0; 32 | top: var(--banner-fixed-height); 33 | z-index: 1; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/pages/home/ProductCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | import './ProductCard.scss'; 6 | 7 | import CurrencyFormat from 'components/general/CurrencyFormat'; 8 | import Rating from 'components/general/Rating'; 9 | import AddToCard from 'components/product/AddToCart'; 10 | import { calculatePriceDetails } from 'utils.js/product'; 11 | 12 | function ProductCard({ className, product }) { 13 | const { finalPrice, basePrice, isDiscounted } = calculatePriceDetails( 14 | product.price, 15 | ); 16 | 17 | return ( 18 |
19 |
20 |
{product.title}
21 |
22 | 27 | {isDiscounted && ( 28 | 33 | )} 34 |
35 | 36 |
37 | 38 |
39 | {product.rating.count} ratings 40 |
41 |
42 | 43 | 44 | {product.title} 49 | 50 | 51 |
52 | 53 |
54 |
55 |
56 | ); 57 | } 58 | 59 | export default ProductCard; 60 | -------------------------------------------------------------------------------- /src/pages/home/ProductCard.scss: -------------------------------------------------------------------------------- 1 | .product-card-wrapper { 2 | width: 33.33%; 3 | padding: 1rem; 4 | } 5 | 6 | .product-card { 7 | padding: 1.5rem; 8 | background-color: #ffffff; 9 | box-shadow: var(--default-shadow); 10 | 11 | &__title { 12 | font-weight: bold; 13 | margin-bottom: 0.5rem; 14 | } 15 | 16 | &__price { 17 | display: flex; 18 | font-size: var(--h4-size); 19 | align-items: flex-end; 20 | margin-bottom: 0.5rem; 21 | } 22 | 23 | &__amount { 24 | font-weight: bold; 25 | 26 | &--discount { 27 | font-weight: normal; 28 | color: var(--hint-font-color); 29 | text-decoration: line-through; 30 | margin-left: 0.3rem; 31 | } 32 | } 33 | 34 | &__rating { 35 | display: flex; 36 | align-items: center; 37 | } 38 | 39 | &__rating-count { 40 | margin-left: 0.5rem; 41 | color: var(--hint-font-color); 42 | } 43 | 44 | &__gallery { 45 | display: flex; 46 | height: 20rem; 47 | margin: 1rem 0; 48 | align-items: center; 49 | justify-content: center; 50 | } 51 | 52 | &__image { 53 | object-fit: contain; 54 | object-position: center; 55 | height: 100%; 56 | max-width: 100%; 57 | } 58 | 59 | &__actions { 60 | display: flex; 61 | align-items: center; 62 | justify-content: center; 63 | } 64 | 65 | &__button { 66 | padding: 0.5rem 1rem; 67 | background-color: var(--theme-color-1); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/pages/home/Products.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from 'react'; 2 | 3 | import './Products.scss'; 4 | 5 | import productsApi from 'api/products'; 6 | import Loader from 'components/general/Loader'; 7 | import Error from 'components/general/Error'; 8 | import ProductCard from './ProductCard'; 9 | 10 | function Products() { 11 | const [products, setProducts] = useState([]); 12 | const [loading, setLoading] = useState(false); 13 | const [error, setError] = useState(null); 14 | 15 | const loadProducts = useCallback(async () => { 16 | if (loading || products.length > 0) return; 17 | 18 | setLoading(true); 19 | setError(null); 20 | 21 | try { 22 | const json = await productsApi.getList(); 23 | setProducts(json); 24 | } catch (_error) { 25 | setError(_error); 26 | } 27 | setLoading(false); 28 | }, [loading, products]); 29 | 30 | useEffect(() => { 31 | loadProducts(); 32 | }, [loadProducts]); 33 | 34 | if (loading) { 35 | return ; 36 | } else if (error) { 37 | return ; 38 | } else { 39 | return ( 40 |
41 | {products.map((product) => ( 42 | 43 | ))} 44 |
45 | ); 46 | } 47 | } 48 | 49 | export default Products; 50 | -------------------------------------------------------------------------------- /src/pages/home/Products.scss: -------------------------------------------------------------------------------- 1 | .products { 2 | position: relative; 3 | z-index: 1; 4 | display: flex; 5 | align-items: stretch; 6 | flex-wrap: wrap; 7 | margin-top: 3rem; 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/home/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './index.scss'; 4 | 5 | import Banner from './Banner'; 6 | import Products from './Products'; 7 | 8 | function HomePage() { 9 | return ( 10 |
11 | 12 |
13 | 14 |
15 |
16 | ); 17 | } 18 | 19 | export default HomePage; 20 | -------------------------------------------------------------------------------- /src/pages/home/index.scss: -------------------------------------------------------------------------------- 1 | .home { 2 | width: 100%; 3 | max-width: 150rem; 4 | margin: 0 auto; 5 | 6 | &__section { 7 | padding: 1rem; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/login/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function LoginPage() { 4 | return
Login Page
; 5 | } 6 | 7 | export default LoginPage; 8 | -------------------------------------------------------------------------------- /src/pages/product/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, useCallback } from 'react'; 2 | import { useParams } from "react-router-dom"; 3 | import ImageSlider from '../../components/product/ImageSlider'; 4 | import Information from '../../components/product/Information'; 5 | import './index.scss'; 6 | 7 | import productsApi from 'api/products'; 8 | import Loader from 'components/general/Loader'; 9 | import Error from 'components/general/Error'; 10 | import products from 'api/products'; 11 | 12 | function ProductPage() { 13 | let { productId } = useParams(); 14 | 15 | const [product, setProduct] = useState(null); 16 | const [loading, setLoading] = useState(false); 17 | const [error, setError] = useState(null); 18 | 19 | const loadProduct = useCallback(async () => { 20 | if (loading || product) return; 21 | 22 | setLoading(true); 23 | setError(null); 24 | 25 | try { 26 | const json = await productsApi.getProduct(productId); 27 | console.log(json) 28 | setProduct(json); 29 | } catch (_error) { 30 | setError(_error); 31 | } 32 | setLoading(false); 33 | }, [loading]); 34 | 35 | useEffect(() => { 36 | loadProduct(); 37 | }, [loadProduct]); 38 | 39 | 40 | if (loading) { 41 | return ; 42 | } else if (error) { 43 | return ; 44 | } else if (product) { 45 | return ( 46 |
47 | 48 | 49 |
50 | ); 51 | } else { 52 | return null; 53 | } 54 | } 55 | 56 | export default ProductPage; 57 | -------------------------------------------------------------------------------- /src/pages/product/index.scss: -------------------------------------------------------------------------------- 1 | .product { 2 | display: flex; 3 | padding: 2rem; 4 | background-color: white; 5 | height: 100%; 6 | } 7 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/styles/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | // Makes 1rem = 10px; 4 | font-size: 62.5%; 5 | 6 | * { 7 | box-sizing: inherit; 8 | } 9 | } 10 | 11 | body { 12 | color: var(--default-font-color); 13 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, 14 | Segoe UI Emoji; 15 | font-size: var(--h5-size); 16 | background-color: var(--body-background-color); 17 | } 18 | 19 | html, 20 | head, 21 | body, 22 | #root, 23 | .page-container { 24 | height: 100%; 25 | } 26 | 27 | a { 28 | text-decoration: none; 29 | color: inherit; 30 | } 31 | -------------------------------------------------------------------------------- /src/styles/_normalize.scss: -------------------------------------------------------------------------------- 1 | // Taken from https://github.com/necolas/normalize.css/blob/master/normalize.css 2 | 3 | /* stylelint-disable */ 4 | 5 | /** 6 | * 1. Correct the line height in all browsers. 7 | * 2. Prevent adjustments of font size after orientation changes in iOS. 8 | */ 9 | 10 | html { 11 | line-height: 1.15; /* 1 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /* Sections 16 | ========================================================================== */ 17 | 18 | /** 19 | * Remove the margin in all browsers. 20 | */ 21 | 22 | body { 23 | margin: 0; 24 | } 25 | 26 | /** 27 | * Render the `main` element consistently in IE. 28 | */ 29 | 30 | main { 31 | display: block; 32 | } 33 | 34 | /** 35 | * Correct the font size and margin on `h1` elements within `section` and 36 | * `article` contexts in Chrome, Firefox, and Safari. 37 | */ 38 | 39 | h1 { 40 | font-size: 2em; 41 | margin: 0.67em 0; 42 | } 43 | 44 | /* Grouping content 45 | ========================================================================== */ 46 | 47 | /** 48 | * 1. Add the correct box sizing in Firefox. 49 | * 2. Show the overflow in Edge and IE. 50 | */ 51 | 52 | hr { 53 | box-sizing: content-box; /* 1 */ 54 | height: 0; /* 1 */ 55 | overflow: visible; /* 2 */ 56 | } 57 | 58 | /** 59 | * 1. Correct the inheritance and scaling of font size in all browsers. 60 | * 2. Correct the odd `em` font sizing in all browsers. 61 | */ 62 | 63 | pre { 64 | font-family: monospace, monospace; /* 1 */ 65 | font-size: 1em; /* 2 */ 66 | } 67 | 68 | /* Text-level semantics 69 | ========================================================================== */ 70 | 71 | /** 72 | * Remove the gray background on active links in IE 10. 73 | */ 74 | 75 | a { 76 | background-color: transparent; 77 | } 78 | 79 | /** 80 | * 1. Remove the bottom border in Chrome 57- 81 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 82 | */ 83 | 84 | abbr[title] { 85 | border-bottom: none; /* 1 */ 86 | text-decoration: underline; /* 2 */ 87 | text-decoration: underline dotted; /* 2 */ 88 | } 89 | 90 | /** 91 | * Add the correct font weight in Chrome, Edge, and Safari. 92 | */ 93 | 94 | b, 95 | strong { 96 | font-weight: bolder; 97 | } 98 | 99 | /** 100 | * 1. Correct the inheritance and scaling of font size in all browsers. 101 | * 2. Correct the odd `em` font sizing in all browsers. 102 | */ 103 | 104 | code, 105 | kbd, 106 | samp { 107 | font-family: monospace, monospace; /* 1 */ 108 | font-size: 1em; /* 2 */ 109 | } 110 | 111 | /** 112 | * Add the correct font size in all browsers. 113 | */ 114 | 115 | small { 116 | font-size: 80%; 117 | } 118 | 119 | /** 120 | * Prevent `sub` and `sup` elements from affecting the line height in 121 | * all browsers. 122 | */ 123 | 124 | sub, 125 | sup { 126 | font-size: 75%; 127 | line-height: 0; 128 | position: relative; 129 | vertical-align: baseline; 130 | } 131 | 132 | sub { 133 | bottom: -0.25em; 134 | } 135 | 136 | sup { 137 | top: -0.5em; 138 | } 139 | 140 | /* Embedded content 141 | ========================================================================== */ 142 | 143 | /** 144 | * Remove the border on images inside links in IE 10. 145 | */ 146 | 147 | img { 148 | border-style: none; 149 | } 150 | 151 | /* Forms 152 | ========================================================================== */ 153 | 154 | /** 155 | * 1. Change the font styles in all browsers. 156 | * 2. Remove the margin in Firefox and Safari. 157 | */ 158 | 159 | button, 160 | input, 161 | optgroup, 162 | select, 163 | textarea { 164 | font-family: inherit; /* 1 */ 165 | font-size: 100%; /* 1 */ 166 | line-height: 1.15; /* 1 */ 167 | margin: 0; /* 2 */ 168 | } 169 | 170 | /** 171 | * Show the overflow in IE. 172 | * 1. Show the overflow in Edge. 173 | */ 174 | 175 | button, 176 | input { 177 | /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { 188 | /* 1 */ 189 | text-transform: none; 190 | } 191 | 192 | /** 193 | * Correct the inability to style clickable types in iOS and Safari. 194 | */ 195 | 196 | button, 197 | [type='button'], 198 | [type='reset'], 199 | [type='submit'] { 200 | -webkit-appearance: button; 201 | } 202 | 203 | /** 204 | * Remove the inner border and padding in Firefox. 205 | */ 206 | 207 | button::-moz-focus-inner, 208 | [type='button']::-moz-focus-inner, 209 | [type='reset']::-moz-focus-inner, 210 | [type='submit']::-moz-focus-inner { 211 | border-style: none; 212 | padding: 0; 213 | } 214 | 215 | /** 216 | * Restore the focus styles unset by the previous rule. 217 | */ 218 | 219 | button:-moz-focusring, 220 | [type='button']:-moz-focusring, 221 | [type='reset']:-moz-focusring, 222 | [type='submit']:-moz-focusring { 223 | outline: 1px dotted ButtonText; 224 | } 225 | 226 | /** 227 | * Correct the padding in Firefox. 228 | */ 229 | 230 | fieldset { 231 | padding: 0.35em 0.75em 0.625em; 232 | } 233 | 234 | /** 235 | * 1. Correct the text wrapping in Edge and IE. 236 | * 2. Correct the color inheritance from `fieldset` elements in IE. 237 | * 3. Remove the padding so developers are not caught out when they zero out 238 | * `fieldset` elements in all browsers. 239 | */ 240 | 241 | legend { 242 | box-sizing: border-box; /* 1 */ 243 | color: inherit; /* 2 */ 244 | display: table; /* 1 */ 245 | max-width: 100%; /* 1 */ 246 | padding: 0; /* 3 */ 247 | white-space: normal; /* 1 */ 248 | } 249 | 250 | /** 251 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 252 | */ 253 | 254 | progress { 255 | vertical-align: baseline; 256 | } 257 | 258 | /** 259 | * Remove the default vertical scrollbar in IE 10+. 260 | */ 261 | 262 | textarea { 263 | overflow: auto; 264 | } 265 | 266 | /** 267 | * 1. Add the correct box sizing in IE 10. 268 | * 2. Remove the padding in IE 10. 269 | */ 270 | 271 | [type='checkbox'], 272 | [type='radio'] { 273 | box-sizing: border-box; /* 1 */ 274 | padding: 0; /* 2 */ 275 | } 276 | 277 | /** 278 | * Correct the cursor style of increment and decrement buttons in Chrome. 279 | */ 280 | 281 | [type='number']::-webkit-inner-spin-button, 282 | [type='number']::-webkit-outer-spin-button { 283 | height: auto; 284 | } 285 | 286 | /** 287 | * 1. Correct the odd appearance in Chrome and Safari. 288 | * 2. Correct the outline style in Safari. 289 | */ 290 | 291 | [type='search'] { 292 | -webkit-appearance: textfield; /* 1 */ 293 | outline-offset: -2px; /* 2 */ 294 | } 295 | 296 | /** 297 | * Remove the inner padding in Chrome and Safari on macOS. 298 | */ 299 | 300 | [type='search']::-webkit-search-decoration { 301 | -webkit-appearance: none; 302 | } 303 | 304 | /** 305 | * 1. Correct the inability to style clickable types in iOS and Safari. 306 | * 2. Change font properties to `inherit` in Safari. 307 | */ 308 | 309 | ::-webkit-file-upload-button { 310 | -webkit-appearance: button; /* 1 */ 311 | font: inherit; /* 2 */ 312 | } 313 | 314 | /* Interactive 315 | ========================================================================== */ 316 | 317 | /* 318 | * Add the correct display in Edge, IE 10+, and Firefox. 319 | */ 320 | 321 | details { 322 | display: block; 323 | } 324 | 325 | /* 326 | * Add the correct display in all browsers. 327 | */ 328 | 329 | summary { 330 | display: list-item; 331 | } 332 | 333 | /* Misc 334 | ========================================================================== */ 335 | 336 | /** 337 | * Add the correct display in IE 10+. 338 | */ 339 | 340 | template { 341 | display: none; 342 | } 343 | 344 | /** 345 | * Add the correct display in IE 10. 346 | */ 347 | 348 | [hidden] { 349 | display: none; 350 | } 351 | -------------------------------------------------------------------------------- /src/styles/_utils.scss: -------------------------------------------------------------------------------- 1 | .page-container { 2 | padding-top: var(--header-height); 3 | } 4 | 5 | .bold { 6 | font-weight: bold; 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | // Theme colors 3 | --theme-color-1: #f1c557; 4 | --theme-color-2: #141921; 5 | --body-background-color: #eaeded; 6 | 7 | // Font colors 8 | --default-font-color: #0f1111; 9 | --hint-font-color: #565959; 10 | --light-font-color: #ffffff; 11 | --hint-light-font-color: #cccccc; 12 | --link-color: #007185; 13 | --border-color: #e7e7e7; 14 | 15 | // Font sizes 16 | --h1-size: 3rem; 17 | --h2-size: 2.4rem; 18 | --h3-size: 2rem; 19 | --h4-size: 1.8rem; 20 | --h5-size: 1.4rem; // Also used as body font size 21 | --h6-size: 1.2rem; 22 | 23 | --border-radius: 0.5rem; 24 | --header-height: 6rem; 25 | 26 | --default-shadow: #d7d7d7 0.1rem 0.2rem 0.5rem; 27 | } 28 | -------------------------------------------------------------------------------- /src/utils.js/product.js: -------------------------------------------------------------------------------- 1 | export function calculatePriceDetails(priceDetails) { 2 | const basePrice = parseInt(priceDetails.value, 10); 3 | const finalPrice = parseInt( 4 | (basePrice * (100 - priceDetails.discount)) / 100, 5 | 10, 6 | ); 7 | return { 8 | basePrice, 9 | finalPrice, 10 | isDiscounted: finalPrice !== basePrice, 11 | }; 12 | } 13 | --------------------------------------------------------------------------------