React [2021] The Full Stack Serverless eCommerce Course

React [2021] – The Full Stack Serverless eCommerce Course, available at $59.99, has an average rating of 4.15, with 186 lectures, based on 38 reviews, and has 352 subscribers.

You will learn about State management in React using Context API and React Hooks Authentication and Authorization How to manage / protect routes in React How to create pagination and tabs How to create fully functional shopping cart Full featured check out system with Stripe (credit/debit card) Search system using Algolia search How to create elegant reusable component How to piece the serverless architecture (authentication, database, backend, storage) together How to deploy React app How to use Typescript in React This course is ideal for individuals who are React, full stack developers who want to learn how to build a real-world application by using the serverless architecture.. It is particularly useful for React, full stack developers who want to learn how to build a real-world application by using the serverless architecture..

Enroll now: React [2021] – The Full Stack Serverless eCommerce Course

Summary

Title: React [2021] – The Full Stack Serverless eCommerce Course

Price: $59.99

Average Rating: 4.15

Number of Lectures: 186

Number of Published Lectures: 186

Number of Curriculum Items: 186

Number of Published Curriculum Objects: 186

Original Price: $89.99

Quality Status: approved

Status: Live

What You Will Learn

State management in React using Context API and React Hooks

Authentication and Authorization

How to manage / protect routes in React

How to create pagination and tabs

How to create fully functional shopping cart

Full featured check out system with Stripe (credit/debit card)

Search system using Algolia search

How to create elegant reusable component

How to piece the serverless architecture (authentication, database, backend, storage) together

How to deploy React app

How to use Typescript in React

Who Should Attend

React, full stack developers who want to learn how to build a real-world application by using the serverless architecture..

Target Audiences

React, full stack developers who want to learn how to build a real-world application by using the serverless architecture..

*** The course is created in Typescript but it is definitely fine if you prefer Javascript ***

Build a full-featured eCommerce application using React and serverless architecture (Firebase, Cloud Functions, Firestore, Storage, Authentication, Hosting).

This is a learn-by-doing course, and at the end of this course, you will be able to build a full-fledged and performant eCommerce application.

Here are what the course will be covering.

React state management using Context API and hooks

Custom hooks

Sign up, sign in, reset password, and social media login

Authentication and authorization

Route protection, route management

How to separate the UI and the logic using custom hook

How to create an elegant reusable component (Button, Input, Tab, Pagination)

How to create an elegant reusable modal

How to effectively create and manage form (using react-hook-form)

Fully functional shopping cart

Full-featured checkout system with Stripe

How to save card/set default card on Stripe system

Create an admin area that user can manage products, manage orders, manage users

Pagination and tabs

Search functionality using Algolia search

How to apply pagination on the search results.

How to use Firebase Firestore as a database

How to integrate Firebase Cloud Functions as a backend.

How to save image on Firebase Storage

Secure Firestore

How to deploy the app using Firebase Hosting

*** The course is created in Typescript but it is definitely fine if you prefer Javascript ***

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Demo

Lecture 3: Requirement

Chapter 2: Build The Basic UI

Lecture 1: Set Up React App

Lecture 2: Dependencies Versions (Important Please Read)

Lecture 3: The Boilerplate

Lecture 4: Routes Structure

Lecture 5: Routing

Lecture 6: CSS Files

Lecture 7: Add Navigation Bar

Lecture 8: Apply Layout

Lecture 9: Products Page

Lecture 10: Product Detail Page (1)

Lecture 11: Product Detail Page (2)

Lecture 12: Custom Button with forwardRef

Lecture 13: Spinner Component

Lecture 14: Icons

Lecture 15: Adjust The Custom Button

Chapter 3: Add Authentication

Lecture 1: Set Up Firebase Project

Lecture 2: Adjust Navigation Bar

Lecture 3: Sign Up Form (1)

Lecture 4: Sign Up Form (2)

Lecture 5: React Hook Form Documentation

Lecture 6: Sign Up With Email And Password

Lecture 7: Set Up Cloud Functions

Lecture 8: Write First Cloud Functions

Lecture 9: Call Cloud Functions From Frontend

Lecture 10: Manage Modals Via Context API

Lecture 11: Recap Modal Context

Lecture 12: Improve Modal Context

Lecture 13: Authentication Context

Lecture 14: Use Authentication Context

Lecture 15: Differentiate The Navigation Bar View

Lecture 16: Add Sidebar (User Dropdown)

Lecture 17: Refactor Navigation Bar

Lecture 18: Refactor Sidebar (User Dropdown)

Lecture 19: Manage Sidebar (User Dropdown)

Lecture 20: Sign Out

Lecture 21: Sign In

Lecture 22: Reset Password

Lecture 23: Social Media Login (1)

Lecture 24: Social Media Login (2)

Lecture 25: Social Media Login (3)

Lecture 26: Authentication Context Update

Chapter 4: Protect Routes

Lecture 1: Private Route (1)

Lecture 2: Private Route (2)

Lecture 3: Private Route (3)

Lecture 4: Private Route (4)

Lecture 5: Use Private Route

Lecture 6: Protect Routes (1)

Lecture 7: Improve Authentication Context

Lecture 8: Protect Routes (2)

Lecture 9: Adjust Sidebar (User Dropdown)

Lecture 10: Client And Admin Views

Lecture 11: Improve Private Route

Chapter 5: Admin Area: Manage Products

Lecture 1: Add Product Form (1)

Lecture 2: Add Product Form (2)

Lecture 3: Add Product Form (3)

Lecture 4: Add Product Form (4)

Lecture 5: Add Product Form (5)

Lecture 6: Upload Image To Firebase Storage

Lecture 7: Upload Product To Firestore

Lecture 8: Prop Drilling VS Context API

Lecture 9: Upload Progression Bar

Lecture 10: Prepare For Pagination

Lecture 11: Products Context (1)

Lecture 12: Note For The Next Lecture

Lecture 13: Products Context (2)

Lecture 14: Generic Constraints

Lecture 15: Manage Products Page

Lecture 16: Products Page

Lecture 17: Product Detail Page

Lecture 18: Sorting And Real Time Update

Lecture 19: Update Product Counts Collection

Lecture 20: Refactor Add Product Custom Hook

Lecture 21: Edit Product (1)

Lecture 22: Edit Product (2)

Lecture 23: Edit Product (3)

Lecture 24: 77 Delete Product

Lecture 25: Alert Dialog (1)

Lecture 26: Alert Dialog (2)

Lecture 27: Adjust Dialog

Chapter 6: Client Area: Add To Cart

Lecture 1: Adjust Product Detail Page

Lecture 2: Add To Cart Quantity

Lecture 3: Add To Cart (1)

Lecture 4: An Adjustment

Lecture 5: Add To Cart (2)

Lecture 6: Add To Cart (3)

Lecture 7: Cart Context

Lecture 8: Adjust Cart Item Types

Lecture 9: Check Before Add To Cart

Lecture 10: Improvement For The Last Lecture

Lecture 11: Cart Quantity On NavBar

Lecture 12: Cart Page

Instructors

Simple Coder
A Full-stack Developer (Web and Mobile)

Rating Distribution

1 stars: 0 votes

2 stars: 4 votes

3 stars: 3 votes

4 stars: 11 votes

5 stars: 20 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!