ecommerce web application

ecommerce/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react"]
+}

ecommerce/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/babel", "next/core-web-vitals"]
+}

ecommerce/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

ecommerce/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

ecommerce/components/Cart.jsx

@@ -0,0 +1,143 @@
+import React, { useRef } from "react";
+import Link from "next/link";
+import {
+  AiOutlineMinus,
+  AiOutlinePlus,
+  AiOutlineLeft,
+  AiOutlineShopping,
+} from "react-icons/ai";
+import { TiDeleteOutline } from "react-icons/ti";
+import toast from "react-hot-toast";
+
+import { useStateContext } from "../context/StateContext";
+import { urlFor } from "../lib/client";
+import getStripe from "../lib/getStripe";
+
+const Cart = () => {
+  const cartRef = useRef();
+  const {
+    totalPrice,
+    totalQuantities,
+    cartItems,
+    setShowCart,
+    toggleCartItemQuanitity,
+    onRemove,
+  } = useStateContext();
+
+  const handleCheckout = async () => {
+    const stripe = await getStripe();
+
+    const response = await fetch("/api/stripe", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(cartItems),
+    });
+
+    if (response.statusCode === 500) return;
+
+    const data = await response.json();
+
+    toast.loading("Redirecting...");
+
+    stripe.redirectToCheckout({ sessionId: data.id });
+  };
+
+  return (
+    <div className="cart-wrapper" ref={cartRef}>
+      <div className="cart-container">
+        <button
+          type="button"
+          className="cart-heading"
+          onClick={() => setShowCart(false)}
+        >
+          <AiOutlineLeft />
+          <span className="heading">Your Cart</span>
+          <span className="cart-num-items">({totalQuantities} items)</span>
+        </button>
+
+        {cartItems.length < 1 && (
+          <div className="empty-cart">
+            <AiOutlineShopping size={150} />
+            <h3>Your shopping bag is empty</h3>
+            <Link href="/">
+              <button
+                type="button"
+                onClick={() => setShowCart(false)}
+                className="btn"
+              >
+                Continue Shopping
+              </button>
+            </Link>
+          </div>
+        )}
+
+        <div className="product-container">
+          {cartItems.length >= 1 &&
+            cartItems.map((item) => (
+              <div className="product" key={item._id}>
+                <img
+                  src={urlFor(item?.image[0])}
+                  className="cart-product-image"
+                />
+                <div className="item-desc">
+                  <div className="flex top">
+                    <h5>{item.name}</h5>
+                    <h4>₹{item.price}</h4>
+                  </div>
+                  <div className="flex bottom">
+                    <div>
+                      <p className="quantity-desc">
+                        <span
+                          className="minus"
+                          onClick={() =>
+                            toggleCartItemQuanitity(item._id, "dec")
+                          }
+                        >
+                          <AiOutlineMinus />
+                        </span>
+                        <span className="num" onClick="">
+                          {item.quantity}
+                        </span>
+                        <span
+                          className="plus"
+                          onClick={() =>
+                            toggleCartItemQuanitity(item._id, "inc")
+                          }
+                        >
+                          <AiOutlinePlus />
+                        </span>
+                      </p>
+                    </div>
+                    <button
+                      type="button"
+                      className="remove-item"
+                      onClick={() => onRemove(item)}
+                    >
+                      <TiDeleteOutline />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+        </div>
+        {cartItems.length >= 1 && (
+          <div className="cart-bottom">
+            <div className="total">
+              <h3>Subtotal:</h3>
+              <h3>₹{totalPrice}</h3>
+            </div>
+            <div className="btn-container">
+              <button type="button" className="btn" onClick={handleCheckout}>
+                Pay with Stripe
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Cart;

ecommerce/components/Footer.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { AiFillInstagram, AiOutlineTwitter } from "react-icons/ai";
+const Footer = () => {
+  return (
+    <div className="footer-container">
+      <p>SAS Store All rights reserverd</p>
+      <p className="icons">
+        <AiFillInstagram />
+        <AiOutlineTwitter />
+      </p>
+    </div>
+  );
+};
+
+export default Footer;

ecommerce/components/FooterBanner.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Link from "next/link";
+
+import { urlFor } from "../lib/client";
+
+const FooterBanner = ({
+  footerBanner: {
+    discount,
+    largeText1,
+    largeText2,
+    saleTime,
+    smallText,
+    midText,
+    desc,
+    product,
+    buttonText,
+    image,
+  },
+}) => {
+  return (
+    <div className="footer-banner-container">
+      <div className="banner-desc">
+        <div className="left">
+          <p>{discount}</p>
+          <h3>{largeText1}</h3>
+          <h3>{largeText2}</h3>
+          <p>{saleTime}</p>
+        </div>
+        <div className="right">
+          <p>{smallText}</p>
+          <h3>{midText}</h3>
+          <p>{desc}</p>
+          <Link href={`/product/${product}`}>
+            <button type="button">{buttonText}</button>
+          </Link>
+        </div>
+
+        <img
+          src={urlFor(image)}
+          className="footer-banner-image"
+          width={200}
+          height={200}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FooterBanner;

ecommerce/components/HeroBanner.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Link from "next/link";
+
+import { urlFor } from "../lib/client";
+
+const HeroBanner = ({ heroBanner }) => {
+  return (
+    <div className="hero-banner-container">
+      <div>
+        <p className="beats-solo">{heroBanner.smallText}</p>
+        <h3>{heroBanner.midText}</h3>
+        <h1>{heroBanner.largeText1}</h1>
+        <img
+          src={urlFor(heroBanner.image)}
+          alt="headphones"
+          className="hero-banner-image"
+        />
+
+        <div>
+          <Link href={`/product/${heroBanner.product}`}>
+            <button type="button">{heroBanner.buttonText}</button>
+          </Link>
+          <div className="desc">
+            <h5>Description</h5>
+            <p>{heroBanner.desc}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroBanner;

ecommerce/components/Layout.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Head from "next/head";
+import Navbar from "./Navbar";
+import { Footer } from ".";
+export const Layout = ({ children }) => {
+  return (
+    <div className="layout">
+      <Head>
+        <title>SAS Group Store</title>
+      </Head>
+      <header>
+        <Navbar />
+      </header>
+      <main className="main-container">{children}</main>
+      <footer>
+        <Footer />
+      </footer>
+    </div>
+  );
+};
+export default Layout;

ecommerce/components/Navbar.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { AiOutlineShopping } from "react-icons/ai";
+import { Cart } from "./";
+import { useStateContext } from "../context/StateContext";
+const Navbar = () => {
+  const { showCart, setShowCart, totalQuantities } = useStateContext();
+  return (
+    <div className="navbar-container">
+      <p className="logo">
+        <a href="/">SAS Store</a>
+      </p>
+      <div className="App">
+        <input type="text" placeholder="search..." />
+      </div>
+      <button
+        type="button"
+        className="cart-icon"
+        onClick={() => setShowCart(true)}
+      >
+        <AiOutlineShopping />
+        <span className="cart-item-qty">{totalQuantities}</span>
+      </button>
+      {showCart && <Cart />}
+    </div>
+  );
+};
+export default Navbar;

ecommerce/components/Product.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Link from "next/link";
+import { urlFor } from "../lib/client";
+
+const Product = ({ product: { image, name, slug, price } }) => {
+  return (
+    <div>
+      <Link href={`/product/${slug.current}`}>
+        <div className="product-card">
+          <img
+            src={urlFor(image && image[0])}
+            width={250}
+            height={250}
+            className="product-image"
+          />
+          <p className="product-name">{name}</p>
+          <p className="product-price">₹{price}</p>
+        </div>
+      </Link>
+    </div>
+  );
+};
+export default Product;