Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nemanjam/redux-ecommerce

Ecommerce website with React Hooks and Redux.
https://github.com/nemanjam/redux-ecommerce

bootstrap ecommerce hooks react redux redux-thunk

Last synced: 5 days ago
JSON representation

Ecommerce website with React Hooks and Redux.

Host: GitHub
URL: https://github.com/nemanjam/redux-ecommerce
Owner: nemanjam
Created: 2019-09-20T19:26:09.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-02-28T12:18:31.000Z (over 1 year ago)
Last Synced: 2023-03-03T16:18:38.022Z (over 1 year ago)
Topics: bootstrap, ecommerce, hooks, react, redux, redux-thunk
Language: JavaScript
Homepage: https://nemanjam.github.io/redux-ecommerce
Size: 25.9 MB
Stars: 31
Watchers: 3
Forks: 14
Open Issues: 10
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Redux Ecommerce

Simple ecommerce website made with React Hooks and Redux.

## Demo and Codesandbox

- Live demo is available here: **[Demo](https://nemanjam.github.io/redux-ecommerce)**
- Codesandbox is available here: **[Codesandbox](https://codesandbox.io/s/github/nemanjam/redux-ecommerce)**

## 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

![Screenshot1](/screenshots/Screenshot_1.png)

![Screenshot2](/screenshots/Screenshot_2.png)

![Screenshot3](/screenshots/Screenshot_3.png)

![Screenshot4](/screenshots/Screenshot_4.png)

![Screenshot5](/screenshots/Screenshot_5.png)

![Screenshot6](/screenshots/Screenshot_6.png)

![Screenshot7](/screenshots/Screenshot_7.png)

![Screenshot8](/screenshots/Screenshot_8.png)

## Github pages deployment

```bash
# must use HashRouter
# set "homepage": "/redux-ecommerce/#", 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
```