Build An E-Store Using Next.Js, Figma, Graphql, Paypal

What you'll learn
Design using Figma
Build the e-store frontend using NextJS
Create, store and manage the e-store products using GraphCMS (Hygraph)
Use GraphQL to get, add, and update products
Add payments using PayPal
Add authentication with Auth0
Push the project's source code to GitHub
Deploy the project on Vercel for free
Requirements
Knowledge of basic programing concepts
Familiarity with the basics of jаvascript, HTML, CSS and React
Willingness to Learn
Description
If you are a beginner web developer with React then this course is great match for you.This is a project based course which covers all the steps to build a fully functional ecommerce website from scratch.I will show you HOW to use all of those technologies, tools and services together in one full project, and we will start from the idea, design the frontend with Figma which is the best free design tool today, then we will create and manage the products in the backend with the excellent CMS from GraphCMS (now rebranding to Hygraph), then we will fetch the products using GraphQL for the frontend we will use NextJS which probably you already know its a React Framework, then we will implement authentication and protected routes with Auth0, add payments with PayPal, we will have fully functional cart page and contact page with a form in it that actually sends emails using EmailJS After we are done with the coding we will push the code on GitHub, then link our GitHub repo with our account on Vercel where we are going to deploy our project live online for free. And the best of all.. all of this by using only free tools and services.
Overview
Section 1: Introduction
Lecture 1 Introduction
Lecture 2 Detailed introduction
Lecture 3 Course resources
Section 2: Design with Figma
Lecture 4 About Figma and the inspiration
Lecture 5 Initial setup
Lecture 6 Design the general layout
Lecture 7 Design the nav links and cart icons
Lecture 8 Colors and Icons
Lecture 9 Design the Contact page
Lecture 10 Design the Cart page
Section 3: CMS - Create and manage the products
Lecture 11 Create GraphCMS(HyGraph) account
Lecture 12 General intro
Lecture 13 create products schema
Lecture 14 The GraphQL playground
Lecture 15 API tokens and permissions
Section 4: The frontend
Lecture 16 Initial setup
Lecture 17 Connect the frontend with the CMS
Lecture 18 Build the first query to fetch products
Lecture 19 Start building the layout
Lecture 20 The navbar
Lecture 21 Build the footer
Lecture 22 Create the top-bar
Lecture 23 Start building the menu
Lecture 24 Menu CSS
Lecture 25 Menu CSS part 2
Lecture 26 Build the list of products
Lecture 27 Build the list of products part 2
Lecture 28 Build the list of products part 3
Lecture 29 Menu links to pages
Lecture 30 Build dynamic pages
Lecture 31 Display placeholders for products
Lecture 32 Build dynamic brand pages
Lecture 33 Query the products by brand
Lecture 34 Work on the homepage
Lecture 35 Frontend - custom-hook
Lecture 36 Custom hook to get the product details
Lecture 37 Short bugfix
Lecture 38 Details page
Lecture 39 Fetch product details
Lecture 40 Destructuring product data
Lecture 41 Slug page details
Lecture 42 Slug page images
Lecture 43 Slug page price details
Lecture 44 Add to cart - buttons
Lecture 45 Details page CSS
Lecture 46 Another bugfix
Section 5: Contact page
Lecture 47 Base layout
Lecture 48 Create EmailJS account
Lecture 49 Connect with EmailJS
Lecture 50 Tweak the sent message content
Lecture 51 Form styling
Lecture 52 Create the info-card
Lecture 53 Add google map
Lecture 54 Fix map errors
Section 6: Building the Cart Page
Lecture 55 Initial setup
Lecture 56 Basic state management
Lecture 57 Add to cart functionality
Lecture 58 Manage number of items in cart
Lecture 59 Styling
Lecture 60 Styling - part 2
Lecture 61 Add cart item details
Lecture 62 Cart math
Lecture 63 Save cart in local storage
Lecture 64 Remove items from cart
Lecture 65 Manage number of items in frontend
Lecture 66 Manage number of items in state
Lecture 67 Clear cart button
Lecture 68 Clean the empty cart
Lecture 69 Show cart info in navbar
Lecture 70 Cart-total card
Lecture 71 Cart-total amount
Section 7: Authentication
Lecture 72 Add authentication
Lecture 73 Show the username in the nav
Lecture 74 Login confirm page
Lecture 75 Logout confirm page
Section 8: Payments using PayPal
Lecture 76 Create new PayPal account
Lecture 77 Stripe vs PayPal implementation
Lecture 78 Checkout page
Lecture 79 PayPal checkout button
Lecture 80 Checkout button styling
Lecture 81 Route protection
Lecture 82 Clear the cart after payment
Lecture 83 Stock Manager part 1
Lecture 84 Stock Manager part 2
Section 9: Final Section
Lecture 85 Save users mails
Lecture 86 Responsiveness on different devices
Lecture 87 Hide the menu on small devices
Lecture 88 SEO - optimization
Lecture 89 Push the code to GitHub
Lecture 90 Deploy the project on Vercel for free
Beginner React developers who want to build a complete project without too much backend

Homepage

https://www.udemy.com/course/build-an-e-store-using-nextjs-figma-graphql-paypal/