Learn To Build An E-Commerce App With React And Chakra Ui

Build an e-commerce platform from scratch with React, Redux, Express, MongoDB and Chakra UI

What you'll learn

Programming in JavaScript using ReactJs

Learn building applications with Chakra UI

Modern Redux with ReactJs

Version control using Git

Building API's with Express & Node

Full stack software engineering / Web development

Creating e-commerce shops for any kind of products

Requirements

A computer with an internet connection

Description

Hello and welcome to my course. This is a beginner’s course for building modern web applications. This is the right course for you if you are:- Interested in web development- Studying IT- Interested in programming in general- Upskilling your existing knowledge of React- Interested how full-stack applications are build- Solid understanding of programming and want to start with React/JavaScript- Interested in Chakra UI.- You are new to the world of IT and you want to start somewhereWhat will you learn?- React and React hooks- Functional components- State management with ReduxJs Toolkit- Using a component library such as Chakra UI- Styling and designing webpages- Responsive design- User registration and authentication (login)- Writing an API and storing data to a database.- Using MongoDB- Using NodeJS- Using Express- Version control using Git with Github- And many more…This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.On this course we will build an example e-commerce shop called Techlines, completely from scratch using the most popular JavaScript library called React in combination with Redux, Chakra UI, NodeJs, Express, MongoDB and many more. All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application.

Overview

Section 1: Introduction

Lecture 1 App demo

Section 2: Environment Setup

Lecture 2 Install Npm

Lecture 3 Install Git

Lecture 4 Install NodeJs

Lecture 5 Install Visual Studio Code

Lecture 6 Install Visual Studio Code Extensions

Section 3: Project Setup

Lecture 7 Initiating Folder Directory

Lecture 8 Create React App

Lecture 9 Npm start

Lecture 10 Client Content Explained

Lecture 11 Removing Files we don't need 1

Lecture 12 Removing Files we don't need 2

Lecture 13 Setting up Git

Lecture 14 High picture of our app

Lecture 15 In case you get stuck

Section 4: Navbar & React Router

Lecture 16 Overview

Lecture 17 Installing Dependencies

Lecture 18 Set up React Router Dom & Chakra Provider

Lecture 19 The concept of React

Lecture 20 Navbar Component Part 1

Lecture 21 The concept of Components

Lecture 22 Navbar Component Part 2

Lecture 23 Navbar Component Part 3

Lecture 24 Navbar Component Part 4

Lecture 25 Save your work to the remote repository

Section 5: ProductScreen & ProductCard

Lecture 26 Overview

Lecture 27 Download Materials

Lecture 28 ProductsScreen Component

Lecture 29 ProductCard Component Part 1

Lecture 30 ProductCard Component Part 2

Lecture 31 ProductCard Component Part 3

Lecture 32 Save your work to the remote repository

Section 6: Getting started on the backend

Lecture 33 Section overview

Lecture 34 Getting started with MongoDb

Lecture 35 MongoDbCompass

Lecture 36 Connect to our database in MongoDb Compass

Lecture 37 Initialize backend npm package & dependencies

Lecture 38 Creating database connection part 1

Lecture 39 Creating database connection part 2

Lecture 40 What we have done so far

Lecture 41 Add port listener

Lecture 42 Creating product schema

Lecture 43 Initiate product route

Lecture 44 Import product data

Lecture 45 Save your work to the remote repository

Section 7: API connection & Redux Setup

Lecture 46 Overview

Lecture 47 Running backend and frontend simultanously

Lecture 48 Creating Redux Store

Lecture 49 Redux Slices & Actions

Lecture 50 Proxy and Store Activation

Lecture 51 Redux Devtools

Lecture 52 Store Provider

Lecture 53 Redux in ProductsScreen

Lecture 54 Redux Theorie

Lecture 55 Code Clean Up

Lecture 56 Loading Spinner & Error Message

Lecture 57 Test Error Message & Saving our work to the Remote Repository

Section 8: Adding & Removing Products to the Cart

Lecture 58 Overview

Lecture 59 Fixing Deprecation Warning

Lecture 60 Setting Favicon

Lecture 61 Creating Cart Screen part 1

Lecture 62 Cart Slices & Actions (Redux)

Lecture 63 Creating Cart Screen part 2

Lecture 64 Adding Redux to the ProductCard

Lecture 65 Fixing useColorModeValue

Lecture 66 CartItem Component part 1

Lecture 67 CartItem Component part 2

Lecture 68 CartOrderSummary Compononet

Lecture 69 Get Product Route

Lecture 70 Local storage

Lecture 71 Refining calculateSubtotal Function

Lecture 72 Remove Cart Item and Save Work to Remote Repository

Section 9: Single Product Screen

Lecture 73 Overview

Lecture 74 Redux setup for single product

Lecture 75 Initialize Product Screen Component

Lecture 76 Product Screen part 1

Lecture 77 Product Screen part 2

Lecture 78 Product Screen part 3

Lecture 79 Product Screen part 4

Lecture 80 Product Screen part 5

Lecture 81 Product Screen part 6

Lecture 82 Saving work to our work repository

Section 10: Footer & LandingScreen

Lecture 83 1. Overview

Lecture 84 Footer Component Part One

Lecture 85 Footer Component Part Two

Lecture 86 Footer Component Part Three

Lecture 87 LandingScreen Component Part One

Lecture 88 LandingScreen Component Part Two

Lecture 89 Save work to our remote repository

Section 11: Login & Registration

Lecture 90 Overview

Lecture 91 User Model

Lecture 92 JSON Web Token and Login User Route

Lecture 93 Register User Route

Lecture 94 Postman & GET Products

Lecture 95 Register user in Postman

Lecture 96 Review of what we have done so far

Lecture 97 Login user in Postman

Lecture 98 Login Screen Part One

Lecture 99 Login Screen Part Two

Lecture 100 Login Screen Part Three

Lecture 101 Login Screen Part Four

Lecture 102 Redux Set Up For User

Lecture 103 Login Screen Part Five

Lecture 104 Login Screen Part Six

Lecture 105 Login Screen Part Seven

Lecture 106 Login Screen Part Eight

Lecture 107 Registration Screen Part One

Lecture 108 Registration Screen Part Two

Lecture 109 Registration Screen Part Three

Lecture 110 ViewIcon Fix

Lecture 111 Save Your Work To The Remote Repository

Section 12: Profile Screen & Cart Icon

Lecture 112 Overview

Lecture 113 Backend Middleware

Lecture 114 Update Profile Route

Lecture 115 Introduction to Postman

Lecture 116 Update Profile In Redux

Lecture 117 Profile Screen Part One

Lecture 118 Profile Screen Part Two

Lecture 119 Profile Screen Part Three

Lecture 120 Profile Screen Part Four

Lecture 121 Profile Screen Part Five

Lecture 122 Profile Screen Part Six

Lecture 123 Cart Icon Refinement

Lecture 124 Save your work to the remote repository

Lecture 125 Profile Save Toaster Fix

Section 13: Checkout Screen & PayPal

Lecture 126 Overview

Lecture 127 Order Schema

Lecture 128 Order Route

Lecture 129 Redux Setup - Order Actions

Lecture 130 Redux setup - Order Slice

Lecture 131 Checkout Screen Part One

Lecture 132 Checkout Screen Part Two

Lecture 133 CheckoutScreen Part Three

Lecture 134 Checkout Screen Part Four

Lecture 135 Checkout Screen Part Six

Lecture 136 Clear Order and Cart Actions

Lecture 137 Shipping Information Part One

Lecture 138 Shipping Information Part Two

Lecture 139 Shipping Information Part Three

Lecture 140 Payment Success Modal Part One

Lecture 141 Payment Success Modal Part Two

Lecture 142 Payment Success Modal Part Three

Lecture 143 Payment Success Modal Part Four

Lecture 144 Save your work to the remote repository

Section 14: Reviews & User Orders

Lecture 145 Overview

Lecture 146 Get Users Orders Route

Lecture 147 Redux Setup - User Orders

Lecture 148 Your Orders Screen Part One

Lecture 149 Your Orders Screen Part Two

Lecture 150 Create Product Reviews Route

Lecture 151 Redux Setup - Reviews

Lecture 152 Redux Setup Resetting Errors

Lecture 153 Review on Product Screen Part One

Lecture 154 Review on Product Screen Part Two

Lecture 155 Review on Product Screen Part Three

Lecture 156 Save your work to the remote repository

Section 15: Admin Console - Users

Lecture 157 Overview

Lecture 158 Admin Console in Nav Bar

Lecture 159 Initialize Admin Console Screen

Lecture 160 Initialize Users Tab

Lecture 161 Users Route for Admin

Lecture 162 Redux Setup - Admin Users

Lecture 163 Users Tab Part One

Lecture 164 Users Tab Part Two

Lecture 165 Confirm Removal Alert

Lecture 166 Users Tab Part Three

Lecture 167 Debug Remove User Button

Lecture 168 Save your work to the remote repository

Section 16: Admin Console - Orders

Lecture 169 Overview

Lecture 170 Admin Orders Route

Lecture 171 Redux Setup - Get Orders & Remove Orders

Lecture 172 Orders Tab

Lecture 173 Debug Delivered Flag

Lecture 174 Save your work to the remote repository

Section 17: Admin Console - Products

Lecture 175 Overview

Lecture 176 Create Delete Update Product Route

Lecture 177 Redux Setup - Update Product

Lecture 178 Redux Setup - Delete Product

Lecture 179 Redux Setup - Upload Product

Lecture 180 Products Tab Part One

Lecture 181 Products Tab Part Two

Lecture 182 Product Table Item Part One

Lecture 183 Product Table Item Part Two

Lecture 184 Product Table Item Part Three

Lecture 185 Debugging 404

Lecture 186 Add New Product Part One

Lecture 187 Add New Product Part Two

Lecture 188 Add New Product Part Three

Lecture 189 Add New Product Part Four

Lecture 190 Save your work to the remove repository

Section 18: Admin Console - Reviews

Lecture 191 Overview

Lecture 192 Redux Setup - Remove Review

Lecture 193 Reviews Tab - Part One

Lecture 194 Reviews Tab - Part Two

Section 19: Bug Fixes

Lecture 195 Displaying correct error messages

Everybody who wants to learn modern web development, software engineering or simply wants to create their own ecommerce website to sell products.,Beginner in JavaScript, React or Programming