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

Learn how to use React(NextJS), HyGraph(GraphCMS), GraphQL, Figma, Styled Components, EmailJS, Auth0 and 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 JavaScript, 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