Full Stack E-Commerce App (+8 hours free tutorial)
Tags: react, javascript, webdev, node
Published: 2021-10-12 14:11:38

Hi, I'm Safak. I am a full-stack web developer and I'm sharing open source web projects on my YouTube channel. I want to share my +8 hours "MERN Stack E-Commerce App with an Admin Dashboard" tutorial for free. You can reach the playlist from [here](https://www.youtube.com/watch?v=c1xTDSIXit8&list=PLj-4DlPRT48mxPG8TAXOH4qqQ1ijuERO4). 
___
##What technologies are used?
######Backend Server: Node.js Express Framework, JWT
######Database: MongoDB
######Payment Method: Stripe API
######Front-End Framework: React.js with hooks
######UI library: Styled Components
######State Management Library: Redux
___

## Design Part of the E-Commerce App
In this section, we are going to design an e-commerce app using React.js functional components, hooks and Styled Components. For now, we are going to be using a dummy data to display products but in the last part we'll fetch all data from MongoDb using a Rest API

{% youtube c1xTDSIXit8 %}

## Back-End Part of the E-Commerce App
In this section, we are going to create a Rest API using Express server with MongoDB connection and create necessary models and routes in order to handle CRUD operations. We'll provide the security using JWT and authenticate and authorize users. And also you'll see how easy to get payment using Stripe API

```javascript
const router = require("express").Router();
const stripe = require("stripe")(process.env.STRIPE_KEY);

router.post("/payment", (req, res) => {
  stripe.charges.create(
    {
      source: req.body.tokenId,
      amount: req.body.amount,
      currency: "usd",
    },
    (stripeErr, stripeRes) => {
      if (stripeErr) {
        res.status(500).json(stripeErr);
      } else {
        res.status(200).json(stripeRes);
      }
    }
  );
});

module.exports = router;
```

{% youtube rMiRZ1iRC0A %}

## MERN Stack Part of the E-Commerce App
In this section, we are going to combine the API with the UI Design and make our application dynamic. We'll fetch data and make POST requests using **axios**. And also we'll be covering **Redux Toolkit** in depth.

```javascript
import { createSlice } from "@reduxjs/toolkit";

export const productSlice = createSlice({
  name: "product",
  initialState: {
    products: [],
    isFetching: false,
    error: false,
  },
  reducers: {
    //GET ALL
    getProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    getProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products = action.payload;
    },
    //DELETE
    deleteProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    deleteProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products.splice(
        state.products.findIndex((item) => item._id === action.payload),
        1
      );
    },
    //UPDATE
    updateProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    updateProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products[
        state.products.findIndex((item) => item._id === action.payload.id)
      ] = action.payload.product;
    },
    //ADD
    addProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    addProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products.push(action.payload);
    },
    failure: (state) => {
      state.isFetching = false;
      state.error = true;
    },
  },
});
```

{% youtube y66RgYMAgSo %}

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check out my channel and other posts.

📹 [Full Stack Youtube Clone (5 Hours free tutorial)](https://dev.to/safak/full-stack-youtube-clone-5-hours-free-tutorial-2kfg)
📺 [Full Stack Netflix App (+7 Hours free tutorial)](https://dev.to/safak/full-stack-netflix-app-7-hours-free-tutorial-1o6l)
🧑‍🤝‍🧑 [Full Stack Social Media App (+7 Hours free tutorial)](https://dev.to/safak/social-media-app-using-mern-stack-4ic6)

🔥 [Lama Dev YouTube Channel](https://www.youtube.com/c/lamadev)
⚡️ [Lama Dev Facebook](https://www.facebook.com/groups/lamadev)
👾 [Source Code](https://github.com/safak/youtube/tree/mern-ecommerce-app)