Code Monkey home page Code Monkey logo

adolfha-ecommerce's Introduction

Adolfha & Co. E-commerce Project

Welcome to Adolfha & Co., an e-commerce project built with ReactJS, leveraging various technologies and libraries such as Context API, Material-UI, CurrencyFormatter, Axios, and React Router DOM. This project interacts with the FakeStoreAPI, making requests to different endpoints to fetch product data. Adolfha & Co. provides a user-friendly interface for browsing, filtering, and purchasing products, while also offering a responsive design that adapts to different screen sizes.

Table of Contents

  • Introduction
  • Features
  • Installation
  • Usage
  • Folder Structure
  • Dependencies
  • Contributing
  • License

Introduction

Adolfha & Co. is an e-commerce project that allows users to explore and purchase a wide range of products.

The project is built using ReactJS and employs state management through Context API. Material-UI is used for a polished and consistent UI design, while CurrencyFormatter ensures proper formatting of prices.

Axios is utilized to make HTTP requests to the FakeStoreAPI, which serves as the data source for this project. React Router DOM enables smooth navigation between different pages and components.

Features

Product List Page

The home page serves as the entry point to the application and displays a list of all available products. The page includes a dropdown filtering menu that allows users to filter products by category.

Product Detail Page

Clicking on the "Discover Now" button on any product card redirects users to the product detail page. Here, users can view detailed information about the selected product. Additionally, a "Add to Basket" button is available to add the product to the user's shopping basket.

Shopping Basket

The shopping basket can be accessed by clicking on the basket icon in the navigation bar. This page displays a list of selected products in the basket. Each product card includes "Remove" and "Add" buttons, allowing users to decrease or increase the quantity of a particular item. The changes in quantity are reflected in the count displayed on the basket icon in the navigation bar.

Order Summary

Alongside the product listing in the basket page, an order summary card is provided. This card displays the names, category icons, and counts of the products in the basket. The prices of each item are multiplied by their respective counts to show the total price for each product. At the bottom, the total price of all products in the basket is calculated and displayed.

Responsive Design

The Adolfha & Co. project is fully responsive and compatible with different screen sizes. The user interface adjusts seamlessly to provide an optimal experience on desktop, tablet, and mobile devices.

Installation

To run the Adolfha & Co. project locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/bsrakts/adolfha-ecommerce.git
  1. Change to the project directory:
cd adolfha-ecommerce
  1. Install the dependencies:
npm install
  1. To start the development server and run the project, execute the following command:
npm start

This will start the application on your local machine, and you can access it in your web browser at http://localhost:3000.

Dependencies

The Adolfha & Co. e-commerce project relies on the following dependencies:

Please refer to the package.json file in the project repository for the specific versions of these dependencies.

Contributing

Contributions to the Adolfha & Co. project are welcome! If you find any issues or have suggestions for improvements, please open an issue on the project's GitHub repository:

๐Ÿ”— Links

linkedin

twitter

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.