From a0febf37fe80035ff32df6deba9227ddf14fa0be Mon Sep 17 00:00:00 2001 From: Mayank Kumar <53262974+MayankKumar10@users.noreply.github.com> Date: Tue, 29 Mar 2022 12:11:28 +0530 Subject: [PATCH 1/4] Adding Landing Page --- src/App.css | 51 ++++++ src/App.js | 72 ++++++++ src/components/Home/HomePage.css | 39 ++++ src/components/Home/HomePage.jsx | 302 +++++++++++++++++++++++++++++++ src/index.css | 13 ++ src/index.js | 31 ++++ 6 files changed, 508 insertions(+) create mode 100644 src/App.css create mode 100644 src/App.js create mode 100644 src/components/Home/HomePage.css create mode 100644 src/components/Home/HomePage.jsx create mode 100644 src/index.css create mode 100644 src/index.js diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..d937db9 --- /dev/null +++ b/src/App.css @@ -0,0 +1,51 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #22201c; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: white; +} + +.App-link { + color: #61dafb; +} + +.brand-title { + font-size: 3rem; + color: #d9d9d9; +} + +.brand-title span { + color: #ffde59; +} + +.brand-description { + font-size: 1.4rem; +} + +.links { + display: flex; +} + +.links a { + color: #d9d9d9; + font-size: 1.2rem; + margin: 1rem; +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..fee92c7 --- /dev/null +++ b/src/App.js @@ -0,0 +1,72 @@ +import { + Routes, + Route, +} from "react-router-dom"; +import "./App.css"; +import { + Header, + Footer, + Cart, + HomePage, + ProductListing, + Login, + Signup, + ForgotPassword, + UserPage, + WishList, +} from "./components/index"; +import Mockman from "mockman-js"; +import { FilterProvider } from "./context/FilterProvider"; + +function App() { + return ( +
+
+ + } + /> + } + /> + } + /> + } + /> + + + + } + /> + } + /> + } + /> + } + /> + } + /> + +
+ ); +} + +export default App; diff --git a/src/components/Home/HomePage.css b/src/components/Home/HomePage.css new file mode 100644 index 0000000..b3318ec --- /dev/null +++ b/src/components/Home/HomePage.css @@ -0,0 +1,39 @@ +.sm-card-main-container { + height: 15rem; +} + +.sm-card-container { + width: 15rem; + height: 12rem; + border-radius: 0.5rem; + border: var(--border-grey); +} + +.mid-card-main-container { + height: 25rem; +} + +.mid-card-container { + width: 21rem; + height: 13rem; + border-radius: 0.5rem; + border: var(--border-grey); +} + +.margin-0 { + margin: 0; +} + +.sm-card-shadow:hover { + box-shadow: var(--color-sm-card-shadow); +} + +.sm-card-icons { + width: 5rem; + height: 5rem; +} + +.sm-card-text { + padding: 0.5rem; + width: 15rem; +} diff --git a/src/components/Home/HomePage.jsx b/src/components/Home/HomePage.jsx new file mode 100644 index 0000000..185f6f6 --- /dev/null +++ b/src/components/Home/HomePage.jsx @@ -0,0 +1,302 @@ +import React from "react"; +import "../../styles/root.css"; +import { Link } from "react-router-dom"; + +export function HomePage() { + return ( + <> +
+
+ + +
+
+
+
+

Vision Products

+

+ Bring Vision into your + Lifestyle +

+
+ +
+

Flat 30% off

+ +
+
+
+
+
+ +
+
+
+ +

+ Provide Best Quality +

+
+ +
+ +

+ Provide Fast Delivery +

+
+ +
+ +

+ Provide Customer Support +

+
+ +
+ +

+ Provide Warranty +

+
+
+
+ + {/* */} + +
+

BestSelling Products

+
+
+
+ +
+ + + +
+ Product description One +
+ +
product type
+ + + + + $200 + $300 + + + + + + +
+ +
+
+ +
+ + + +
+ Product description One +
+ +
product type
+ + + + + $200 + $300 + + + + + + +
+ +
+
+ +
+ + + +
+ Product description One +
+ +
product type
+ + + + + $200 + $300 + + + + + + +
+ +
+
+ +
+ + + +
+ Product description One +
+ +
product type
+ + + + + $200 + $300 + + + + + + +
+
+
+ + {/* */} + +
+ {/* */} +
+ +
+ + +
+ + + +
+ Product description One +
+

+ Lorem ipsum dolor sit + amet consectetur + adipisicing elit. +

+ +
product type
+ + + + + $200 + $300 + + + + + + + +
+ {/* */} +
+
+ + ); +} + +export default HomePage; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..66b53ae --- /dev/null +++ b/src/index.js @@ -0,0 +1,31 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import { BrowserRouter } from "react-router-dom"; +import { makeServer } from "./server"; +import { ContextProducts } from "./context/ContextProducts"; +import { CartProvider } from "./context/CartProvider"; +import { WishlistProvider } from "./context/WishlistProvider"; + +// Call make Server +makeServer(); + +ReactDOM.render( + + + + + + + + + + + , + document.getElementById("root") +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals From a0d9ba7fb46b0cf315f670215059b0fc8ad3f27f Mon Sep 17 00:00:00 2001 From: Mayank Kumar <53262974+MayankKumar10@users.noreply.github.com> Date: Tue, 29 Mar 2022 12:15:13 +0530 Subject: [PATCH 2/4] adding changes to landing page --- .gitignore | 104 ----------------------------------------------------- README.md | 1 - 2 files changed, 105 deletions(-) delete mode 100644 .gitignore delete mode 100644 README.md diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 6704566..0000000 --- a/.gitignore +++ /dev/null @@ -1,104 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* - -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage -*.lcov - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# TypeScript v1 declaration files -typings/ - -# TypeScript cache -*.tsbuildinfo - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Microbundle cache -.rpt2_cache/ -.rts2_cache_cjs/ -.rts2_cache_es/ -.rts2_cache_umd/ - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env -.env.test - -# parcel-bundler cache (https://parceljs.org/) -.cache - -# Next.js build output -.next - -# Nuxt.js build / generate output -.nuxt -dist - -# Gatsby files -.cache/ -# Comment in the public line in if your project uses Gatsby and *not* Next.js -# https://nextjs.org/blog/next-9-1#public-directory-support -# public - -# vuepress build output -.vuepress/dist - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# TernJS port file -.tern-port diff --git a/README.md b/README.md deleted file mode 100644 index 52d5afb..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# vision_ecommerce \ No newline at end of file From 5cd9f685a1d07eff82bc222de29e2a3d074f2e24 Mon Sep 17 00:00:00 2001 From: Mayank Kumar <53262974+MayankKumar10@users.noreply.github.com> Date: Thu, 31 Mar 2022 14:53:03 +0530 Subject: [PATCH 3/4] adding changes to Home Page --- src/components/Home/HomePage.jsx | 207 +++++++++++++++---------------- 1 file changed, 101 insertions(+), 106 deletions(-) diff --git a/src/components/Home/HomePage.jsx b/src/components/Home/HomePage.jsx index 185f6f6..1880a11 100644 --- a/src/components/Home/HomePage.jsx +++ b/src/components/Home/HomePage.jsx @@ -1,18 +1,50 @@ import React from "react"; import "../../styles/root.css"; import { Link } from "react-router-dom"; +import { + vision_img, + quality, + fast_delivery, + support, + warranty, + cpu, +} from "../../assets/images"; +import { AllProducts } from "../../context/ContextProducts"; +import { Loader } from "../Loader/Loader"; +import { TrendingCard } from "../"; +import { Rating } from "../../utils/filter"; +import { UseFilter } from "../../context/FilterProvider"; +import { ReducerProducts } from "../../reducer/ReducerProducts"; +import { BestSellingCard } from "../Cards/BestSellingCard"; export function HomePage() { + const { productState } = AllProducts(); + const { data: products, loading } = + productState; + + const getAPI = { + Api: "/api/categories", + property: "categories", + }; + const { + state: { data: categories }, + } = ReducerProducts(getAPI); + + const TrendingCartProducts = Rating( + products, + 5 + ); + return ( <>
@@ -44,13 +76,14 @@ export function HomePage() {
+ {/*----------------Service Card Section----------------*/}

Provide Best Quality @@ -60,8 +93,8 @@ export function HomePage() {

Provide Fast Delivery @@ -71,8 +104,8 @@ export function HomePage() {

Provide Customer Support @@ -82,8 +115,8 @@ export function HomePage() {

Provide Warranty @@ -101,8 +134,8 @@ export function HomePage() {
@@ -117,16 +150,8 @@ export function HomePage() { - $200 - $300 - - - + $2000 + $3000 @@ -136,8 +161,8 @@ export function HomePage() {
@@ -152,16 +177,8 @@ export function HomePage() { - $200 - $300 - - - + $2000 + $3000 @@ -171,8 +188,8 @@ export function HomePage() {
@@ -187,16 +204,8 @@ export function HomePage() { - $200 - $300 - - - + $2000 + $3000 @@ -206,8 +215,8 @@ export function HomePage() {
@@ -222,16 +231,8 @@ export function HomePage() { - $200 - $300 - - - + $2000 + $3000 @@ -241,58 +242,52 @@ export function HomePage() { {/* */} + {/* */}
- {/* */} -
- -
- + ) : ( + categories.length > 0 && + categories.map((item) => ( + + - -
+ + )) + )} +
- - -
- Product description One -
-

- Lorem ipsum dolor sit - amet consectetur - adipisicing elit. -

- -
product type
- + {/* */} - - - $200 - $300 - - - - - - - -
- {/* */} +
+ {loading ? ( + + ) : ( + TrendingCartProducts.length > + 0 && + TrendingCartProducts.map( + (item) => ( + + ) + ) + )}

From c5c20e009dbf9ada6dfedf00e5bcda9e5c68a933 Mon Sep 17 00:00:00 2001 From: Mayank Kumar <53262974+MayankKumar10@users.noreply.github.com> Date: Thu, 31 Mar 2022 15:44:22 +0530 Subject: [PATCH 4/4] adding cart --- src/App.css | 51 ------ src/App.js | 72 -------- src/components/Cart/Cart.css | 49 +++++ src/components/Cart/Cart.jsx | 160 +++++++++++++++++ src/components/Home/HomePage.css | 39 ---- src/components/Home/HomePage.jsx | 297 ------------------------------- src/index.css | 13 -- src/index.js | 31 ---- 8 files changed, 209 insertions(+), 503 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.js create mode 100644 src/components/Cart/Cart.css create mode 100644 src/components/Cart/Cart.jsx delete mode 100644 src/components/Home/HomePage.css delete mode 100644 src/components/Home/HomePage.jsx delete mode 100644 src/index.css delete mode 100644 src/index.js diff --git a/src/App.css b/src/App.css deleted file mode 100644 index d937db9..0000000 --- a/src/App.css +++ /dev/null @@ -1,51 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #22201c; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: white; -} - -.App-link { - color: #61dafb; -} - -.brand-title { - font-size: 3rem; - color: #d9d9d9; -} - -.brand-title span { - color: #ffde59; -} - -.brand-description { - font-size: 1.4rem; -} - -.links { - display: flex; -} - -.links a { - color: #d9d9d9; - font-size: 1.2rem; - margin: 1rem; -} diff --git a/src/App.js b/src/App.js deleted file mode 100644 index fee92c7..0000000 --- a/src/App.js +++ /dev/null @@ -1,72 +0,0 @@ -import { - Routes, - Route, -} from "react-router-dom"; -import "./App.css"; -import { - Header, - Footer, - Cart, - HomePage, - ProductListing, - Login, - Signup, - ForgotPassword, - UserPage, - WishList, -} from "./components/index"; -import Mockman from "mockman-js"; -import { FilterProvider } from "./context/FilterProvider"; - -function App() { - return ( -
-
- - } - /> - } - /> - } - /> - } - /> - - - - } - /> - } - /> - } - /> - } - /> - } - /> - -
- ); -} - -export default App; diff --git a/src/components/Cart/Cart.css b/src/components/Cart/Cart.css new file mode 100644 index 0000000..04c5394 --- /dev/null +++ b/src/components/Cart/Cart.css @@ -0,0 +1,49 @@ +.cart-material-icons { + font-size: 1.3rem; +} + +/*-------------------------Checkout page(card)---------------*/ +.cart-brand-text { + width: 18rem; +} + +.cart-img { + width: 8em; + height: 8em; + margin-left: 1rem; +} + +del { + font-size: 0.875rem; +} + +.cart-product { + display: flex; +} + +.cart-items { + width: 100%; + text-align: center; +} + +.cart-input-container { + width: 5rem; + padding: 0.5rem; +} + +/* Chrome, Safari, Edge, Opera */ +.cart-items-input::-webkit-outer-spin-button, +.cart-items-input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +.cart-items-input[type="number"] { + -moz-appearance: textfield; +} + +.cart-checkout { + width: 100%; + padding: 1rem; +} diff --git a/src/components/Cart/Cart.jsx b/src/components/Cart/Cart.jsx new file mode 100644 index 0000000..bcd529e --- /dev/null +++ b/src/components/Cart/Cart.jsx @@ -0,0 +1,160 @@ +import React, { useEffect } from "react"; +import { CartProducts } from "../../context/CartProvider"; + +export function Cart() { + const { products, removeFromCart, total } = + CartProducts(); + + useEffect(() => {}); + + let totalDisplayscont = total - 165; + return ( + <> +
+
+

+ My Cart({products.length}) +

+ {products.map((product) => { + return ( +
+
+
+
+ + +
+ +
+
+ +
+ + + +
+ +
+
+
+ + +
{product.name}
+

+ Lorem ipsum dolor sit + amet consectetur + adipisicing elit. +

+ +
+ {product.category} +
+ + + + + + $ + { + product.discountedPrice + } + + + ${product.price} + + + + + + + +
+
+
+ ); + })} +
+ + +
+ + ); +} + +export default Cart; diff --git a/src/components/Home/HomePage.css b/src/components/Home/HomePage.css deleted file mode 100644 index b3318ec..0000000 --- a/src/components/Home/HomePage.css +++ /dev/null @@ -1,39 +0,0 @@ -.sm-card-main-container { - height: 15rem; -} - -.sm-card-container { - width: 15rem; - height: 12rem; - border-radius: 0.5rem; - border: var(--border-grey); -} - -.mid-card-main-container { - height: 25rem; -} - -.mid-card-container { - width: 21rem; - height: 13rem; - border-radius: 0.5rem; - border: var(--border-grey); -} - -.margin-0 { - margin: 0; -} - -.sm-card-shadow:hover { - box-shadow: var(--color-sm-card-shadow); -} - -.sm-card-icons { - width: 5rem; - height: 5rem; -} - -.sm-card-text { - padding: 0.5rem; - width: 15rem; -} diff --git a/src/components/Home/HomePage.jsx b/src/components/Home/HomePage.jsx deleted file mode 100644 index 1880a11..0000000 --- a/src/components/Home/HomePage.jsx +++ /dev/null @@ -1,297 +0,0 @@ -import React from "react"; -import "../../styles/root.css"; -import { Link } from "react-router-dom"; -import { - vision_img, - quality, - fast_delivery, - support, - warranty, - cpu, -} from "../../assets/images"; -import { AllProducts } from "../../context/ContextProducts"; -import { Loader } from "../Loader/Loader"; - -import { TrendingCard } from "../"; -import { Rating } from "../../utils/filter"; -import { UseFilter } from "../../context/FilterProvider"; -import { ReducerProducts } from "../../reducer/ReducerProducts"; -import { BestSellingCard } from "../Cards/BestSellingCard"; -export function HomePage() { - const { productState } = AllProducts(); - const { data: products, loading } = - productState; - - const getAPI = { - Api: "/api/categories", - property: "categories", - }; - const { - state: { data: categories }, - } = ReducerProducts(getAPI); - - const TrendingCartProducts = Rating( - products, - 5 - ); - - return ( - <> -
-
- homePage_img - -
-
-
-
-

Vision Products

-

- Bring Vision into your - Lifestyle -

-
- -
-

Flat 30% off

- -
-
-
-
-
- - {/*----------------Service Card Section----------------*/} -
-
-
- quality -

- Provide Best Quality -

-
- -
- fast_delivery -

- Provide Fast Delivery -

-
- -
- support -

- Provide Customer Support -

-
- -
- warranty -

- Provide Warranty -

-
-
-
- - {/* */} - -
-

BestSelling Products

-
-
-
- cpu -
- - - -
- Product description One -
- -
product type
- - - - - $2000 - $3000 - - - -
- -
-
- cpu -
- - - -
- Product description One -
- -
product type
- - - - - $2000 - $3000 - - - -
- -
-
- cpu -
- - - -
- Product description One -
- -
product type
- - - - - $2000 - $3000 - - - -
- -
-
- cpu -
- - - -
- Product description One -
- -
product type
- - - - - $2000 - $3000 - - - -
-
-
- - {/* */} - - {/* */} -
- {console.log( - "categories:", - categories - )} - - {loading ? ( - - ) : ( - categories.length > 0 && - categories.map((item) => ( - - - - )) - )} -
- - {/* */} - -
- {loading ? ( - - ) : ( - TrendingCartProducts.length > - 0 && - TrendingCartProducts.map( - (item) => ( - - ) - ) - )} -
-
- - ); -} - -export default HomePage; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 66b53ae..0000000 --- a/src/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import "./index.css"; -import App from "./App"; -import { BrowserRouter } from "react-router-dom"; -import { makeServer } from "./server"; -import { ContextProducts } from "./context/ContextProducts"; -import { CartProvider } from "./context/CartProvider"; -import { WishlistProvider } from "./context/WishlistProvider"; - -// Call make Server -makeServer(); - -ReactDOM.render( - - - - - - - - - - - , - document.getElementById("root") -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals