Sugar Cosmetics Project

Overview

The Sugar Cosmetics project is a React-based web application designed for an e-commerce platform specializing in cosmetics. The application includes features such as product display, sorting and filtering, user authentication, and detailed product pages.

Features

• User Authentication: Secure login and logout functionality.
• Product Display: List of products fetched from an API, with detailed views for each product.
• Sorting and Filtering: Options to sort and filter products based on various criteria.
• Responsive Design: Mobile-first approach for a seamless user experience across devices.

Technologies Used

• Frontend: React, React Router, Chakra UI
• Backend: Axios for API calls
• State Management: Context API, useState, useEffect, useRef
• Build Tool: CRA

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/sugar-cosmetics.git
   cd sugar-cosmetics

2. Install the dependencies:

   npm install

3. Start the development server:

   npm start

Usage

• Login: Navigate to the Login page to authenticate.
• Browse Products: View the list of available products on the Home page.
• View Product Details: Click on a product to see more details on the Product Details page.
• Sort and Filter: Use the sorting and filtering options to customize the product display.

API Endpoints

• Login Page API: https://peerabduljabbar.notion.site/Login-User-d0297e2e8f034e0981d1262d2217d745
• Home Page API: https://dbioz2ek0e.execute-api.ap-south-1.amazonaws.com/mockapi/get-products
• Product Details Page API: https://dbioz2ek0e.execute-api.ap-south-1.amazonaws.com/mockapi/get-products

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature-name

3. Make your changes and commit them:

   git commit -m "Add feature"

4. Push to the branch:

   git push origin feature-name

5. Create a pull request.