E-commerce

An e-commerce website with the data fetching form API. Live demo here.

Table of Contents

• General Info
• Technologies Used
• Features & Challenges
• API Source
• Usage
• Room for Improvement

General Information

Idea / Motivation

• To create an e-commerce website

Purposes / Intentions

• To consolidate the usage of redux, useState, useRef, react-router-dom
• To work with API
• To use styled-components

Technologies Used

react.js

• react props, useState(), useRef(), react events, useEffect()
• react-router-dom

redux

• redux-toolkit
• redux-persist

styles

• styled-components

other libraries

• axios
• materialUI: components(Badge, Tooltip, Drawer)

Features & Challenges

cart

• ADD / REMOVE items to/from cart
• EDIT amount of items

redux - cartSlice

whishlist

• ADD / REMOVE items to/from whishlist
• ADD items of the whishlist to the cart

redux - wishlistSlice

login / logout

• Storing user info for the usage across app

redux - userSlice

For every one

For a user who has registered and logged in

Rating

• created by pure react
• Showing rating score as per data

Fetching data

• Showing data by categories
• Showing detail by single product
• Sorting data by popularity / rating / price

Slider for the showcase of products

• created by pure react

product detail page

• To show the corresponding picture that a user clicks on the smaller picture
• ADD certain amount of items to the cart
• TOGGLE feature to see more information
• <ProductDetails/> is the product detail page displaying data from fake store API. However, because of the limited info from fake store API, I made the other one for practice and wiich is <ProductDetailsDummy /> displaying dummy data (this kind of product detail page has more than one pictures)

React route

Home page

ProductList page

API Source

• fake store api

Usage

Please use fakestore api user to log in. Here is one of them:

username: "mor_2314",
password: "83r5^_"

Room for Improvement

To do:

• Error handling
• react-stripe-checkout and order page
• (Resolved) To fix slider bug