Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 12, 2021 02:11 pm GMT

Full Stack E-Commerce App (8 hours free tutorial)

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.

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

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

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;

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.

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;    },  },});

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 Netflix App (+7 Hours free tutorial)
Full Stack Social Media App (+7 Hours free tutorial)

Lama Dev YouTube Channel
Lama Dev Facebook
Source Code


Original Link: https://dev.to/safak/full-stack-e-commerce-app-8-hours-free-tutorial-10pb

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To