Shoplet E-Commerce Project

Project Overview

Shoplet is a basic e-commerce web application developed as part of my Full Stack Developer Internship at CodeAlpha. The primary goal of this project was to create a functional online store with core e-commerce features like product listing, cart management, and order processing.

Key Features

• Product Listing: Users can browse through various products displayed on the homepage, each accompanied by an image, name, price, and an "Add to Cart" button.

• Product Details Modal: Clicking on a product opens a detailed modal, providing an in-depth view of the product, including its description and reviews. The modal also includes an "Add to Cart" button for convenience.

• Cart Management:

  • Users can add products to their cart from the homepage or product details modal.
  • The cart page displays all items added to the cart with options to increase/decrease quantity or remove items.
  • The cart also features a summary section showing the total amount and a button to proceed to checkout.

• Persistent Cart: The cart's contents are stored in the user's local storage, ensuring that the cart is maintained even if the user refreshes the page or revisits later.

• Checkout Process:

  • The checkout page includes a form to collect user details such as name, address, email, and phone number.
  • Upon form submission, the order is processed and saved, and the user receives a confirmation that the purchase was successful.
  • The cart is cleared after the order is completed.

Technologies Used

• Frontend: HTML, CSS, JavaScript
• Backend: Express.js, Node.js
• Database: MongoDB
• Deployment: Local environment

Screenshots

Conclusion

This project provided a hands-on experience in building a full-stack e-commerce application, enhancing my skills in both front-end and back-end development. It was a crucial part of my journey as a Full Stack Developer Intern at CodeAlpha.