Eshop page

Simple ecommerce website made with React Hooks and Redux.

Demo and Codesandbox

• Live demo is available here: Demo
• Codesandbox is available here: Codesandbox

Features

• Home, Products, Product Details, Liked, Cart, Login, Profile and Error pages
• State management with Redux
• Responsive design with Bootstrap
• Products pagination with infinite scroll
• Insert Advertisements at every N products
• Products sorting by price, weight, size asc and desc
• Product filtering by brand and color
• Ability to like the products (wishlist)
• Product Details page with image magnify
• Cart with increment, decrement and remove product abilities
• Local Login/Register with Formik validation
• Login with Google OAuth, client side auth
• Profile page is behind protected route
• Product card with loader for image loading
• Toast messages for adding, liking a product, login/logout with Google/Local and network errors
• Loading state with spinner with text or default spinner
• Two fake backends with Promise and Axios-Mock-Adapter strategies
• Config file with settable pagination page size, advertisement index and fake backend delay
• Dynamic data creation and randomizing with Faker
• Dynamic carousel width with React Container Dimensions and image cropping with object-fit:cover

Libraries used

• React with Hooks, Redux, Redux Thunk
• React Bootstrap with Cosmo theme
• React Infinite Scroller, React Image Magnify, React Google Login, React Container Dimensions
• Axios, Axios Mock Adapter, Formik, Faker

Installation and running

• npm install
• npm run start app wil be loaded on http://localhost:3002

Screenshots

Github pages deployment

# must use HashRouter
# set "homepage": "/eshop-page/#", in package.json

# must have in .env
SKIP_PREFLIGHT_CHECK=true

# must have this env var in terminal
export NODE_OPTIONS=--openssl-legacy-provider

# redeploy
npm run deploy