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

14h 53m 49s
English
Paid

Course 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. 

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 91 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: Introduction

All Course Lessons (91)

#Lesson TitleDurationAccess
1
Introduction Demo
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

Unlock unlimited learning

Get instant access to all 90 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

NestJS GraphQL - Schema-first approach

NestJS GraphQL - Schema-first approach

Sources: learn.nestjs.com
Get up to speed with the GraphQL Schema-first approach with NestJS. Master GraphQL fundamentals and essentials concepts behind creating your own enterprise-grade GraphQL applica...
1 hour 52 minutes 6 seconds
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Sources: Nomad Coders
We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!
22 hours 41 minutes 56 seconds
Full-Stack GraphQL with Absinthe, Phoenix, and React

Full-Stack GraphQL with Absinthe, Phoenix, and React

Sources: pragmaticstudio
GraphQL is revolutionizing the way developers build APIs. Gone are the days when the server decided the shape of the response data. GraphQL puts the client in control so it can ...
4 hours 28 minutes 38 seconds