https://github.com/harshsinghmumbai/add_to_cart_functionality

In this Repo , I had Created Add to Cart Feature using next.js frameworks in which we can add Items in Cart ,delete Items , Increase and Decrease Quantity of Items and much more !
https://github.com/harshsinghmumbai/add_to_cart_functionality

add-to-cart delete-iteam-in-cart increase-quantity next-framework react-library redux-toolkit responsiveness shadcn-ui tailwindcss

Last synced: about 2 months ago
JSON representation

In this Repo , I had Created Add to Cart Feature using next.js frameworks in which we can add Items in Cart ,delete Items , Increase and Decrease Quantity of Items and much more !

• Host: GitHub
• URL: https://github.com/harshsinghmumbai/add_to_cart_functionality
• Owner: harshsinghmumbai
• Created: 2024-06-07T06:09:54.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-26T05:55:30.000Z (almost 2 years ago)
• Last Synced: 2025-03-25T06:28:24.197Z (about 1 year ago)
• Topics: add-to-cart, delete-iteam-in-cart, increase-quantity, next-framework, react-library, redux-toolkit, responsiveness, shadcn-ui, tailwindcss
• Language: JavaScript
• Homepage: https://add-to-cart-functionality.vercel.app
• Size: 191 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
 
 🔗 Check out the My Linkedin Profile :- https://www.linkedin.com/in/harshsinghmumbai/ 

 
🔗 Project is now live :- https://add-to-cart-functionality.vercel.app/ 

 

 Features of the Project are 🌟:-


 📱 Fully Responsive Design 

  
 Mobile Responsiveness

  

  ![Screenshot (392)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/42bf8662-22af-411f-a1ec-a934dbd20b69)

  ![Screenshot (393)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/a40e5739-6020-46de-8045-8a3762153993)

![Screenshot (394)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/ff419edb-49c3-4246-b1fd-af57e511b1ba)


 Tablet Responsiveness 


![Screenshot (395)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/6ce70a66-886c-4101-89db-35005e0cbff5)

![Screenshot (398)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/dd01dae2-2d06-4c68-9222-e717100bd031)

 Laptop Responsiveness  


![Screenshot (396)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/db816d3a-62fe-459b-a3b2-cdf51735a337)

![Screenshot (397)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/8f06e13f-df76-4671-828a-674eebaabc8a)

🔔 notification and loading_spinner feature. 
  


 Notification 


![Screenshot (400)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/7d4f70bd-c73f-4897-9b5c-6b6899456ee0)

![Screenshot (401)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/0568c436-23af-44e0-8df6-ea427b6bf16f)

 Loading 


![Screenshot (399)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/0cdeac06-1d95-46af-a9ec-28df5981c7f2)

 ⚠️ Alert Dialog Box. 


![Screenshot (402)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/c3f36710-80cd-4260-8566-10f780e0a5e9)

![Screenshot (403)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/c42d6d7e-717d-498f-afc8-a0e5f9c6909f)

➕ Add to Cart Button.


![Screenshot (406)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/73b4429e-d714-4f1e-9d55-68def2b3f2f6)

![Screenshot (407)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/b9e4a698-eef6-4a9e-b8a8-a95caa6d2292)

 🗑️ Empty Cart Button.  


![Screenshot (408)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/b3bcc986-9520-442d-bfcb-971f2bb7bf6f)

 🈸 Can Install Webapp.  


 right click on 3 bot then click on add to Home Screen 


 🌑 delete Product Items.  


![Screenshot (409)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/5fe328c0-408f-4be1-8a09-35147e0e9360)

📳 Dark mode toggle.  
 


![Screenshot (410)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/cb23cb91-e26f-464f-a5d2-9dbe71b29180)

![Screenshot (411)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/b4dd2e47-d6db-45c4-86f1-562839515927)

![Screenshot (412)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/0feed11b-3cec-4ecb-a51e-c2d7e06740ec)

 🛒 Increment and decrement quantity. 


 

![Screenshot (413)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/a91ffc3c-c08d-495f-ad08-e1d640835194)

![Screenshot (414)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/69c5053e-794f-478a-a12f-df15166a5410)

🚀 calculate total prices 


![Screenshot (415)](https://github.com/harshsinghmumbai/Add_To_Cart_Functionality/assets/145204222/16a9decc-db37-457f-8c99-9cb2c582fb92)



Technologies Used are 🌟:- 

🍦 Vanilla CSS & HTML.  

🌬️ TailwindCSS  

🤖 Vanilla JavaScript  

⚛️ Next.js (The React Full-Stack Framework)  

🛠️ Shadcn/ui Components Library