diff --git a/.env b/.env new file mode 100644 index 0000000..7d910f1 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..e432b86 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,15 @@ +FROM node:16.17.0-alpine +WORKDIR '/app' + +COPY package.json . +RUN npm install +COPY . . + +CMD ["npm","start"] + + + +# if facing error while building image, paste there two command in terminal. + +# export DOCKER_BUILDKIT=0 +#export COMPOSE_DOCKER_CLI_BUILD=0 diff --git a/README.md b/README.md index 5a2355e..484b766 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,11 @@ Finally, we can't wait to see your outstanding issues and pull requests. Welcome # Ground Rules -Here at amazon clone, we welcome everyone to contriubute to our project. You can contribute in several ways not just in code (E.g. Technical writing). +Here at amazon clone, we welcome everyone to contribute to our project. You can contribute in several ways not just in code (E.g. Technical writing). Having numerous means of contributing means working with alot of individuals which is very good for the growth 📈 of the project but most times can lead to conflicting interests and point of views 👈👉. Below are set of rules 📖 that guide individuals participating in this project. -- Openess 👐. Collaboration is only possible if everyone is open to share ideas. +- Openness 👐. Collaboration is only possible if everyone is open to share ideas. - Respect 👨🏾‍🤝‍👨🏽. Having respect for everyone, their skills and opinions is paramount. - Welcoming tone 😇💃: It is expected that you interact with others in an optimistic and cheerful manner. @@ -23,13 +23,13 @@ Having numerous means of contributing means working with alot of individuals whi Is this your first time contributing to an open source project? If yes, Welcome!!✨🎉💃🏾 Here is a [great tutorial](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github) on how to contribute to an open source project. -At the point you are ready to take on the world of open source contribution!!. +At this point you are ready to take on the world of open source contribution!!. You must have seen a bug or problem you can fix, this is when you open a new issue for that problem. Let's do it together. ## Steps to open a new issue -- **Step 1:** Navigate to the issues naviagtion button. See below 👇 +- **Step 1:** Navigate to the issues navigation button. See below 👇 ![issues1](https://user-images.githubusercontent.com/63567230/186288743-ea5b1764-b26c-49f5-a740-766b81680ee7.JPG) @@ -41,7 +41,7 @@ You must have seen a bug or problem you can fix, this is when you open a new iss ![issues3](https://user-images.githubusercontent.com/63567230/186288798-28a7e5b1-2f3e-4fa1-9ebb-27fe2220290f.JPG) -- **Step 4:** Time to add your amazing issue. You add the title and a brief description of the issue. For further explanation, images can be added as well. See below 👇 +- **Step 4:** Time to add your amazing issue. You have to add the title and a brief description of the issue. For further explanation, images can be added as well. See below 👇 ![issues4](https://user-images.githubusercontent.com/63567230/186288817-9c257618-005b-4ced-993b-318f51121137.JPG) @@ -49,7 +49,6 @@ You must have seen a bug or problem you can fix, this is when you open a new iss ![issues5](https://user-images.githubusercontent.com/63567230/186289012-575123a1-68a7-4fcd-a71a-9051a8ca11ff.JPG) - Hurray, you just made added your first issue. The managers of amazon clone will now review your issue and you will either get assigned to the issue, have it closed or a comment will be dropped for you. You have been assigned an issue 🥂 and are confused 😵 about where to go from here, follow this guide below to make your changes and pull request 🍾. @@ -125,7 +124,7 @@ Hurray!!, we are done with the hard part. Head to github to make the pull reques The maintainer of amazon-clone looks at Pull Requests on a regular basis and carries out merging or comments on the requests. You can close a pull request if it isn't showing any activity after two weeks. -## Commit messages +## Commit messages Amazon-clone has certain conventions that should be adopted when contributing. @@ -137,3 +136,14 @@ Amazon-clone has certain conventions that should be adopted when contributing. - Commit changes to `package.json`, `.gitignore` and other meta files with `chore(filenamewithoutext): ...` - Commit changes to README files or comments with `docs: ...` - Cody style changes with `style: standard` +## Thanks to all Contributors + + + + + + + + +## Don't forgot to give a ⭐ to the repo, if you learned something! + diff --git a/docker-compose.yaml b/docker-compose.yaml new file mode 100644 index 0000000..4ecdf00 --- /dev/null +++ b/docker-compose.yaml @@ -0,0 +1,20 @@ +version: "3" +services: + react-app: + restart: always + build: + context: ./ + dockerfile: Dockerfile + image: amazon-clone + stdin_open: true + ports: + - "3000:3000" + networks: + - app + volumes: + - ./src:/app/src + - ./app/node_modules + +networks: + app: + driver: bridge diff --git a/package-lock.json b/package-lock.json index f711da5..2e518e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,8 +22,11 @@ "antd": "^4.23.1", "axios": "^0.21.4", "firebase": "^9.0.2", + "mui": "^0.0.1", "react": "^17.0.2", - "react-currency-format": "^1.0.0", + "react-bootstrap": "^2.5.0", + "react-carousel-slider": "^2.0.13", + "react-currency-format": "^1.1.0", "react-dom": "^17.0.2", "react-flip-move": "^3.0.4", "react-router-dom": "^5.3.0", @@ -32,7 +35,8 @@ "web-vitals": "^1.1.2" }, "devDependencies": { - "gh-pages": "^3.2.3" + "gh-pages": "^3.2.3", + "webpack": "4.44.2" } }, "node_modules/@ant-design/colors": { @@ -4026,9 +4030,9 @@ } }, "node_modules/@popperjs/core": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz", - "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==", + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -4088,6 +4092,48 @@ "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=" }, + "node_modules/@react-aria/ssr": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz", + "integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==", + "dependencies": { + "@babel/runtime": "^7.6.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@restart/hooks": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz", + "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==", + "dependencies": { + "dequal": "^2.0.2" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.0.tgz", + "integrity": "sha512-5dDj5uDzUgK1iijWPRg6AnxjkHM04XhTQDJirM1h/8tIc7KyLtF9YyjcCpNEn259hPMXswpkfXKNgiag0skPFg==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@popperjs/core": "^2.11.5", + "@react-aria/ssr": "^3.2.0", + "@restart/hooks": "^0.4.7", + "@types/warning": "^3.0.0", + "dequal": "^2.0.2", + "dom-helpers": "^5.2.0", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -4944,9 +4990,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz", - "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", "dependencies": { "@types/react": "*" } @@ -5003,6 +5049,11 @@ "node": ">=0.10.0" } }, + "node_modules/@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "node_modules/@types/webpack": { "version": "4.41.31", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.31.tgz", @@ -8540,6 +8591,14 @@ "node": ">= 0.6" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/des.js": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", @@ -12126,6 +12185,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", @@ -15577,6 +15644,11 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "node_modules/mui": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/mui/-/mui-0.0.1.tgz", + "integrity": "sha512-iB9zfxsJBcMkZ/SY6X+HGSPr4fftCZIQ76ZMH8iSMfVkidVzRtZlLW2gbWXUe+IMcj8JLv1p+dGKvPVlgtiocA==" + }, "node_modules/multicast-dns": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz", @@ -18027,13 +18099,25 @@ } }, "node_modules/prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", - "react-is": "^16.8.1" + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" } }, "node_modules/protobufjs": { @@ -18875,16 +18959,53 @@ "node": ">=10" } }, + "node_modules/react-bootstrap": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.5.0.tgz", + "integrity": "sha512-j/aLR+okzbYk61TM3eDOU1NqOqnUdwyVrF+ojoCRUxPdzc2R0xXvqyRsjSoyRoCo7n82Fs/LWjPCin/QJNdwvA==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@restart/hooks": "^0.4.6", + "@restart/ui": "^1.3.1", + "@types/react-transition-group": "^4.4.4", + "classnames": "^2.3.1", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.2", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-carousel-slider": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/react-carousel-slider/-/react-carousel-slider-2.0.13.tgz", + "integrity": "sha512-j+uVCd8HWmZvGdwCab1VVWJRuDQbEYCPuKdpNcr1w5MsPmSHVpJj+N+awVhcCVLsZSHsMcWidPvQDPBdObdbMg==", + "peerDependencies": { + "react": "16.x" + } + }, "node_modules/react-currency-format": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-currency-format/-/react-currency-format-1.0.0.tgz", - "integrity": "sha1-m+nJhMNXv46Ec2jFQitfTUqoGbM=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-currency-format/-/react-currency-format-1.1.0.tgz", + "integrity": "sha512-WWrEOIp/3GbDSk1wlhFXaBc7IHGT3IwL306DHbGP3GVr4YFa0iS5hHPbKjHa0haruGL4Ly+WG4/5jBHpUtgqZg==", "dependencies": { "prop-types": "^15.6.0" }, "peerDependencies": { - "react": "^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc || ^16.0.0", - "react-dom": "^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc || ^16.0.0" + "react": "^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc || ^16.0.0 || ^17.0.0", + "react-dom": "^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc || ^16.0.0 || ^17.0.0" } }, "node_modules/react-dev-utils": { @@ -19070,6 +19191,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -22282,6 +22408,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -22686,6 +22826,14 @@ "makeerror": "1.0.x" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", @@ -27323,9 +27471,9 @@ } }, "@popperjs/core": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz", - "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==" + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==" }, "@protobufjs/aspromise": { "version": "1.1.2", @@ -27381,6 +27529,38 @@ "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=" }, + "@react-aria/ssr": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz", + "integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==", + "requires": { + "@babel/runtime": "^7.6.2" + } + }, + "@restart/hooks": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz", + "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==", + "requires": { + "dequal": "^2.0.2" + } + }, + "@restart/ui": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.0.tgz", + "integrity": "sha512-5dDj5uDzUgK1iijWPRg6AnxjkHM04XhTQDJirM1h/8tIc7KyLtF9YyjcCpNEn259hPMXswpkfXKNgiag0skPFg==", + "requires": { + "@babel/runtime": "^7.18.3", + "@popperjs/core": "^2.11.5", + "@react-aria/ssr": "^3.2.0", + "@restart/hooks": "^0.4.7", + "@types/warning": "^3.0.0", + "dequal": "^2.0.2", + "dom-helpers": "^5.2.0", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + } + }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -28019,9 +28199,9 @@ } }, "@types/react-transition-group": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz", - "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", "requires": { "@types/react": "*" } @@ -28077,6 +28257,11 @@ } } }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "@types/webpack": { "version": "4.41.31", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.31.tgz", @@ -30877,6 +31062,11 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" }, + "dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==" + }, "des.js": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", @@ -33627,6 +33817,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", @@ -36209,6 +36407,11 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "mui": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/mui/-/mui-0.0.1.tgz", + "integrity": "sha512-iB9zfxsJBcMkZ/SY6X+HGSPr4fftCZIQ76ZMH8iSMfVkidVzRtZlLW2gbWXUe+IMcj8JLv1p+dGKvPVlgtiocA==" + }, "multicast-dns": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz", @@ -38163,13 +38366,22 @@ } }, "prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", - "react-is": "^16.8.1" + "react-is": "^16.13.1" + } + }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" } }, "protobufjs": { @@ -38780,10 +38992,35 @@ "whatwg-fetch": "^3.4.1" } }, + "react-bootstrap": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.5.0.tgz", + "integrity": "sha512-j/aLR+okzbYk61TM3eDOU1NqOqnUdwyVrF+ojoCRUxPdzc2R0xXvqyRsjSoyRoCo7n82Fs/LWjPCin/QJNdwvA==", + "requires": { + "@babel/runtime": "^7.17.2", + "@restart/hooks": "^0.4.6", + "@restart/ui": "^1.3.1", + "@types/react-transition-group": "^4.4.4", + "classnames": "^2.3.1", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.2", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + } + }, + "react-carousel-slider": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/react-carousel-slider/-/react-carousel-slider-2.0.13.tgz", + "integrity": "sha512-j+uVCd8HWmZvGdwCab1VVWJRuDQbEYCPuKdpNcr1w5MsPmSHVpJj+N+awVhcCVLsZSHsMcWidPvQDPBdObdbMg==", + "requires": {} + }, "react-currency-format": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-currency-format/-/react-currency-format-1.0.0.tgz", - "integrity": "sha1-m+nJhMNXv46Ec2jFQitfTUqoGbM=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-currency-format/-/react-currency-format-1.1.0.tgz", + "integrity": "sha512-WWrEOIp/3GbDSk1wlhFXaBc7IHGT3IwL306DHbGP3GVr4YFa0iS5hHPbKjHa0haruGL4Ly+WG4/5jBHpUtgqZg==", "requires": { "prop-types": "^15.6.0" } @@ -38929,6 +39166,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -41472,6 +41714,17 @@ "which-boxed-primitive": "^1.0.2" } }, + "uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -41794,6 +42047,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", diff --git a/package.json b/package.json index 0c6e592..e6b3890 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,11 @@ "antd": "^4.23.1", "axios": "^0.21.4", "firebase": "^9.0.2", + "mui": "^0.0.1", "react": "^17.0.2", - "react-currency-format": "^1.0.0", + "react-bootstrap": "^2.5.0", + "react-carousel-slider": "^2.0.13", + "react-currency-format": "^1.1.0", "react-dom": "^17.0.2", "react-flip-move": "^3.0.4", "react-router-dom": "^5.3.0", @@ -54,6 +57,7 @@ ] }, "devDependencies": { - "gh-pages": "^3.2.3" + "gh-pages": "^3.2.3", + "webpack": "4.44.2" } } diff --git a/src/Carousel.css b/src/Carousel.css new file mode 100644 index 0000000..16bca76 --- /dev/null +++ b/src/Carousel.css @@ -0,0 +1,26 @@ +.carousel{ + /* width: 100%; */ + /* min-height: 200px; */ + z-index: 1; + margin-bottom: -300px; + margin-top: 2px; +} +.carousel-control-next-icon{ + height: 40px !important; + margin-right: 0px; + margin-top: -300px; + background-color: black; + z-index: 2; +} +.carousel-control-prev-icon{ + height: 40px !important; + z-index: 2; + margin-top: -300px; + background-color: black; +} +.carousel-control-next{ + justify-content: end; +} +.carousel-control-prev{ + justify-content: start; +} \ No newline at end of file diff --git a/src/Carousel.js b/src/Carousel.js new file mode 100644 index 0000000..8487be4 --- /dev/null +++ b/src/Carousel.js @@ -0,0 +1,35 @@ +import React from 'react' +import "./Carousel.css"; +import Carousel from 'react-bootstrap/Carousel'; + +function CarouselBlock() { + return ( +
+ +
+ ) +} + +export default CarouselBlock \ No newline at end of file diff --git a/src/Checkout.css b/src/Checkout.css index 0d17a97..acc2e0d 100644 --- a/src/Checkout.css +++ b/src/Checkout.css @@ -19,3 +19,13 @@ padding: 10px; border-bottom: 1px solid lightgray; } + +.checkout__right{ + position: fixed; + right: 0; + margin-right: 10px; +} + +.subtotal-calculate { + margin-left: 47rem; +} \ No newline at end of file diff --git a/src/Checkout.js b/src/Checkout.js index fc16274..a86d889 100644 --- a/src/Checkout.js +++ b/src/Checkout.js @@ -1,53 +1,70 @@ +/* eslint-disable no-unused-vars */ import React from 'react' import './Checkout.css' import Subtotal from "./Subtotal"; import CheckoutProduct from './CheckoutProduct'; -import{useStateValue} from './StateProvider'; +import { getBasketTotal } from "./reducer"; +import { useStateValue } from './StateProvider'; import FlipMove from 'react-flip-move'; +import CurrencyFormat from "react-currency-format"; -function Checkout() { - const[{basket,user},dispatch]=useStateValue(); +function Checkout({ price }) { + const [{ basket, user }, dispatch] = useStateValue(); - const Finalproducts=({basket})=>( + const Finalproducts = ({ basket }) => ( - {basket.map(article => ( -
- ))} - + {basket.map(article => ( +
+ ))} + ); - - return (
- +
- Checkout Add + {/*Checkout Add*/}

Hello, {user?.email}

Your Shopping Basket

- - {/*This will send all the products we are adding in our basket to the shopping list using the basket variable*/} - {basket.map((item)=>( + + {/*This will send all the products we are adding in our basket to the shopping list using the basket variable*/} + {basket.map((item) => ( - ))} - + ))}
+ +

+ + {/*The Subtotal that is printed below !*/} + ( + <> +

+ Subtotal ({basket.length} items) : {value} +

+ + )} + decimalScale={2} + value={getBasketTotal(basket)} + displayType={"text"} + thousandSeprator={true} + prefix={"Rs "} + />
+
- +
- -
) } -export default Checkout +export default Checkout \ No newline at end of file diff --git a/src/CheckoutProduct.css b/src/CheckoutProduct.css index 9926c28..f93d71f 100644 --- a/src/CheckoutProduct.css +++ b/src/CheckoutProduct.css @@ -29,4 +29,25 @@ .checkoutProduct__title { font-size: 17px; font-weight: 800; + float: left; + width: 600px; } + +.checkoutproduct__rating{ + position: relative; + right: 0; + margin-right: 10px; +} + +.checkout_Alignment{ + display: inline-block; + margin: auto; + margin: auto; +} + +.checkoutproduct__price{ + text-align: left; + float: left; + width: 200px; + margin-left: 5rem; +} \ No newline at end of file diff --git a/src/CheckoutProduct.js b/src/CheckoutProduct.js index da020d8..4172db1 100644 --- a/src/CheckoutProduct.js +++ b/src/CheckoutProduct.js @@ -1,49 +1,41 @@ +/* eslint-disable no-unused-vars */ import React from 'react' import "./CheckoutProduct.css"; -import {useStateValue} from './StateProvider'; +import { useStateValue } from './StateProvider'; - -function CheckoutProduct({id,image,title,price,rating,reviews}) { - const[{basket},dispatch]=useStateValue(); - - const removeFromBasket=()=>{ +function CheckoutProduct({ id, image, title, price, rating, reviews }) { + const [{ basket }, dispatch] = useStateValue(); + const removeFromBasket = () => { dispatch({ - type:'REMOVE_FROM_BASKET', - id:id, + type: 'REMOVE_FROM_BASKET', + id: id, }) } - - + return ( -
Checkout Product -
-

{title}

-

- Rs - {price} -

-
- - - - {Array(rating) - .fill() - .map((_,i)=>( -

⭐

- ))} - ({reviews}) -
- +
+
+
{title}
+
+ Rs + {price} +
+
-
- +
+ {Array(rating) + .fill() + .map((_, i) => ( +

⭐

+ ))} + ({reviews}) +
+ +
- ) } export default CheckoutProduct - - \ No newline at end of file diff --git a/src/Home.css b/src/Home.css index 7f4a338..b98ff48 100644 --- a/src/Home.css +++ b/src/Home.css @@ -2,10 +2,9 @@ width: 100%; z-index: -1; margin-bottom: -300px; - margin-top: 2px; + /* margin-top: 2px; */ /* mask-image: linear-gradient(to bottom, rgb(2, 2, 2), rgba(0, 0, 0, 0)); */ } - .home { display: flex; justify-content: center; @@ -13,7 +12,6 @@ margin-right: 1px; /* max-width: 4000px; */ } - /*This code is for specifying every product in rows*/ .home__row { diff --git a/src/Home.js b/src/Home.js index 9fbaf38..690b8ca 100644 --- a/src/Home.js +++ b/src/Home.js @@ -1,53 +1,54 @@ import React from 'react' import "./Home.css"; -import Product from './Product'; +import Product from './Product'; +import CarouselBlock from './Carousel'; +import Slider from './Carousel'; + function Home() { return (
- Home -
- - - - - -
-
- - - -
-
- -
+ + {/* Home */} +
+ + + +
+
+ + + +
+
+ +
- +
) } diff --git a/src/Navbar.css b/src/Navbar.css index 8cc26e7..3402e9c 100644 --- a/src/Navbar.css +++ b/src/Navbar.css @@ -8,4 +8,35 @@ main_nav { text-align: center; padding: 16px; text-decoration: none; - } \ No newline at end of file + } + + .navbar__img{ + height:40px; + width: 40px; + margin-right: 5px; + + } + .navbar__complete{ + display: flex; + + align-items: center; + justify-content: space-between; + margin-right: 650px; + + } + + + .navbar__complete > a{ + display: flex; + align-items: center; + + margin-left: 23px; + + } + .navbar__right{ + display: flex; + align-items: center; + + } + + diff --git a/src/Navbar.js b/src/Navbar.js index ffbc72d..3a82395 100644 --- a/src/Navbar.js +++ b/src/Navbar.js @@ -1,6 +1,8 @@ import React from "react"; import "./Navbar.css"; +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; + function Navbar() { @@ -10,8 +12,10 @@ function Navbar() {