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

Focused View

Igor Risteski

14:36:08

14 View

1 - Introduction

1 - Introduction.mp4

01:38

2 - Detailed introduction.mp4

05:30

3 - Course resources.html

3 - images.zip

2 - Design with Figma

4 - About Figma and the inspiration.mp4

03:32

5 - Initial setup.mp4

10:14

6 - Design the general layout.mp4

19:53

7 - Design the nav links and cart icons.mp4

07:26

8 - Colors and Icons.mp4

14:33

9 - Design the Contact page.mp4

11:31

10 - Design the Cart page.mp4

17:32

3 - CMS Create and manage the products

11 - Create GraphCMSHyGraph account.mp4

02:03

11 - productimagesforcms.zip

12 - General intro.mp4

02:50

13 - create products schema.mp4

15:02

14 - The GraphQL playground.mp4

04:35

15 - API tokens and permissions.mp4

04:09

4 - The frontend

16 - Initial setup.mp4

04:02

17 - Connect the frontend with the CMS.mp4

09:09

18 - Build the first query to fetch products.mp4

10:26

19 - Start building the layout.mp4

04:51

20 - The navbar.mp4

09:27

21 - Build the footer.mp4

12:25

22 - Create the topbar.mp4

07:51

23 - Start building the menu.mp4

09:48

24 - Menu CSS.mp4

11:45

25 - Menu CSS part 2.mp4

09:19

26 - Build the list of products.mp4

12:08

27 - Build the list of products part 2.mp4

17:13

28 - Build the list of products part 3.mp4

13:07

29 - Menu links to pages.mp4

08:34

30 - Build dynamic pages.mp4

09:36

31 - Display placeholders for products.mp4

14:31

32 - Build dynamic brand pages.mp4

06:14

33 - Query the products by brand.mp4

14:59

34 - Work on the homepage.mp4

12:00

35 - Frontend customhook.mp4

19:08

36 - Custom hook to get the product details.mp4

12:04

37 - Short bugfix.mp4

01:18

38 - Details page.mp4

02:40

39 - Fetch product details.mp4

11:12

40 - Destructuring product data.mp4

05:29

41 - Slug page details.mp4

19:35

42 - Slug page images.mp4

06:19

43 - Slug page price details.mp4

09:53

44 - Add to cart buttons.mp4

05:45

45 - Details page CSS.mp4

08:06

46 - Another bugfix.mp4

01:56

5 - Contact page

47 - Base layout.mp4

08:07

48 - Create EmailJS account.mp4

07:41

49 - Connect with EmailJS.mp4

08:51

50 - Tweak the sent message content.mp4

07:54

51 - Form styling.mp4

18:55

52 - Create the infocard.mp4

12:13

53 - Add google map.mp4

04:50

54 - Fix map errors.mp4

02:49

6 - Building the Cart Page

55 - Initial setup.mp4

06:15

56 - Basic state management.mp4

15:29

57 - Add to cart functionality.mp4

18:44

58 - Manage number of items in cart.mp4

11:46

59 - Styling.mp4

06:47

60 - Styling part 2.mp4

15:22

61 - Add cart item details.mp4

04:18

62 - Cart math.mp4

07:49

63 - Save cart in local storage.mp4

06:54

64 - Remove items from cart.mp4

09:15

65 - Manage number of items in frontend.mp4

10:49

66 - Manage number of items in state.mp4

13:41

67 - Clear cart button.mp4

08:36

68 - Clean the empty cart.mp4

06:45

69 - Show cart info in navbar.mp4

18:16

70 - Carttotal card.mp4

16:30

71 - Carttotal amount.mp4

13:32

7 - Authentication

72 - Add authentication.mp4

11:07

73 - Show the username in the nav.mp4

04:59

74 - Login confirm page.mp4

19:22

75 - Logout confirm page.mp4

04:04

8 - Payments using PayPal

76 - Create new PayPal account.mp4

07:33

77 - Stripe vs PayPal implementation.mp4

02:10

78 - Checkout page.mp4

15:44

79 - PayPal checkout button.mp4

04:36

80 - Checkout button styling.mp4

11:43

81 - Route protection.mp4

12:36

82 - Clear the cart after payment.mp4

13:12

83 - Stock Manager part 1.mp4

06:39

84 - Stock Manager part 2.mp4

14:33

9 - Final Section

85 - Save users mails.mp4

11:09

86 - GitHub commit to cherrypick.txt

86 - Responsiveness on different devices.mp4

05:59

87 - Hide the menu on small devices.mp4

14:14

88 - SEO optimization.mp4

18:15

89 - Push the code to GitHub.mp4

06:06

90 - Deploy the project on Vercel for free.mp4

08:41

Description

Learn how to use React(NextJS up to v13.0.6), HyGraph, 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

Who is this for?

Beginner React developers who want to build a complete project without too much backend

What You Need to Know?

Knowledge of basic programing concepts

Familiarity with the basics of JavaScript, HTML, CSS and React

Willingness to Learn

More details

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 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.
Who this course is for:
Beginner React developers who want to build a complete project without too much backend

User Reviews

Rating

average 0

Total votes0

Focused display

I used to work in customer care department in the IT sector, but after many years, i switched to Photo editing and Web Development and i love it :)Learning web development is very interesting and can be very fun, but its not easy at all, especially in the beginnings when you have no clue what goes where.. , and that's why i decided to offer my help to beginners who struggle with it as i did as a self thought web developer.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.