Django with React | An Ecommerce Website

Build an eCommerce platform from the ground up with React, Redux, Django & Postgres

4.58 (2301 reviews)
Udemy
platform
English
language
Web Development
category
instructor
13,554
students
18 hours
content
Feb 2021
last update
$84.99
regular price

What you will learn

Build an Ecommerce website using Django with React

Full featured shopping cart with PayPal & credit/debit payments

Product rating & review system

An actual real-world project built in a linear and progressive manner

Admin area to manage customers, products & orders

Product search, carousel, pagination & more

Description

In this course, we will build a completely customized eCommerce / shopping cart application from scratch using Django & REACT with the following functionality...

  • Full featured shopping cart

  • Product reviews and ratings

  • Top products carousel

  • Product pagination

  • Product search feature

  • User profile with orders

  • Admin product management

  • Admin user management

  • Admin Order details page

  • Mark orders as delivered option

  • Checkout process (shipping, payment method, etc)

  • PayPal / credit card integration


This is not a documentation-type course. This is a jump in and get your hands dirty course where by the end, you have an actual real-world project to use and put on your portfolio. You will learn the following by completing this course..


  • React with Functional Components & Hooks

  • React router

  • React-Bootstrap UI library

  • How to structure components

  • Component level state & props

  • Managing global state with Redux (Actions & Reducers)

  • Using Redux state in components (useDispatch & useSelector)

  • Creating an extensive back end with Express

  • JWT authentication (JSON web tokens)

  • Custom error handler

  • Integrating the PayPal API

  • Project deployment

  • Much more!


This project is a collaboration with Brad Traversy where we will be taking his original MEARN Stack ecommerce course and building it out with a Django backend instead of Node, JS & Express. Brad & I decided it would be fun to remake the exact same project with a Django backend/API and connect it to the same React frontend/design.


My hope is that you learn how not to only build out this application but add on your own features to it. We learn best by building & customizing our own projects.

Content

Introduction

Introduction
ProShop Demo & Prerequisites
Resources & Environment
A Message From Brad Traversy

Starting The Front End

React Setup
Reach-Bootstrap Setup, Header & Footer Components
HomeScreen Product Listing
Rating Component
Implementing React Router
Product Details Screen

Serving & Fetching Data From Django

Building The Backend
Fetching Data
Database Setup & Admin Panel
Modeling Our Data
Product Image Field
Static Files
Serializing Data

Implementing Redux For State Management

Create Redux Store
Product List Reducer & Action
Bringing Redux Intro Home Screen
Message & Loader Component
Product Details Reducer & Action

Adding To Shopping Cart

Qty Select & Add To Cart
Cart Reducer & Action
Add To Cart Functionality
Cart Screen
Remove Items From Cart

Backend User Authentication

JSON Web Tokens Overview
Postman Overview
JSON Web Token Installation & Setup
JWT Customization
User Serializer
Protected Routes
Register User
Login With Email
URL's & Views Cleanup

Front End User Authentication

User Login Reducer & Action
User Login Screen & Functionality
User In Navbar & Logout
User Register Reducer, Action & Screen
Update Profile Endpoint
Profile Screen & Get User Details
Update User Profile
User Details Bug Fix

Checkout Process (Part 1)

Shipping Screen & Save Address
Checkout Steps Component
Payment Screen & Save Payment Method
Place Order Screen
Order View & URL
Create Order

Checkout Process (Part 2)

Get Order By Id Endpoint
Order Details Reducer & Action
Order Screen
Update To Paid Endpoint
Order Pay Reducer & Action
PayPal Payments
Orders In Profile Page

Admin Screen (Part 1)

User List Reducer, Action & Screen
Admin User Delete
Get User By ID & Update User Endpoints
User Edit Screen & Get User Details
Update User Functionality

Admin Screen (Part 2)

Admin Product List
Delete Products
Create & Update Products Endpoints
Admin Create Product
Product Edit Screen
Edit Product Functionality
Product Image Upload
Admin Order List
Mark Order As Delivered

Product Reviews, Search & More

Create Review Endpoint
Frontend Product Reviews
Product Search
Pagination
Product Carousel

Getting Ready For Deployment, Postgres & Going Live

Merging React Files With Django Project
Adding HashRouter

Screenshots

Django with React | An Ecommerce Website - Screenshot_01Django with React | An Ecommerce Website - Screenshot_02Django with React | An Ecommerce Website - Screenshot_03Django with React | An Ecommerce Website - Screenshot_04

Reviews

Edis
July 21, 2023
bit outdated, but it's alright. as a professional chatgpt prompt engineer didnt find it too difficult to find out how to do the same thing with updated packages
Zetan
July 12, 2023
This is a very good course to have skills and sense to build the framework of a website by Django and react. I would say this is a perfect course, and there is no any counterpart on Udemy. However, the disadvantage is this course is old. There are lots of bugs there since some library had lots of crucial updates. You might want to update it to attract more people
Chukwuma
June 20, 2023
The tutor was a bit too fast with explanations, it seems assumes some level of pre-knowledge of the students on react
Rod
May 23, 2023
The course is very well structured and very suitable for someone with React and Django experience as there is a fair bit of configuration. One issue is that the course is very out of date and requires installation of old technology, however I would still say that it is worth doing today in 2023. It is important to install the versions of react and react router dom that the author uses or it becomes awkward to fix.
Will
May 13, 2023
I've only done midway through the ReacJS section [frontend] thus far. I also realise that great effort was put into this tut. It is NOT [in my opinion] a learning course on ReactJS with Django [I was hoping it would be] ... it's just a follow-along course of building an e-commerce site ... it does not teach ReactJS per se. Best to come well prepared having studied and practised ReactJS through other tuts.
Mateusz
May 9, 2023
The author is not providing any support for his students. Questions that I have asked are left unanswered for months. He just shows how he does things with very small to none explanation. Waste of money, really do not recommend this course.
Khalid
May 3, 2023
i'm just taken note and already the notebook is full and somethings are even was outside the box at least from my scope of knowledge of React so far Thank you...
Steven
May 2, 2023
Learned a lot in this course. If you are taking this course in 2023 like me, some of the code will be different if you are using the latest version for each package. Look into the requirements.txt on github and you can force install those versions if you want to follow him exactly.
Kordian
April 29, 2023
Beware of this course if you are a React beginner like me. I finished Dennis's DJANGO course, he was great, I'm doing Brad's Tailwind course, and it's great too. I bought this course to get to know REACT for the first time while developing DJANGO. Unfortunately, Dennis flies through the material quickly, and the course is old, and there are mistakes that are difficult for a beginner to pass. EDIT: After a few lessons and fighting with a few things that don't work (the ones in the course are for the older version of node, react and others) I can say that I'm actually learning more looking for solutions. I'm raising the rating of the course ;)
Stephan
April 18, 2023
First of all, the course is well structured and is one of the rare cases where you can learn to connect a frontend with a backend in a complete setup. The course doesn't focus on teaching you individual concepts or mechanisms, but rather bringing it all together in a decent sized project. This means you won't be learning Django or React from scratch. You will need to take a React and Django course before this course. Otherwise, you won't be able to understand what's going on. The biggest drawback of this course is that it is outdated in terms of Redux and React router and some other minor parts. In the Q&A you can find many good hints to solve this problem, although the instructor didn't answer any of them. Nevertheless, I enjoyed taking this course because I was aware of it and decided to apply it to Redux/Toolkit and React-Router using the "createRouter" feature. By doing this, I learned a lot more than just following the course. If you do this course, I highly recommend taking a recent React and Django course beforehand and adapting the steps in this course to the latest version. One thing that really bothered me was that for every CRUD operation, a new global Redux state was created. By the end of the course, we had created about 11 different Redux states, only two of which were clearly app-wide. You copy the same API call function many times and adapt it slightly to the needs of the particular request. In my opinion, this is a violation of the DRY principle and can be solved with a (few) custom hook(s). I hope the post helped you to decide if the course is right for you.
Carlos
March 25, 2023
It uses an old version of react-router-dom (v5.2.0). As of 2023, v6.9.0 is out. This causes a lot of errors if you are following with the newer versions. This should have been updated. You are better off watching Youtube videos tbh.
Moncef
March 12, 2023
I took dozens of courses on Udemy since 4 years and I can certify that this one is on my top 5 at least, very well structured and taught, especially when you have some basics in Django and web dev, a real life and game changer ! Highly recommended !
Chia
March 12, 2023
This was a great learning experience for me. This was my first intro to Django and it was a very good introduction. The course was structured really well. Overall, Highly recommended!
Yushen
March 10, 2023
I'm a web developing beginner who wants to learn some react and Django. This course seems well organized and cool, but even if you write the exact code won't work today 2023. I think the context is out of date. And there is no way to seek help. I wish the instructor could update some of the contexts.
Yusuf
March 5, 2023
It's a great course, Dennis is a good instructor, but needs updating to the latest JS frameworks... you can still easily follow along, but check the Q&A section and use ChatGPT if your still struggling. I've nearly completed the course but it was tough, It didnt help that I used Tailwind instead of bootstrap... but very happy with the finished results.

Coupons

DateDiscountStatus
2/1/202189% OFF
expired
2/3/202189% OFF
expired

Charts

Price

Django with React | An Ecommerce Website - Price chart

Rating

Django with React | An Ecommerce Website - Ratings chart

Enrollment distribution

Django with React | An Ecommerce Website - Distribution chart

Related Topics

3792332
udemy ID
1/22/2021
course created date
1/31/2021
course indexed date
Bot
course submited by