E-Commerce Product Page

A modern e-commerce product page built with React and Tailwind CSS , showcasing a limited edition sneaker product. This application includes a dynamic image slider, lightbox functionality, and a shopping cart .

This is a challenge from Frontend Mentor.

Live Demo

You can view the live demo of the project here.

Features

• Image Slider: Interactive image slider for product images with next/previous navigation.
• Lightbox: Full-screen lightbox for viewing product images in detail.
• Shopping Cart: Add items to the cart with quantity control and checkout option (for now design only).
• Responsive Design: Fully responsive layout optimized for both mobile and desktop views.

Getting Started

To run this project locally, follow these steps:

1. Clone the Repository:

   ```bash git clone https://github.com/mirkoterzic/e-commerce-product-page.git

2. Navigate to the Project Directory:

   cd e-commerce-product-page
   

3. Install Dependencies:

   npm install
   

4. Start the Development Server:

   ```bash npm start

Your application will be available at http://localhost:3000

Scripts

• npm start: Starts the development server.
• npm run build: Builds the application for production.
• npm run deploy: Deploys the build directory to GitHub Pages.
• npm test: Runs the tests.
• npm run eject: Ejects the configuration files (use with caution).

Dependencies

• React: A JavaScript library for building user interfaces.
• React Icons: Collection of popular icons for React.
• Tailwind CSS: Utility-first CSS framework for building custom designs.
• gh-pages: Utility for deploying to GitHub Pages.

Acknowledgements

• React - The library used for building the UI.
• Tailwind CSS - The CSS framework for styling.
• GitHub Pages - For hosting the live demo.

Author

Mirko Terzic

GitHub

LinkedIn

LeetCode

Frontedn Mentor Profile