alexgurr · pandacover · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025
diff --git a/shopit/.gitignore b/shopit/.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/shopit/.prettierignore b/shopit/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
diff --git a/shopit/.prettierrc b/shopit/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/shopit/.yarn/install-state.gz b/shopit/.yarn/install-state.gz
diff --git a/shopit/.yarnrc.yml b/shopit/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/shopit/README.md b/shopit/README.md
@@ -0,0 +1,34 @@
+# Shopit Coding Challenge 🌙 &nbsp; ![medium](https://img.shields.io/badge/-Medium-yellow) ![time](https://img.shields.io/badge/%E2%8F%B0-30m-blue) 
+
+&nbsp;
+# Goals / Outcomes ✨
+- Using state and global state
+- Manipulation of global states and its side effects
+
+&nbsp;
+# Pre-requisites ✅
+- React Context
+- [Dark Mode coding challenge](https://github.com/alexgurr/react-coding-challenges/tree/master/dark-mode)
+
+&nbsp;
+# Requirements 📖
+- Add functionality to add products to cart
+- Add *states* to manage *cart items*
+- Reset *cart state* on checkout
+
+&nbsp;
+# Think about 💡
+- Where should the state reside
+- How to use and manage state
+
+&nbsp;
+# What's Already Been Done 🏁
+- Basic app UI (mobile responsive)
+- Mock products are provided
+
+&nbsp;
+# Screenshots 🌄
+&nbsp;
+![Product_Page](https://github.com/user-attachments/assets/87a72f9d-9d7e-49f6-862b-abcd9d922a86)
+&nbsp;
+![Cart_Page](https://github.com/user-attachments/assets/c12e490b-0b2a-4bed-99f2-e9c072828da0)
diff --git a/shopit/eslint.config.js b/shopit/eslint.config.js
@@ -0,0 +1,33 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+
+export default [
+  { ignores: ["dist"] },
+  {
+    files: ["**/*.{js,jsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+];
diff --git a/shopit/index.html b/shopit/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shopit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/shopit/package.json b/shopit/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "shopit",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "author": "pandacover",
+  "scripts": {
+    "start": "vite --open --port 3000",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "prettier": "3.5.3",
+    "sass": "^1.86.0",
+    "vite": "^6.2.0"
+  },
+  "packageManager": "[email protected]+sha512.955259c0370ab8c06d013faa7d5e7addb6914251029695675f54e04c917ea6b092c379ba8d3521556d90b3874e5037759467072f01d2295341ead43cc259f14b"
+}
diff --git a/shopit/public/vite.svg b/shopit/public/vite.svg
diff --git a/shopit/src/App.jsx b/shopit/src/App.jsx
@@ -0,0 +1,21 @@
+import { Route, Routes } from "react-router-dom";
+
+import Cart from "./pages/cart";
+import Products from "./pages/products";
+
+const App = () => {
+  return (
+    <div>
+      <header></header>
+      <main className="container">
+        <Routes>
+          <Route path="/" element={<Products />} />
+          <Route path="/cart" element={<Cart />} />
+        </Routes>
+      </main>
+      <footer></footer>
+    </div>
+  );
+};
+
+export default App;
diff --git a/shopit/src/assets/react.svg b/shopit/src/assets/react.svg
diff --git a/shopit/src/components/product/Product.jsx b/shopit/src/components/product/Product.jsx
@@ -0,0 +1,37 @@
+import Quantity from "../quanity";
+import styles from "./product.module.scss";
+
+const Product = ({ name, description, price, image_url, rating }) => {
+  return (
+    <article className={styles.product}>
+      <figure>
+        <img
+          width="400px"
+          height="200px"
+          style={{ objectFit: "cover" }}
+          loading="lazy"
+          src={image_url}
+        />
+      </figure>
+      <section>
+        <h3>{name}</h3>
+        <details title={description}>
+          {description}
+          <summary>Description</summary>
+        </details>
+        <div className={styles.metadata}>
+          <strong>${price}</strong>
+          <span>{rating} / 5</span>
+        </div>
+      </section>
+      <footer className="quantityContainer">
+        <Quantity
+          btnText="Add to cart"
+          btnTitle="Adding to cart will replace the item amount"
+        />
+      </footer>
+    </article>
+  );
+};
+
+export default Product;
diff --git a/shopit/src/components/product/index.js b/shopit/src/components/product/index.js
@@ -0,0 +1,3 @@
+import Product from "./Product";
+
+export default Product;
diff --git a/shopit/src/components/product/product.module.scss b/shopit/src/components/product/product.module.scss
@@ -0,0 +1,11 @@
+.product {
+  details {
+    margin-bottom: 10px;
+  }
+
+  .metadata {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+}
diff --git a/shopit/src/components/quanity/Quantity.jsx b/shopit/src/components/quanity/Quantity.jsx
@@ -0,0 +1,10 @@
+const Quantity = ({ quantity, handleChangeQuantity, btnText, btnTitle }) => {
+  return (
+    <>
+      <input type="number" value={quantity} defaultValue={0} min={0} max={5} />
+      <button className="addToCart" title={btnTitle}>{btnText}</button>
+    </>
+  );
+};
+
+export default Quantity;
diff --git a/shopit/src/components/quanity/index.js b/shopit/src/components/quanity/index.js
@@ -0,0 +1,3 @@
+import Quantity from "./Quantity";
+
+export default Quantity;
diff --git a/shopit/src/constants/mock-products.js b/shopit/src/constants/mock-products.js
@@ -0,0 +1,134 @@
+const MOCK_PRODUCTS = [
+  {
+    id: "wirelessmouse",
+    name: "Wireless Mouse",
+    description:
+      "A comfortable wireless mouse with ergonomic design and long-lasting battery life.",
+    price: 25.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Wireless+Mouse",
+    rating: 4.5,
+  },
+  {
+    id: "bluetoothheadphones",
+    name: "Bluetooth Headphones",
+    description:
+      "High-quality Bluetooth headphones with noise-canceling feature and deep bass.",
+    price: 59.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Bluetooth+Headphones",
+    rating: 4.7,
+  },
+  {
+    id: "smartphonestand",
+    name: "Smartphone Stand",
+    description:
+      "Adjustable smartphone stand suitable for various devices and viewing angles.",
+    price: 15.49,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Smartphone+Stand",
+    rating: 4.2,
+  },
+  {
+    id: "laptopsleeve",
+    name: "Laptop Sleeve",
+    description:
+      "Protective laptop sleeve made of durable material, fits most 15-inch laptops.",
+    price: 19.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Laptop+Sleeve",
+    rating: 4.3,
+  },
+  {
+    id: "usbflashdrive64gb",
+    name: "USB Flash Drive 64GB",
+    description:
+      "High-speed USB flash drive with 64GB capacity for secure data storage.",
+    price: 12.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=USB+Flash+Drive+64GB",
+    rating: 4.6,
+  },
+  {
+    id: "leddesklamp",
+    name: "LED Desk Lamp",
+    description:
+      "Energy-efficient LED desk lamp with adjustable brightness and color temperature.",
+    price: 22.5,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=LED+Desk+Lamp",
+    rating: 4.0,
+  },
+  {
+    id: "portablecharger10000mah",
+    name: "Portable Charger 10000mAh",
+    description:
+      "Compact portable charger with 10000mAh capacity, capable of charging multiple devices.",
+    price: 29.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Portable+Charger+10000mAh",
+    rating: 4.8,
+  },
+  {
+    id: "wirelessearbuds",
+    name: "Wireless Earbuds",
+    description:
+      "Sweat-resistant wireless earbuds with high-fidelity sound and secure fit.",
+    price: 49.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Wireless+Earbuds",
+    rating: 4.4,
+  },
+  {
+    id: "smartwatch",
+    name: "Smartwatch",
+    description:
+      "Feature-rich smartwatch with fitness tracking, heart rate monitor, and customizable watch faces.",
+    price: 89.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Smartwatch",
+    rating: 4.6,
+  },
+  {
+    id: "bluetoothspeaker",
+    name: "Bluetooth Speaker",
+    description:
+      "Portable Bluetooth speaker with 360-degree sound and waterproof design.",
+    price: 35.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Bluetooth+Speaker",
+    rating: 4.3,
+  },
+  {
+    id: "tabletcase",
+    name: "Tablet Case",
+    description:
+      "Slim and lightweight tablet case with multiple viewing angles and secure closure.",
+    price: 18.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Tablet+Case",
+    rating: 4.1,
+  },
+  {
+    id: "externalharddrive1tb",
+    name: "External Hard Drive 1TB",
+    description:
+      "Reliable external hard drive with 1TB capacity for extensive data storage.",
+    price: 59.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=External+Hard+Drive+1TB",
+    rating: 4.7,
+  },
+  {
+    id: "smarthomeplug",
+    name: "Smart Home Plug",
+    description:
+      "Wi-Fi enabled smart plug that allows remote control of your home appliances via smartphone.",
+    price: 14.99,
+    image_url:
+      "https://dummyjson.com/image/400x200/008080/ffffff?text=Smart+Home+Plug",
+    rating: 4.2,
+  },
+];
+
+export default MOCK_PRODUCTS;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Product from "./Product";

		export default Product;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Quantity from "./Quantity";

		export default Quantity;