Frontend E-commerce Website App

I made a fully responsive e-commerce website built using React.js and Tailwind CSS. It provides a seamless and intuitive user experience with a clean, modern interface. This project is designed for those who want a starting point for creating their own online store or e-commerce platform.

Features

• Responsive Design: Optimized for all screen sizes (desktop, tablet, and mobile).
• Product Listings: Dynamically displays products with images, prices, and descriptions.
• Product Search: Allows users to search for products by name or category.
• Filter & Sorting: Provides options to filter products by categories and sort by price, popularity, or rating.
• Shopping Cart: Enables users to add, view, and remove products from their cart.
• Checkout Page: Includes a summary of selected products, total price calculation, and a button to proceed to checkout.
• **Cookies and Restricted Pages **: Implements user authentication and session management using cookies. Pages that require authentication are restricted, and users are redirected to the login page if they attempt to access these areas without being logged in. The system utilizes dummyjson API for user data and authentication simulation.
• Pagination: Handles product listing with pagination for better performance and user experience.
• Reusable Components: Built with modular and reusable React components for maintainability.

API Integration

This project fetches product data from the dummyjson API, ensuring a dynamic and real-time data-driven experience. All product details, including categories, pricing, and images, are retrieved from this external source.

Installation and Setup

Follow these steps to get the project up and running on your local machine:

1. Clone this repository:

   git clone https://github.com/fiqrioemry/Frontend_eccomerce_web_app.git
   cd Frontend_eccomerce_web_app
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm rum

Technologies Used

• React.js: For building the user interface.
• Tailwind CSS: For styling and layout.
• React Router: For handling navigation between pages.
• Redux (or Context API): For state management (if applicable).
• Axios: For making API requests.
• dummyjson API: For fetching product data.

Future Enhancements

• Implementing a payment gateway for a complete checkout process.
• Adding a wishlist feature.
• Enhancing animations and transitions for a smoother user experience.

Author : Ahmad Fiqri Oemry Website Link : https://exclusivemart.netlify.app/