hideotadev / ecommerce-react

Users can search for products from 4 categories. They can sort and filter products by price or category, and add items to cart. The checkout includes a billing form and an order summary.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

E-Commerce site

Users can search for products from 4 categories. They can sort and filter products by price or category, and add items to cart. The checkout includes a billing form and an order summary.

You can check out the LIVE project HERE.


Motivation

The primary motive was to try out and learn both Redux and Material-UI. I also thought an e-commerce project would be an interesting and educational undertaking in general. I discovered Fake Store API to get data for my application.


Technologies used:

  • ReactJS
  • Redux for state management
  • Material-UI for styling and components
  • React Router for routing

Challenges:

Getting accustomed to Redux workflow was rather intimidating at first. It was difficult to wrap my head around all the boilerplate code necessary to even begin doing something. I chose to deep-dive into the Redux official documentation to get a better understanding, and eventually it started to make more sense.

I had never worked with a UI framework before either and it felt strange not having to build everything from scratch. I learned that the best way to understand the Material-UI ecosystem better was just to implement components in my project and try to customize them.


Screenshots of the live project:

Products:

Screencapture of the deployed E-Commerce project landing page. User can choose products from different categories and sort and filter by price


Cart:

Screencapture of the deployed E-Commerce project cart page. User can add or remove products.


Billing:

Screencapture of the deployed E-Commerce project billing page. User can select his/her billing information.


Review:

Screencapture of the deployed E-Commerce project review page. User can review his/her billing information.

About

Users can search for products from 4 categories. They can sort and filter products by price or category, and add items to cart. The checkout includes a billing form and an order summary.


Languages

Language:JavaScript 97.8%Language:HTML 1.1%Language:Shell 1.0%Language:SCSS 0.1%