Build an e-store using Next.js, Figma, GraphQL, PayPal

14h 53m 49s
English
Paid
October 30, 2023

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. 

More

Then we will create and manage the products in the backend with the excellent CMS from Hygraph ( rebranding from GraphCMS ), 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.

Watch Online Build an e-store using Next.js, Figma, GraphQL, PayPal

Join premium to watch
Go to premium
# Title Duration
1 Introduction 01:39
2 Detailed introduction 05:31
3 About Figma and the inspiration 03:33
4 Initial setup 10:15
5 Design the general layout 19:54
6 Design the nav links and cart icons 07:27
7 Colors and Icons 14:34
8 Design the Contact page 11:32
9 Design the Cart page 17:33
10 GraphCMS rebranded in to Hygraph 02:21
11 Create GraphCMS(HyGraph) account 02:04
12 General intro 02:51
13 create products schema 15:03
14 The GraphQL playground 04:36
15 API tokens and permissions 04:10
16 NextJS v13 upgrade in details 13:51
17 Initial setup 04:03
18 Connect the frontend with the CMS 09:10
19 Build the first query to fetch products 10:27
20 Start building the layout 04:52
21 The navbar 09:28
22 Build the footer 12:26
23 Create the top-bar 07:52
24 Start building the menu 09:49
25 Menu CSS 11:46
26 Menu CSS part 2 09:20
27 Build the list of products 12:09
28 Build the list of products part 2 17:14
29 Build the list of products part 3 13:08
30 Menu links to pages 08:35
31 Build dynamic pages 09:37
32 Display placeholders for products 14:32
33 Build dynamic brand pages 06:15
34 Query the products by brand 15:00
35 Work on the homepage 12:01
36 Frontend - custom-hook 19:09
37 Custom hook to get the product details 12:05
38 Short bugfix 01:19
39 Details page 02:41
40 Fetch product details 11:13
41 Destructuring product data 05:30
42 Slug page details 19:36
43 Slug page images 06:20
44 Slug page price details 09:54
45 Add to cart - buttons 05:46
46 Details page CSS 08:07
47 Another bugfix 01:57
48 Base layout 08:08
49 Create EmailJS account 07:42
50 Connect with EmailJS 08:52
51 Tweak the sent message content 07:55
52 Form styling 18:56
53 Create the info-card 12:14
54 Add google map 04:51
55 Fix map errors 02:50
56 Initial setup 06:16
57 Basic state management 15:30
58 Add to cart functionality 18:45
59 Manage number of items in cart 11:47
60 Styling 06:48
61 Styling - part 2 15:23
62 Add cart item details 04:19
63 Cart math 07:50
64 Save cart in local storage 06:55
65 Remove items from cart 09:16
66 Manage number of items in frontend 10:50
67 Manage number of items in state 13:42
68 Clear cart button 08:37
69 Clean the empty cart 06:46
70 Show cart info in navbar 18:17
71 Cart-total card 16:31
72 Cart-total amount 13:33
73 Add authentication 11:08
74 Show the username in the nav 05:00
75 Login confirm page 19:23
76 Logout confirm page 04:05
77 Create new PayPal account 07:34
78 Stripe vs PayPal implementation 02:11
79 Checkout page 15:45
80 PayPal checkout button 04:37
81 Checkout button styling 11:44
82 Route protection 12:37
83 Clear the cart after payment 13:13
84 Stock Manager part 1 06:40
85 Stock Manager part 2 14:34
86 Save users mails 11:10
87 Responsiveness on different devices 06:00
88 Hide the menu on small devices 14:15
89 SEO - optimization 18:16
90 Push the code to GitHub 06:07
91 Deploy the project on Vercel for free 08:42

Similar courses to Build an e-store using Next.js, Figma, GraphQL, PayPal

Instagram Clone Coding 3.0

Instagram Clone Coding 3.0Nomad Coders

Duration 20 hours 48 minutes 39 seconds
NestJS GraphQL - Schema-first approach

NestJS GraphQL - Schema-first approachlearn.nestjs.com

Duration 1 hour 52 minutes 6 seconds
GraphQL for beginners with JavaScript

GraphQL for beginners with JavaScriptudemy

Duration 5 hours 35 minutes 31 seconds
NestJS GraphQL - Code-first approach

NestJS GraphQL - Code-first approachlearn.nestjs.com

Duration 1 hour 55 minutes 15 seconds
The Modern GraphQL Bootcamp (with Node.js and Apollo)

The Modern GraphQL Bootcamp (with Node.js and Apollo)udemy

Duration 23 hours 26 minutes 42 seconds