Git Product home page Git Product logo

redux-ecommerce's Introduction

Redux Ecommerce

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

Screenshot1

Screenshot2

Screenshot3

Screenshot4

Screenshot5

Screenshot6

Screenshot7

Screenshot8

Github pages deployment

# 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

redux-ecommerce's People

Contributors

nemanjam avatar

Stargazers

Clayton Kehoe avatar Arman karimi avatar Jefferson Martines avatar Coder avatar WuangHuyyy avatar Kevin Uriel Fonseca avatar Saqib Nadeem avatar Jarrian Gojar avatar Боярский Никита avatar  avatar  avatar  avatar Sabrina Medwinter avatar  avatar M1k4el4 avatar Adison Keith avatar  avatar  avatar manchit197 avatar  avatar Haluk Furkan Kıcık avatar X5 Engine avatar Himanshu Borah avatar Jayashri avatar  avatar Yassine Elmarkhi avatar Samir Hasanov avatar Rechie Lagria avatar Jarek Cichy avatar Ramakrishnan K avatar KT Lin avatar Nerius Jok avatar Milos Petrovic avatar Ayaz Ahmed avatar

Watchers

Jarek Cichy avatar  avatar Ramakrishnan K avatar  avatar

redux-ecommerce's Issues

Demo

A cross-origin error was thrown

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.