/e-commerce

E-Commerce project build with React.

Primary LanguageJavaScript

E-Commerce

E-Commerce project build with React.

Live demo

Getting Started

In order to setup and work on this project on your own, you will need to:

  1. Clone this project:
    git clone https://github.com/GDimitroff/e-commerce.git

  2. Once you have cloned this project, you can install the required dependencies by using:
    npm install

  3. A live demo of the project can be started by using:
    npm start

  4. Distribution files can be produced using:
    npm run build

  5. You will need to create Firebase account and follow the instructions in their documentation in order authentication to work.

Features

  • Landing page with featured products.
  • Dynamically loaded products page.
  • Every product has a details page with option to select desired amount and color which can be added to the shopping cart.
  • Filtering products by name, brand, color, price, shipping or/and category.
  • Sorting products by name or price.
  • Fully functional shopping cart with ability to toggle the quantity of every single product or remove it.

Outcome

  • Deepened knowledge of using useEffect hook.
  • Deepened knowledge of using useCallback hook.
  • Learned how to work with multiple contexts and reducers.
  • Used react-router.
  • Used axios.
  • Used Firebase services for authentication.
  • Learned how to build protected routes.
  • Used react-firebase-hooks in combination with AuthContext for authentication state management.
  • Used global CSS styles in combination with styled components.
  • Used react-icons.
  • Tried to keep file structure as clean as possible.
  • Deepened knowledge of using third party libraries.
  • Learned a lot about Mobile-First design philosophy.
  • Overall, I have improved my React knowledge A LOT! šŸ§ 

Screenshots

Screenshot1

Screenshot2

Screenshot3