Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

React Ecommerce

The React Ecommerce is a project relying on [React]( a powerful javascript library for building the user interface. In this project, I tried to show some features of react/react components as a ecommerce platform. The structure of this project give the ability to developer to develop their project on their own idea and environment.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.


Install NodeJs


  • If you're using Windows you should install all node-gyp dependencies with following commands:

$ npm install --global --production windows-build-tools and then install the package

$ npm install --global node-gyp


  1. Download the source code file or clone it from

  2. Go to the project root directory

    cd react-ecommerce
  3. To install node dependencies use

npm install


yarn install
  1. Open environment config and set the APIs URL. React Ecommerce is able to be connected with current Node Web APIs. Once done we are ready to use the ecommerce app.
    npm start

Project Details


The current structure could make the project easy to change and scale up. Using the currect structure we are able to develop the mobile app in parallel with web app only with changing Components layer. It means we can keep Core, Data layers, Actions, Reducers, etc. What we have high reusability and fast in producing the products. So here is the structure of the project:


Is a decoupled layer of interfaces to data and/or functionality of one or more components.


This layer is responsible for implementing actions for entities. Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.


This layer include React components that let you split the UI into independent, reusable pieces, and think about each piece in isolation.


This layer include React components that let you split the UI into independent, reusable pieces, and think about each piece in isolation.


This layer is responsible for setting constant virables, such as action type names for redux actions. Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants.


This layer is responsible for interacting with the external webservices to pull or push the data.


This layer is included reducers of entities. Reducers specify how the application's state changes in response.


This layer is responsible for configuring of redux store, such as setting reducers and midelwares. A store holds the whole state tree of your application.


  • Product listing
  • Search the product by text
  • Product Details
  • Login and Signup
  • Add to cart
  • Payment through paypal
  • Update Shipping Details

Built With

  • TypeScript TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
  • JSX/TSX This project support both *.jsx and *.tsx files. JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. Being developed at DeNA as a research project, the language has following characteristics.
  • React A javascript library for building user interfaces.
  • Redux is a predictable state container for JavaScript apps.
  • Material-UI A Set of React Components that Implement Google's Material Design.
  • react-redux Official React bindings for Redux.
  • redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, simple to test, and better at handling failures.
  • redux-thunk Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.
  • React Router V4 for routing website location
  • Sass CSS with superpowers. Sass boasts more features and abilities than any other CSS extension language out there.
  • InversifyJS InversifyJS is a lightweight (4KB) inversion of control (IoC) container for TypeScript and JavaScript apps. A IoC container uses a class constructor to identify and inject its dependencies.
  • create-react-app Create React App is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project.
You can’t perform that action at this time.