AMAZON REACT.JS Challenge | Day 3 (Checkout & Google Authentication | Redux | Next.js)

AMAZON REACT.JS Challenge | Day 3 (Checkout & Google Authentication | Redux | Next.js)

Join me on Day 3 of 5 of the 5-DAY AMAZON CHALLENGE where we build the Checkout page with Redux + Google sign in with NextAuth Authentication!

❗SIGN UP for the FINAL DAY Webinar (Day 5 - FREE Prize)👇 https://www.crowdcast.io/e/secret-challenge

❗Submit your Day 3 Homework Here 👇 https://www.papareact.com/secret-challenge-day-3-homework

Join me on Day 3 of 5 of the 5-DAY AMAZON CHALLENGE where we build the Checkout page with Redux + Google sign in with NextAuth Authentication!

🔴 Make sure to follow all the steps below for the FREE Amazon Challenge RIGHT NOW so you don't miss out on the Challenge and the potential grand prizes (£10,000+) you can win on the 23rd of May where we will reveal the WINNERS!

1️⃣ : REGISTER for the LAST DAY SURPRISE REVEAL. This is where we will reveal the winners and a surprise reveal that you do not want to miss: https://www.crowdcast.io/e/secret-challenge

2️⃣ : JOIN the Facebook Group to keep up to date with the Amazon Challenge and to submit assessments everyday by clicking this link: https://www.facebook.com/groups/1388021798201385/

3️⃣ : JOIN our Official PAPA Server on Discord by clicking the invite link below to stay up to date with the Amazon Challenge: https://links.papareact.com/discord

4️⃣ : SHARE the Amazon Challenge on your Instagram story, Twitter and Facebook feed to refer other people to the challenge with the hashtag (# PAPASecretChallenge!) (MAKE sure you are following Sonny on Instagram! 👇) https://links.papareact.com/instagram

🔴 LOOKING FOR THE CODE? 🛠️ https://links.papareact.com/github

🕤 TIMESTAMPS:

  • 00:00 Introduction
  • 00:35 Day 3 Presentation (1/3)
  • 01:37 Build Demo
  • 02:41 Day 3 Presentation (2/3)
  • 06:08 Day 2 Homework Submissions
  • 09:20 Day 3 Presentation (3/3)
  • 14:30 Starting the Build
  • 15:50 Implementing NextAuth Authentication
  • 24:25 Implementing Firebase
  • 32:45 Modifying the Header Component
  • 34:03 Authorising Redirect URIs
  • 38:59 Modifying _app.js
  • 41:43 Adding Logged In User Name
  • 44:31 Adding Other Authentication Providers
  • 45:26 Implementing the Basket Page
  • 46:12 Building the Checkout Page
  • 55:48 Building the Left Side of Checkout Page (1/2)
  • 59:38 Implementing Redux
  • 1:05:56 Add to Basket Functionality
  • 1:15:20 Building the Left Side of Checkout Page (2/2)
  • 1:18:06 Building the CheckoutProduct Component
  • 1:30:59 Implementing Add/Remove Buttons
  • 1:42:25 Building the Right Side of Checkout Page
  • 1:53:40 Day 3 Final Build Demo
  • 1:55:20 Pushing Final Build to GitHub
  • 1:57:36 Deployed Final Build Demo (1/2)
  • 1:58:10 Fixing Authorisation Error
  • 2:03:48 Deployed Final Build Demo (2/2)
  • 2:06:15 Day 4 Build Demo
  • 2:07:40 Outro

Let’s get it PAPA fam 🔥

react aws

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

How to Integrate AWS Amplify Authentication For React Native

AWS Amplify is a framework that lets you develop a web or mobile application quickly, by accessing the backend cloud services offered by AWS. In this article, we are going to learn how to use AWS Amplify in React Native by building a fully functional login and registration flow. The Ultimate Guide For Integrate AWS Amplify Authentication For React Native

Hire AWS Developer

Looking to Hire Professional AWS Developers? The technology inventions have demanded all businesses to use and manage cloud-based computing services and Amazon is dominating the cloud computing services provider in the world. **[Hire AWS...

AWS Cost Allocation Tags and Cost Reduction

Learn more about AWS Cost Allocation Tags, tag examples via the web, CLI, and node.js, explore tag compliance services, and review tagging strategies.