React [2021] - The Full Stack Serverless eCommerce Course

Explore the Create React App starter files, configure the TypeScript template, and boot the server with npm start to view the starter app featuring the Awesome shop.

Map the route structure with public pages home, products, product detail; protected customer and admin areas; nested buy and my orders routes; admin pages, not found, and react-router-dom setup.

Build and route a full serverless e-commerce app with 13 pages, including public, protected, and dynamic routes, using React Router DOM.

Create a basic navigation bar using NavLink from react router dom, organize with a Navbar.tsx in a components/nav folder, and wire home, products, my-cart, select-address, buy/checkout, orders, and admin links.

Create a reusable layout component in React to wrap all pages, include a top navbar, render content via the children prop, and apply a shared page style.

Build the products page using dummy data from products.ts, define a TypeScript product type, and render ProductItem components on the home and products pages with image, title, and price.

Navigate from product items to a dynamic product detail page using Link and /products/{productId} route, then locate the product from the products array with useParams and store it in state.

Create a product detail page ui that displays image, title, description, price, stock status, handles missing products with a not-found view, and includes a quantity selector with add to cart.

Design and implement a reusable custom React button component with forwardRef, extending ButtonHTMLAttributes for full native button support, including height, width, loading states, spinner props, and ref handling.

Design and implement a reusable spinner component using react-loader-spinner in React TypeScript project, with configurable color, height, width, and timeout, and integrate it into a custom button via props spreading.

Learn to integrate fontawesome icons in a React project by installing four packages with npm i, registering icons (faPlus, faMinus) via library.add, and rendering FontAwesomeIcon components in the product detail.

Create a Firebase project and web app, install the sdk, paste the config into a ts file, initialize the app, export the auth, and use .env.local for values.

Adjust the navigation bar by removing temporary links, placing the logo on the left, a middle search box, and sign in and sign up buttons on the right in Navbar.tsx.

Create a signup modal with a backdrop in a React app, featuring a form with username, email, and password fields, and a reusable button for submission.

Explore building a sign up form with react-hook-form in a React course, implementing validation (required, min/max length, pattern), error handling, and a reusable Input component with forwardRef.

Create signup with email and password using a UI component and a useAuthenticate hook. Connect to Firebase authentication, manage loading and errors, and test signup in the browser.

Set up cloud functions to create a new user document in the users collection in Cloud Firestore when a new authentication user is added, enabling cart, orders, and address data.

Write first cloud functions handles signup by creating a user in Firebase Authentication, then stores user data in Firestore, assigns client or super admin roles, and sets custom claims.

Call the onSignup cloud function from the frontend using httpsCallable with a username, handle errors and response, and update Firebase authentication and Firestore.

Use the context api to manage modals: create a modal context provider, define modal types (close, signup, signin, reset password), and useModalContext hook to open, close, or auto-close after actions.

Create and provide a modal context wrapped by ModalContext.Provider to manage a modal element and modal type across the app, using useState, useEffect, and a custom useModalContext hook.

Improve modal context by separating state and dispatch into ModalStateContext and ModalDispatchContext, providing them with a value prop, and updating hooks to expose modal and dispatch in a single return.

Learn to implement an auth context in React using Firebase authentication, exposing auth state and dispatch to the entire app via a provider and a custom hook.

Wrap the app with AuthContextProvider to expose the auth context API to all components, then use useAuthContext in Navbar to access authState and authDispatch via firebase authentication.

Use the context API to differentiate the navigation bar for authenticated users, showing cockpit link and a sidebar toggle with icons, while rendering sign in, sign up, and profile icons.

Add a React sidebar user dropdown with a backdrop, using context API to display the current user name and profile, plus admin and client views and quick links.

Refactor the navigation bar by splitting the authentication flow into separate components for authenticated and unauthenticated states, renaming files, updating imports, and conditional rendering based on user status.

Refactor the sidebar into separate user and admin components, and implement an avatar-driven dropdown to reveal company options, integrating both dropdowns and preparing open/close logic for the next lecture.

Manage the sidebar user dropdown by introducing an open boolean state, a corresponding action and dispatch, and conditionally rendering the user panel while closing on route changes.

Learn to implement a sign-out flow in a React serverless e-commerce app using Firebase authentication, including guarded effects and error handling to close the user session with UI feedback.

This lecture guides building a sign in flow for the React eCommerce app by creating a sign in form, wiring it to Firebase authentication with email and password.

Learn to implement a reset password flow in a React app by wiring an email-based reset form, linking from sign-in, and showing a success message after emailing reset instructions.

Learn to implement social media login in a React app by adding Google and Facebook sign-in buttons, wiring up Firebase authentication, and updating user profiles via cloud functions.

Configure Google and Facebook sign-in in the firebase console, set up a Facebook app with its secret and redirect URLs, and test the login flow with authorized users.

Design a reusable social login component for sign up and sign in using Facebook and Google, with loading state handling and Firebase authentication to prevent duplicates.

Update authentication context to include a user info structure with Stripe customer ID, shipping addresses, and role, and sync it via real-time Firestore updates to the user store.

Implement a private route wrapper to protect checkout and my copies by redirecting unauthenticated users to the homepage using context-based authentication.

Fix private route by delaying rendering until the authentication checking process finishes, show a subpena component during the two-second wait, and redirect to the homepage if auth isn't ready.

Implement a private route in a React app by redirecting unauthenticated users to home, showing a sign-in modal, and returning them to original route after authentication using location and history.

Explore implementing a robust private route in React by handling sign out behavior, authentication redirects, and modal login flows, using history-based state and conditional redirects.

Apply private route to protect pages, redirect unauthenticated users to sign-in, and return users to their original page after authentication, testing in the browser.

Protect routes by enforcing authentication and admin role for the admin area, using a private wrapper and firebase authentication to verify user role claims.

Improve the authentication context by updating user and author fields in the Orthodontics API to keep user info synchronized. Test by refreshing and submitting updated offers under admin rules.

Use the context API to protect admin and client areas by passing the user to private route components, cloning child elements, and redirecting non-admin or non-client users.

Adjust the sidebar's user dropdown by wiring the header and admin sections, conditionally render items based on user roles, and prepare the plan-switching logic for future use.

Explore how to implement a context API to toggle between client and admin views, create a context provider with state and dispatch, and share state across sidebar and layout.

Implement a private route by coordinating an authentication check with a context API state and a callback, using a spinner to gate access to orders and checkout.

Build an add product form in React by using a reusable product form component, custom inputs, and a modal to create new products with title, price, image, category, and inventory.

Learn to build an add product form in React using TypeScript with useForm, validating title, description, image, category, and inventory, and submitting a typed data object.

Replace the custom input with a select for product categories, map options from an array, validate the selection, and display an error if none is chosen.

Learn to implement an image uploader in a React product form by wiring a hidden file input to a styled trigger button and handling file selection for Firestore upload.

Implement a robust add product form that opens the upload box from the image input, validates required fields and image type, and displays the selected file name.

Upload an image to Firebase storage and create a product entry in store by wiring a new product function, generating a unique image path, and saving the product data.

Learn to upload a new product to Firestore by building a typed upload workflow that stores product data and images in Firebase storage, with loading states and admin user context.

Explore prop drilling and how the context api keeps state centralized to avoid passing information through many components.

Learn how to implement an image upload progression bar in a React full-stack serverless e-commerce app, displaying live progress from 0 to 100% and updating the UI accordingly.

Implement pagination by tracking total product items with a new collection by category, updated by a cloud function on each new product creation, enabling pagination in admin and product pages.

Build a React context provider to fetch store products and surface them by category across the app using the Context API in a serverless eCommerce course.

Unify similar snapshot functions with a single generic function in TypeScript, then build a Firestore-backed products context that tracks a five-property numeric house state with live updates via an effect.

Improve a function by applying generic constraints in TypeScript to prevent wrong types, using extends to constrain generics, and implement a generator for user or product data types.

Build and consume a products context with use context and dispatch to power a manage products page. Render a dynamic product table with edit and delete actions.

Improve the products page by adding a loading state and using the product context API to fetch and render real products, replacing the no-product text with a spinner.

Build the product detail page by fetching the item from the products context, replacing dummy data with real context data, and handling loading and not-found cases to support purchasing.

Listen to how the products context API handles real-time updates in a store, sort items by descending order, and verify live changes as new products appear or are removed.

Refactor the add product flow by extracting image upload to storage into a separate custom hook and wiring it as a callback for the new product function.

Open and edit product details in the admin panel by clicking edit icons to populate a reusable product form, then update title, price, and inventory and submit to the store.

Edit product (2) explains building an edit workflow for a product, including duplicating the function, validating changes, updating Firestore, and handling image updates via storage with delete and upload logic.

Explore editing a product and correcting a wrong category by updating the product, its category, and related Firestore collections using a cloud function.

Describe the delete product workflow: remove the image from storage, delete the product document from Firestore, and update hot item status via a cloud function, then deploy and test.

Implement an alert dialog in React to confirm or cancel a delayed operation, with a backdrop, modal, header and body, and two action buttons.

Learn how to implement an alert dialog in a React ecommerce page to confirm deletions with props, state, and callbacks for open, cancel, and confirm.

Refactor the dialogue component by renaming the onOpen function to unclosed, enabling universal open state control across the page, and update the Ludmila component accordingly to complete the section.

Implement an interactive product detail page that enables adding to cart with dynamic stock checks, in-stock and out-of-stock indicators, and authentication gating via a sign-in modal for different user roles.

Learn to manage add to cart quantity with inventory checks, plus and minus controls, and conditional out of stock messaging in the retail component.

develop an add-to-cart function using a serverless Firestore setup: create cart items, query documents, upsert with quantity updates based on user id and product id, and handle success or error.

Prevent overselling by disabling add to cart during processing and validating cart quantity against inventory with a firebase-based check, including single-user hot-item handling and real-time updates.

Learn how to implement an add-to-cart flow in a product detail page using a custom dialogue, including image, title, quantity, and two action buttons to view cart or continue shopping.

Create a cart context in a React app, wire context providers and actions, fetch hot items, convert snapshots to items, and expose data to components.

Check before adding to cart by querying the cart context to see if the item exists and if its quantity meets the inventory, alerting the user when stock is insufficient.

Use the hot tactics api to compute a cart’s total cost quantity with a calculated quantity function that reduces over cart items, wired through React context to update the UI.

Build a cart page that renders hot items and a hot summary from the cart context, showing item details, costs, and routes to shop or select address for checkout.

Refactor the cart item into its own component, rendering image, title, description, price, and a quantity with plus/minus controls. Implement confirm, cancel, and remove actions for the item.

Enable updating a cart item quantity by plus and minus controls, enforce inventory limits, and update the cart item via an update function with loading and error states.

Learn to delete a hot item from the cart using a delete function, user and item IDs, confirmation dialogue, and state updates to reflect the change in the cart.

Learn to update cart quantities in a React serverless eCommerce setup, deleting items when quantity reaches zero, and using confirm or cancel dialogs with open dialogue and Firestorm.

Create a checkout flow to select or add a shipping address via a shipping addresses context, with a reusable address form and fields for name, address, city, and country.

Learn to add a shipping address in a serverless react ecommerce app by building an address form, validating input, and updating the user’s shipping addresses array.

Display and manage user shipping addresses in a React e-commerce app, mapping addresses to a shipping address component and selecting a delivery address with a button.

Edit shipping addresses in a React ecommerce app by using the address index from the callback, updating the selected address object and its updated timestamp in the shipping addresses array.

Display the chosen shipping address in a pop-up form, manage edit state, pass address data and index between components, and update the shipping addresses array on submit.

Delete a shipping address within the user profile by validating the index, showing a confirmation dialog, and updating the user's shipping addresses array.

Improves the select address page by showing a loading spinner while awaiting authentication and shipping address data, and redirects to the home page if no items exist.

Build the checkout page, pass the shipping address from the address page, and display an order summary with total quantity and total amount using context.

Learn to integrate stripe payments in a react e-commerce app by configuring keys, wrapping checkout with stripe elements, and building a secure card form tested in the browser.

Develop a mobile data collection flow in React: use custom input fields and checkboxes, validate with register and errors, and submit to an API to complete a payment via Stripe.

Build a React card details form using Stripe elements, validate input, toggle the submit button, and submit data to the Stripe API for a serverless ecommerce checkout.

fix stripe elements issues on the checkout page by wrapping the component with elements, moving wrappers, and persisting the address in local storage to avoid homepage redirects.

Execute a complete payment flow for a new card by connecting a cloud function to the Stripe API, retrieving a client secret, and completing the payment on the front end.

Learn to complete a payment flow by calling a cloud function to obtain a client secret, create a Stripe payment intent, and finalize checkout in a serverless eCommerce app.

Learn to complete a new-card payment in a two-step Stripe workflow by preparing a payment method, confirming the payment intent, and handling success or errors.

Learn to create a Stripe customer, save the Stripe customer ID, check for existing customers, and manage checkout with cloud functions and a Firestore user document.

Create and deploy a cloud function that updates a Stripe customer's default payment method by passing the customer ID and payment method ID from checkout.

Learn to fetch a user's Stripe payment methods from serverless cloud functions, authenticate requests, query customer data, and render selectable cards in a React front end for checkout.

Display payment methods as interactive cards with radio inputs, brand icons, and last four digits, while handling default and saved cards to complete checkout.

Fix memory leak issue by moving the cloud function inside useEffect, track mounted state, and guard updates during checkout to prevent errors and improve payment flow.

Learn to complete payments with saved or new cards using Stripe, handling payment methods, form state, and UI logic to securely finalize transactions.

Explore completing a payment using a saved card with Stripe, including configuring payment intents, customer IDs, and payment methods in the checkout flow.

Create a new order in Firebase by type checking and assembling items and shipping address from the cart, then delete the hot items and finalize payment status.

Create a confirm payment modal in checkout that shows a payment success alert, removes the shipping address from local storage using a shared address key, and navigates to orders.

Detach a payment method from stripe using cloud functions, including authenticating requests, retrieving and validating the payment method, and deploying the function to enable front-end calls.

Implement a front-end remove card flow that calls a cloud function to delete a payment method, with a two-stage confirmation dialogue and error handling.

Test the remote cart remove card flow, confirm the remove dialog, and verify the UI updates to reflect removed cards and updated checkout payment state in real time.

Update inventory for purchased items when a new order is created using a cloud function. Count orders in the orders collection to enable pagination on the orders page.

Test the cloud function triggered on order creation to update inventory and reflect purchases in the order collection and items array, validating cart, checkout, and payment flows.

Learn to implement a two-context pattern for orders in a React serverless eCommerce app: create an orders context and a dispatch context, provide them, and query orders by user role.

Create an order count context with the React context API, initialize it to zero, and provide it to admin and client components via a provider connected to firebase for orders.

Build an orders page in React that uses context to load and render orders with columns for purchase details, amount, and shipments, including error handling and admin/client views.

Learn to render the order item component with four columns from the order header, displaying purchase date, quantity, and shipment status using helper functions to calculate quantity and amount.

Explore building an order detail page in a React app by fetching a single order via a custom hook, handling snapshots, and rendering items, totals, shipping address, and payment status.

Replicate and enhance the manage orders page in a react serverless eCommerce app by adding a new order item component, extra columns, and an admin action button.

Learn to build a manage order detail page by implementing a shipments status control, a status select with five options, and updating the order document in store to reflect changes.

Enable admin users to print the shipping label and the invoice from the order detail view by adding two buttons and wiring them to a printing library for each section.