/Shopperz

Primary LanguageJavaScript

Shopperz

Shopperz is an online shopping platform where users can browse products, add items to their cart, and complete the checkout process. The platform includes features for user authentication, product display, cart management, and order processing.

Features

  • User Authentication: Users can sign up, log in, and log out.
  • Product Display: Products are fetched from a fake store API and displayed with their details.
  • Cart Management: Users can add products to their cart, update quantities, and remove items.
  • Checkout: Users can fill in their shipping and payment details to place an order.
  • Session Management: Users are automatically logged out after a period of inactivity.
  • Order Confirmation: After placing an order, users receive a tracking number.

Getting Started

Prerequisites

  • Node.js installed on your local machine.

Installation

  1. Clone the repository:
git clone https://github.com/yourusername/shopperz.git
  1. Navigate to the project directory
cd shopperz
  1. Open the index.html file in your browser to view the application.

Usage

Browsing Products

  • Products are fetched from a fake store API and displayed on the homepage.
  • Click the "Add to Cart" button to add a product to your cart.

User Authentication

  • Click the "Login" or "Sign Up" buttons to open the respective forms.
  • Fill in your details to sign up or log in.

Managing Your Cart

  • View your cart by clicking the cart icon in the navigation bar.
  • Adjust the quantity of products or remove them from the cart.
  • The cart summary is displayed with the total price.

Checkout Process

  • Fill in your shipping and payment details in the checkout form.
  • Click the "Place Order" button to complete your purchase.
  • You will be redirected to a "Thank You" page with a tracking number.

Project Structure

.
├── index.html         # Main page displaying products
├── about.html         # About page
├── checkout.html      # Checkout page
├── thankyou.html      # Thank you page after placing an order
├── styles.css         # CSS for styling the index page
├── checkout.css       # CSS for styling the checkout page
├── thankyou.css       # CSS for styling the thankyou page
├── script.js          # JavaScript for handling main page logic
├── checkout.js        # JavaScript for handling checkout logic
└── README.md          # Project documentation

Contact

For any questions or feedback, please contact: