initial commit

alim1496 · Feb 7, 2024 · 3a43493 · 3a43493
commit 3a43493
Show file tree

Hide file tree

Showing 58 changed files with 4,191 additions and 0 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "social-site-demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.0.1",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.22.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/banner.jpg b/public/banner.jpg
diff --git a/public/emptyCart.jpg b/public/emptyCart.jpg
diff --git a/public/hero.png b/public/hero.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,40 @@
+import { Provider } from "react-redux";
+import "./App.css";
+import { store } from "./redux/store";
+import Navbar from "./components/Navbar";
+import { Route, Routes } from "react-router-dom";
+import Home from "./pages/Home";
+import { Toaster } from "react-hot-toast";
+import Footer from "./components/Footer";
+import Cart from "./components/Cart";
+import SingleProduct from "./pages/SingleProduct";
+import LoginModal from "./components/LoginModal";
+import Wishlist from "./pages/Wishlist";
+import ProtectedRoute from "./components/ProtectedRoute";
+import Profile from "./pages/Profile";
+import AllProducts from "./pages/AllProducts";
+
+function App() {
+  return (
+    <Provider store={store}>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/products" element={<AllProducts />} />
+        <Route path="/product/:productID" element={<SingleProduct />} />
+        <Route path="/wishlist" element={<ProtectedRoute />}>
+          <Route path="/wishlist" element={<Wishlist />} />
+        </Route>
+        <Route path="/account" element={<ProtectedRoute />}>
+          <Route path="/account" element={<Profile />} />
+        </Route>
+      </Routes>
+      <Toaster position="bottom-center" reverseOrder={false} />
+      <Footer />
+      <Cart />
+      <LoginModal />
+    </Provider>
+  );
+}
+
+export default App;
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { Link } from "react-router-dom";
+
+const Banner: FC = () => (
+  <div className="container mt-8 mx-auto px-4 md:flex font-lora">
+    <img src="/banner.jpg" alt="banner" className="md:w-1/2" />
+    <div className="bg-[#e3edf6] md:w-1/2 flex flex-col items-center text-center justify-center p-4">
+      <h1 className="text-4xl font-bold mb-1">Don't miss the offer</h1>
+      <h2 className="text-3xl font-semibold mb-4">Grab it now</h2>
+      <Link
+        to="/product/4"
+        className="inline-block bg-white rounded-md px-6 py-3 hover:bg-blue-500 hover:text-white"
+      >
+        Shop Now
+      </Link>
+    </div>
+  </div>
+);
+
+export default Banner;
diff --git a/src/components/Cart.tsx b/src/components/Cart.tsx
@@ -0,0 +1,103 @@
+import { FC, useState } from "react";
+import { RxCross1 } from "react-icons/rx";
+import { useAppDispatch, useAppSelector } from "../redux/hooks";
+import { emptyCart, setCartState } from "../redux/features/cartSlice";
+import CartRow from "./CartRow";
+import toast from "react-hot-toast";
+
+const Cart: FC = () => {
+  const dispatch = useAppDispatch();
+  const isOpen = useAppSelector((state) => state.cartReducer.cartOpen);
+  const items = useAppSelector((state) => state.cartReducer.cartItems);
+  const [checkout, setCheckout] = useState(false);
+
+  const calculateTotal = () => {
+    let total = 0;
+    items.forEach((item) => {
+      if (item.quantity && item.discountPercentage)
+        total +=
+          (item.price - (item.price * item.discountPercentage) / 100) *
+          item.quantity;
+    });
+    return total.toFixed(2);
+  };
+
+  const handleOrder = () => {
+    dispatch(setCartState(false));
+    dispatch(emptyCart());
+    setCheckout(false);
+    toast.success("your order has been confirmed", { duration: 3000 });
+  };
+
+  if (isOpen) {
+    return (
+      <div className="bg-[#0000007d] w-full min-h-screen fixed left-0 top-0 z-20 overflow-y-auto">
+        {checkout ? (
+          <div className="max-w-[400px] w-full min-h-full bg-white absolute right-0 top-0 p-6 font-karla">
+            <h1 className="font-bold text-xl mb-1">Checkout</h1>
+            <p className="leading-4 mb-3">
+              Welcome to the checkout section. This is being a development
+              project, I haven't implemented any payment related task. If you
+              click the cancel button you'll go back to the cart segment.
+              Clicking confirm button will consider your order confirmed,
+              payment done & also order delivered successfully. Another thing to
+              mention, order history hasn't been developed due to not having a
+              proper backend api.
+            </p>
+            <div className="flex items-center space-x-2">
+              <span
+                className="w-1/2 border border-gray-500 rounded cursor-pointer text-center py-1"
+                onClick={() => setCheckout(false)}
+              >
+                Cancel
+              </span>
+              <span
+                className="w-1/2 border border-gray-500 rounded cursor-pointer text-center py-1"
+                onClick={handleOrder}
+              >
+                Confirm
+              </span>
+            </div>
+          </div>
+        ) : (
+          <div className="max-w-[400px] w-full min-h-full bg-white absolute right-0 top-0 p-6 font-karla">
+            <div className="flex items-center justify-between">
+              <h3 className="font-semibold text-2xl">Your Cart</h3>
+              <RxCross1
+                className="text-[24px] cursor-pointer hover:opacity-70"
+                onClick={() => dispatch(setCartState(false))}
+              />
+            </div>
+            <div className="mt-6 space-y-2">
+              {items?.length > 0 ? (
+                items.map((item) => <CartRow key={item.id} {...item} />)
+              ) : (
+                <div className="flex flex-col justify-center items-center p-4">
+                  <img src="/emptyCart.jpg" alt="empty" className="w-40" />
+                  <p className="text-center text-xl my-2">Your cart is empty</p>
+                </div>
+              )}
+            </div>
+            {items?.length > 0 && (
+              <>
+                <div className="flex items-center justify-between p-2">
+                  <h2 className="font-bold text-2xl">Total</h2>
+                  <h2 className="font-bold text-2xl">${calculateTotal()}</h2>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setCheckout(true)}
+                  className="w-full text-center text-white bg-blue-500 py-2 my-4 rounded font-bold text-xl hover:bg-blue-700"
+                >
+                  CHECKOUT
+                </button>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+};
+
+export default Cart;
diff --git a/src/components/CartRow.tsx b/src/components/CartRow.tsx
@@ -0,0 +1,76 @@
+import { FC } from "react";
+import { CartItem } from "../models/CartItem";
+import {
+  IoIosAddCircleOutline,
+  IoIosRemoveCircleOutline,
+} from "react-icons/io";
+import { useAppDispatch } from "../redux/hooks";
+import {
+  addToCart,
+  reduceFromCart,
+  removeFromCart,
+} from "../redux/features/cartSlice";
+import { RiDeleteBin6Line } from "react-icons/ri";
+import useDiscount from "../hooks/useDiscount";
+
+const CartRow: FC<CartItem> = ({
+  id,
+  thumbnail,
+  title,
+  price,
+  quantity,
+  rating,
+  category,
+  discountPercentage = 0,
+}) => {
+  const dispatch = useAppDispatch();
+  const result = useDiscount({ price, discount: discountPercentage });
+
+  return (
+    <div className="grid grid-cols-7 gap-3 border items-center">
+      <img src={thumbnail} alt="thumbnail" className="h-20 col-span-2" />
+      <div className="col-span-3">
+        <h3 className="font-bold leading-4">{title}</h3>
+        <div className="flex space-x-2 items-center">
+          <h3 className="font-semibold">${result.toFixed(2)}</h3>
+          {discountPercentage !== 0 && (
+            <span className="text-xs">-{discountPercentage}%</span>
+          )}
+        </div>
+
+        <div className="flex items-center space-x-1">
+          <IoIosRemoveCircleOutline
+            className="cursor-pointer hover:opacity-80"
+            onClick={() => dispatch(reduceFromCart(id))}
+          />
+          <span>{quantity}</span>
+          <IoIosAddCircleOutline
+            className="cursor-pointer hover:opacity-80"
+            onClick={() =>
+              dispatch(
+                addToCart({
+                  id,
+                  title,
+                  price,
+                  quantity,
+                  thumbnail,
+                  rating,
+                  category,
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+      <div className="font-bold col-span-2">
+        {quantity && <span>${(result * quantity).toFixed(2)}</span>}
+        <RiDeleteBin6Line
+          className="text-red-500 cursor-pointer text-2xl hover:text-red-600"
+          onClick={() => dispatch(removeFromCart(id))}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CartRow;