adding Shopping_cart Demo Project

28. shopping_cart/.eslintrc.json

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

28. shopping_cart/.gitignore

@@ -0,0 +1,32 @@
+# 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

28. shopping_cart/README.md

@@ -0,0 +1,57 @@
+# Add to Cart 
+# Icrease and decrease Product quantity
+# Delete from Cart
+
+## Authors
+
+- [Abdullah Moiz](https://www.github.com/Abdullah-moiz)
+
+#### live at
+https://add-to-cart-cyan.vercel.app/
+
+
+### Tech Used
+
+- tailwind css
+- nextjs
+- redux toolkit
+
+
+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
+# or
+pnpm 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.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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.

28. shopping_cart/api/index.js

@@ -0,0 +1,54 @@
+import m1 from '@/public/machines/1.png'
+import m2 from '@/public/machines/2.png'
+import m3 from '@/public/machines/3.png'
+import m4 from '@/public/machines/4.png'
+import m5 from '@/public/machines/5.png'
+import m6 from '@/public/machines/6.png'
+
+
+export const data = [
+    {
+        id : 1,
+        product_name : "Machine 1",
+        product_price : 2000 ,
+        product_quantity : 1 , 
+        product_image : m1,
+    },
+    {
+        id : 2,
+        product_name : "Machine 2",
+        product_price : 4000 ,
+        product_quantity : 1 , 
+        product_image : m2,
+    },
+    {
+        id : 3,
+        product_name : "Machine 3",
+        product_price : 5000 ,
+        product_quantity : 1 , 
+        product_image : m3,
+    },
+    {
+        id : 4,
+        product_name : "Machine 4",
+        product_price : 20000 ,
+        product_quantity : 1, 
+        product_image : m4,
+    },
+    {
+        id : 5,
+        product_name : "Machine 5",
+        product_price : 1000 ,
+        product_quantity : 1 , 
+        product_image : m5,
+    },
+    {
+        id : 6,
+        product_name : "Machine 6",
+        product_price : 2000 ,
+        product_quantity : 1 , 
+        product_image : m6,
+    },
+]
+
+export default data;

28. shopping_cart/components/Card.jsx

@@ -0,0 +1,41 @@
+import { setCart } from '@/slices/cartSlice';
+import Image from 'next/image'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import {  toast } from 'react-toastify';
+
+
+
+export default function Card({ item }) {
+    const dispatch = useDispatch();
+    const cart = useSelector(state => state.cart.cart)
+
+    const AddToCart = () => {
+        if (cart.length === 0) {
+            dispatch(setCart(item))
+            toast.success(`${item.product_name} added to cart !`)
+        }
+        else {
+            let checkProd = cart?.filter(prod => prod?.id === item?.id)
+            if (checkProd.length > 0) {
+                return toast.error(`${item.product_name} already in cart !`)
+            }
+            else {
+                dispatch(setCart(item))
+                toast.success(`${item.product_name} added to cart !`)
+            }
+        }
+    }
+
+    return (
+        <div className='w-72  mx-4 my-2 bg-gray-50'>
+            <Image priority width={400} height={400} src={item?.product_image} alt='product image' />
+            <div className='flex px-4 w-full h-16  justify-between items-center '>
+                <h1 className='font-semibold text-lg'>{item?.product_name}</h1>
+                <p className='text-base '>$ {item?.product_price}</p>
+            </div>
+            <button onClick={AddToCart} className='w-full px-2 py-2 bg-indigo-600 hover:bg-indigo-900 transition-all duration-1000 text-white rounded'>Add to Cart</button>
+        </div>
+    )
+}

28. shopping_cart/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

28. shopping_cart/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig