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.
- 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.
- Node.js installed on your local machine.
- Clone the repository:
git clone https://github.com/yourusername/shopperz.git
- Navigate to the project directory
cd shopperz
- Open the index.html file in your browser to view the application.
- 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.
- Click the "Login" or "Sign Up" buttons to open the respective forms.
- Fill in your details to sign up or log in.
- 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.
- 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.
.
├── 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
For any questions or feedback, please contact:
- Name: Aashutosh Soni
- Email: omsoni051@gmail.com