E-Commerce Product Pages

Welcome to the E-Commerce Product Pages project! This project showcases advanced and user-friendly e-commerce product pages built with a focus on frontend technologies.

Features

• Responsive Design: The product pages are fully responsive and provide a seamless experience across devices.
• Interactive Product Gallery: Users can interact with a gallery of images to view different perspectives of the product.
• Dynamic Quantity Selector: Includes a quantity selector with buttons to increase or decrease the number of items.
• Stylish Product Cards: Product cards have modern design and hover effects to enhance user interaction.
• Smooth Animations: Features animations for image transitions, hover effects, and button interactions.
• SCSS for Styling: Utilizes SCSS for modular and maintainable styling, including variables and mixins.
• TypeScript for Interactivity: TypeScript is used to manage dynamic behaviors and interactions on the pages.

Technologies Used

• HTML: Structure and content of the product pages.
• TypeScript: Added interactivity and dynamic behavior.
• SCSS: Styling with advanced features and modular approach.
• Webpack: Bundled and compiled TypeScript and SCSS files.
• CSS: For final styling output in the project.

Installation

1. Clone the Repository:

   git clone https://github.com/surajsahu46/E-commerce-pages

2. Navigate to the Project Directory:

   cd E-commerce-pages

3. Install Dependencies:

   npm install

4. Compile SCSS to CSS and TypeScript to JavaScript:

   npx webpack
   npx tsc

Usage

1. Open dist/index.html in your browser to view the product listing page.
2. Navigate to individual product pages by clicking on the product cards.

Project Structure

The project follows a structured approach with separate folders for source files and compiled output:

• /src: Contains source HTML, SCSS, and TypeScript files.
• /dist: Contains the compiled HTML, CSS, and JavaScript files ready for deployment.

Learning Outcomes

During this project, the following skills and concepts were reinforced:

• Responsive Web Design: Techniques for creating layouts that adapt to various screen sizes.
• Advanced SCSS Features: Utilized SCSS for efficient and modular styling, including variables and mixins.
• TypeScript: Applied TypeScript for type safety and enhanced interactivity in JavaScript code.
• Webpack Configuration: Set up Webpack to handle SCSS and TypeScript compilation.

Author

Suraj Sahu
Email: [email protected]
GitHub: sahusuraj46

License

This project is licensed under the MIT License.