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 onhttp://localhost:3002