CF

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

14h 53m 49s
English
Paid

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

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 91 lessons

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

Related courses

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a foundational understanding of React. The course is designed for beginner web developers, so while advanced knowledge isn't necessary, familiarity with basic React concepts will help you follow along more effectively.
What will I build by the end of this course?
By the end of the course, you will have built a fully functional ecommerce website. The project includes designing the frontend using Figma, setting up a backend with GraphCMS (Hygraph), and integrating payment functionality with PayPal.
Who is the target audience for this course?
The course is ideal for beginner web developers who are familiar with React and are interested in learning how to build a complete ecommerce website. It is particularly suited for those looking to understand how to integrate various modern tools and technologies into a cohesive project.
How does the scope of this course compare to similar courses?
This course focuses on a project-based approach, covering not just the development of an ecommerce website but also the integration of design tools like Figma and backend solutions like GraphCMS. Unlike some courses that may focus solely on frontend or backend, this course provides a comprehensive look at building a full-stack application.
What specific tools and platforms are covered in this course?
The course covers several key tools and platforms, including Next.js for the frontend framework, Figma for design, GraphQL and GraphCMS (Hygraph) for backend data management, and PayPal for payment processing. Each of these tools is integrated into the project to create a seamless ecommerce experience.
What topics are not covered in this course?
The course does not cover advanced React topics outside the scope of building an ecommerce site, such as server-side rendering techniques or deep dives into state management libraries like Redux. The focus is on using React within the context of Next.js and integrating with external services.
How much time should I expect to commit to this course?
The course consists of 91 lessons, and while the total runtime is not specified, it's structured to be comprehensive. Prospective students should be prepared to spend several weeks on the course, especially if they are working through the material at a beginner's pace and practicing the concepts through the project.