Stylofy Project Documentation

Introduction

The Stylofy project is a web application designed to replicate the core shopping features of Myntra. It allows users to explore fashion products, manage their shopping bag, wishlist, and complete purchases using simulated card payments. This documentation provides an overview of the project's features, technologies, and concepts.

Features and Concepts

User Interface

• Header and Navigation Bar: Displays the logo, navigation links, and user-related actions consistently across all pages.

• Footer: Provides contact details, social media links, and additional information about the project.

Product Exploration

• Landing/Home Page: Welcomes users, showcases featured products, and categorizes items.

• Product Listing Pages (Men's and Women's): Displays fashion products with sorting and filtering capabilities.

• Product Details Page: Shows detailed information about a selected product, including images, descriptions, and reviews.

User Management

• Login and Signup Pages: Allow users to authenticate or create accounts to access personalized features.

Shopping Flow

• Wishlist Page: Enables users to manage their list of preferred products using LocalStorage.

• Shopping Bag Page: Displays selected products, quantities, and total prices. Calculates the total price dynamically.

• Add Address Page: Collects shipping address details for order processing.

• Payment Page: Simulates a card payment process for completing purchases.

• Order Placement: Displays a success message after successful payment, and allows users to continue shopping.

Responsive Design

• Ensures a seamless experience on both desktop and mobile devices.

User Data Handling

• LocalStorage: Stores wishlist data locally on the user's device.

Technologies Used

• HTML5, CSS3, JavaScript: For building the user interface and client-side functionality.

Live Demo

Experience the Stylofy clone in action by visiting the Live Demo.

Installation

To run the project on your local machine:

1. Clone the repository using git clone [REPO URL].
2. Open the project directory in a code editor.
3. Open the index.html file in your preferred web browser.

Contributing

We welcome contributions to enhance the Stylofy clone. If you have feedback, suggestions, or improvements, feel free to open an issue or submit a pull request.