## Setup redux with react

Let's setup redux, so that we can finally move on to building our ecommerce app by creating pages.

``` src/index.js ```

```js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
// redux
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import { rootReducer } from "./reducers";
import { composeWithDevTools } from "redux-devtools-extension";

// store
const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

```

At this point our app will show error that says `Module not found: Can't resolve './reducers' `

Thats because we have imported rootReducer but that does not exist, Lets create `reducers` folder with two files `index.js` and `userReducer.js`

``` src/reducers/userReducer.js ```

```js
export function userReducer(state = {}, action) {
  switch (action.type) {
    case "LOGGED_IN_USER":
      return action.payload;
    default:
      return state;
  }
}
```

It's time to create a `rootReducer`, which will combine multiple reducers. At the moment we have only `userReducer` but we will add more reducers later.
``` src/reducers/index.js ```

``` src/reducers/index.js ```

```js
import { combineReducers } from "redux";
import { userReducer } from "./userReducer";

export const rootReducer = combineReducers({
  user: userReducer,
});

```

Great. Now if you have a redux extension installed in your chrome browser you should be able to see the redux state. At the moment our state has nothing but `user: {}`

 ![React with redux] (https://codecontinue.sfo2.digitaloceanspaces.com/STORAGE/post/8c007c1c-790b-4e87-8663-6a2c6dce5bcf.jpeg)


React Node MERN Ecommerce Tutorial 8

There is a bit more work to be done before we start implementing login system to our app. We have to setup routing system with react router. We also have to setup redux. But first lets start with navigation.

#### Move navigation to its own component

Previously we wrote our navigation inside `App.js`. Soon we will use `App.js` as an entry point for our react app. This is where we will import all the components and implement routing system using react-router-dom.

For now, lets focus on moving navigation to its own component.

```/src/components/nav/Header.js```

You can pretty much copy all the code from `App.js` into `Header.js` and just change the component name.

```App.js```

```js
import React from "react";
import Header from "./components/nav/Header";

const App = () => {
  return (
    <>
      <Header />
    </>
  );
};

export default App;
```

Full code of `Header.js`

```js
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Menu } from "antd";
import {
  AppstoreOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import "antd/dist/antd.css"; // import ant css

const { SubMenu } = Menu;
// destructure ItemGroup and Item from Menu
const { ItemGroup, Item } = Menu;

const Header = () => {
  const [current, setCurrent] = useState("home");

  return (
    <Menu
      onClick={(e) => setCurrent(e.key)}
      selectedKeys={[current]}
      mode="horizontal"
    >
      <Item key="home" icon={<AppstoreOutlined />}>
        <Link to="/">home</Link>
      </Item>

      <SubMenu icon={<SettingOutlined />} title="Admin">
        <ItemGroup title="Item 1">
          <Item key="setting:1">Option 1</Item>
          <Item key="setting:2">Option 2</Item>
        </ItemGroup>
      </SubMenu>
      <Item key="login" icon={<UserOutlined />}>
        <Link to="/login">Login</Link>
      </Item>
    </Menu>
  );
};

export default Header;

```



React Node MERN Ecommerce Tutorial 7

## Installing firebase

```js
npm i firebase
```

Lets add firebase config to `.env` file

``` .env ```

```js
REACT_APP_FB_API_KEY=XXX
REACT_APP_FB_AUTH_DOMAIN=XXX.firebaseapp.com
REACT_APP_FB_PROJECT_ID=XXX
REACT_APP_FB_APP_ID=XXX
```

### Initialize Firebase
```/src/firebase.js```

```js
// import firebase from "firebase/app";
import * as firebase from "firebase";

var firebaseConfig = {
  apiKey: process.env.REACT_APP_FB_API_KEY,
  authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FB_PROJECT_ID,
  appId: process.env.REACT_APP_FB_APP_ID,
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// export default firebase;
export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
```




React Node MERN Ecommerce Tutorial 6

## Firebase setup

Now that we have our basic app setup with navigation. Let's move on to create pages. First we need to implement login system.

### Login system with firebase

Instead of writing our own login/register system, we will use firebase authentication. 

#### Benefits of firebase authentication

* Fully secure login system with refresh token to continuously keep the user logged in
* Easy to implement social login with Google, Facebook etc
* Completely free to use

Head over to [Firebase] (https://firebase.google.com/) and create a new app. Once you create a new app, you will get all project configuration needed.

It should look something like this:

```JS
var firebaseConfig = {
    apiKey: "XXX",
    authDomain: "XXX.firebaseapp.com",
    databaseURL: "https://XXX.firebaseio.com",
    projectId: "XXX",
    storageBucket: "XXX.appspot.com",
    messagingSenderId: "XXX",
    appId: "XXX"
};
```

Now we are ready to implement firebase into our react app.

### Activate Google and Github login

In this project, we will implement google and github login system. You can also add facebook and other services if you wish.

**IMPORTANT**

Make sure to click on Authentication(in the left sidebar) and go to signin methods. There you should enable **Google** and **Github** as signin methods.



React Node MERN Ecommerce Tutorial 5

## Routing System with React Router

Currently our navigation links do not take us anywhere. Lets implement routing system with react router so that we can serve pages to our users. Each component can be served as pages.

In `src/index.js`, import `BrowserRouter` componentn from react router and wrap our app with is App.js. Here is the full code for `src/index.js`

```js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);
```
Now we can use Link component from react-router. Go to `App.js` and wrap the link names with `Link` component. We will be creating pages soon.

### Destructure `Item` and `ItemGroup` from `Menu` component
We are doing this just make our code a bit cleaner.

Here is the full code of `App.js` with the changes. The only change is the use of `Link` components in nav links.

```js
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Menu } from "antd";
import {
  AppstoreOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import "antd/dist/antd.css"; // import ant css

const { SubMenu } = Menu;
// destructure ItemGroup and Item from Menu
const { ItemGroup, Item } = Menu;

const App = () => {
  const [current, setCurrent] = useState("home");

  return (
    <Menu
      onClick={(e) => setCurrent(e.key)}
      selectedKeys={[current]}
      mode="horizontal"
    >
      <Item key="home" icon={<AppstoreOutlined />}>
        <Link to="/">home</Link>
      </Item>

      <SubMenu icon={<SettingOutlined />} title="Admin">
        <ItemGroup title="Item 1">
          <Item key="setting:1">Option 1</Item>
          <Item key="setting:2">Option 2</Item>
        </ItemGroup>
      </SubMenu>
      <Item key="login" icon={<UserOutlined />}>
        <Link to="/login">Login</Link>
      </Item>
    </Menu>
  );
};

export default App;


```




React Node MERN Ecommerce Tutorial 4

## Create Navbar

We will start off by modifying `src/App.js`. Let's use ant design components to build beautiful navigation. Then we will move the navigation to its own component later.

The code is pretty much copy/paste from official docs of [ant design] (https://ant.design/components/menu/#header). 

Replace `App.js` code with the following code:

```js
import React, { useState } from "react";
import { Menu } from "antd";
import {
  AppstoreOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import "antd/dist/antd.css"; // import ant css

const { SubMenu } = Menu;

const App = () => {
  const [current, setCurrent] = useState("home");

  return (
    <Menu
      onClick={(e) => setCurrent(e.key)}
      selectedKeys={[current]}
      mode="horizontal"
    >
      <Menu.Item key="home" icon={<AppstoreOutlined />}>
        Home
      </Menu.Item>

      <SubMenu icon={<SettingOutlined />} title="Admin">
        <Menu.ItemGroup title="Item 1">
          <Menu.Item key="setting:1">Option 1</Menu.Item>
          <Menu.Item key="setting:2">Option 2</Menu.Item>
        </Menu.ItemGroup>
      </SubMenu>
      <Menu.Item key="login" icon={<UserOutlined />}>
        Login
      </Menu.Item>
    </Menu>
  );
};

export default App;

```


React Node MERN Ecommerce Tutorial 3

## Project Setup

First we setup client then move to server

```js
mkdir ecom
cd ecom
npx create-react-app client
```

Now install npm packages to get started.

```js
cd client
npm i react-redux redux-devtools redux-devtools-extension antd axios react-router-dom
```

Start the project to make sure everything is working fine

```js
npm start
```


React Node MERN Ecommerce Tutorial 2

Do you want to become a professional MERN Stack (Mongo Express React Node) developer while building a production ready ** Full Stack Ecommerce App ** from scratch to Digital Ocean cloud servers? Then you are welcome to this series of tutorials.

I will also be recording the entire process and release a video course on Udemy. So if you find it hard to follow along this written tutorial, you can checkout my video course too.

## Prerequisite

* Basic understanding of React Node and JavaScript

## Tech Stack       

* React Redux in the client side
* Node MongoDB in the server side
* Digital Ocean for cloud hosting

Are you ready for this incredible journey of becoming a professional React Node / MERN Stack developer?
Then follow these tutorials to build your own Ecommerce App from scratch with React Node MongoDB.