Code a web app with React and Paypal

Course Curriculum

Chapter 1: Configure React by using Webpack step-by-step

Lecture 1: Welcome to the tutorial

Lecture 2: Webpack installation

Lecture 3: Basic configuration for Webpack

Lecture 4: Enable CSS support by using Webpack

Lecture 5: Enable support for image files by using Webpack

Lecture 6: Enable support for font files by using Webpack

Lecture 7: Install a Webpack plugin to generate HTML files

Lecture 8: Configure HtmlWebpackPlugin

Lecture 9: Create the template to generate HTML files automatically with Webpack

Lecture 10: Configure React by using Webpack

Lecture 11: Installing some dependencies necessary for React to work

Lecture 12: Installing another dependencies necessary for React to work

Lecture 13: Code a simple React application

Lecture 14: Watch mode in Webpack

Lecture 15: Installing Express

Lecture 16: Coding a web server with Nodejs

Lecture 17: Fixing a tiny bug in the code

Lecture 18: Running the web server and testing the React app

Lecture 19: Creating the first React component

Lecture 20: Fixing ReactDOM import

Chapter 2: Configure the product details for the Paypal order

Lecture 1: Splitting the webpage layout into three sections

Lecture 2: Add font files to the project

Lecture 3: Understanding a PayPal order

Lecture 4: Apply a linear gradient as the background for the webpage

Lecture 5: Apply some styling to the text content of the webpage

Lecture 6: Add a CSS framework to the project

Lecture 7: Making a responsive grid with CSS

Lecture 8: Storing the items object into an state variable

Lecture 9: Adding a text field for the name of the product

Lecture 10: Adding a text field for the description of the product

Lecture 11: Adding a text field for the product SKU

Lecture 12: Adding a text field for the price of the product

Lecture 13: Adding a text field for the tax of the product

Lecture 14: Adding a text field for the quantity of the product

Lecture 15: Adding a dropdown menu for the category of the product

Lecture 16: Updating the responsive grid

Lecture 17: Adding the handleChange event handler to the form fields

Lecture 18: Create the logic for the handleChange event handler

Lecture 19: Styling the labels of the form fields

Lecture 20: Adding a button and styling it

Lecture 21: Create a Paypal order

Lecture 22: Saving the Paypal order into the web browser

Lecture 23: Redirecting the user to the next webpage

Lecture 24: Testing the Order Items page

Chapter 3: Configure the shipping address for the Paypal order

Lecture 1: Setting up a new webpage for the project using Webpack

Lecture 2: Add some React code to the new webpage

Lecture 3: Adding a new route to the web server

Lecture 4: Create a new React component from scratch

Lecture 5: Create the basic layout of the webpage

Lecture 6: Styling the Shipping Address page

Lecture 7: Save the shipping address into an state variable

Lecture 8: Create a responsive grid to center the content

Lecture 9: Add a text field to input the fullname of the buyer

Lecture 10: Dropdown menu to select the country code

Lecture 11: Text fields for the state and city

Lecture 12: Text field for the postal code

Lecture 13: Text field for the street and the number

Lecture 14: Text field for the apartment or unit number

Lecture 15: Creating the logic for the onChange event

Lecture 16: Adding a button and styling it with CSS

Lecture 17: Adding the logic for the button

Lecture 18: Redirecting the user to the Amount Breakdown page

Lecture 19: Testing the web application

Chapter 4: Configure the amount details for the Paypal order

Lecture 1: Configure a new page for the project with Webpack

Lecture 2: Creating the basic React code for the new page

Lecture 3: Adding a new route for the new page

Lecture 4: Testing the Webpack configuration so far

Lecture 5: Creating a new React component for the Amount Breakdown page

Lecture 6: Creating the basic sections of the new page

Lecture 7: Apply some CSS styling to the new page

Lecture 8: Create a new state variable for the amount details

Lecture 9: Create a table with the CSS framework

Lecture 10: Create a responsive grid to center the content

Lecture 11: Add a text field to enter the shipping cost

Lecture 12: Add a text field to enter the handling cost

Lecture 13: Add a text field to enter the tax total

Lecture 14: Add a text field for the shipping discount

Lecture 15: Add a text field for the discount

Lecture 16: Display the final amount

Lecture 17: Styling the Amount Breakdown table

Lecture 18: Configure the handleChange event handler

Lecture 19: Explanation of the logic inside the handleChange event handler

Lecture 20: Complete the logic inside the handleChange event handler

Lecture 21: Explanation on how to calculate the item total

Lecture 22: Create the code to calculate the item total

Lecture 23: Create the code to calculate the tax total

Lecture 24: Create the code to calculate the final amount

Lecture 25: Testing the web app

Chapter 5: Configure Paypal to work with the React app

Lecture 1: Creating a test buyer account

Lecture 2: Creating a test seller account

Lecture 3: Creating a Paypal App

Lecture 4: Install fetch

Lecture 5: Get the access token from Paypal

Lecture 6: Function which creates a Paypal order

Lecture 7: PayPal request id