Tutorialspoint

April Learning Carnival is here, Use code FEST10 for an extra 10% off

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

person icon Igor Risteski

4.2

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

updated on icon Updated on Apr, 2024

language icon Language - English

person icon Igor Risteski

category icon React,Figma,GraphQL,Development,Web Development

Lectures -93

Resources -1

Duration -14.5 hours

4.2

price-loader

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

If you are a beginner web developer with React then this course is a 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 best of all.. all of this by using only free tools and services. 

Goals

What will you learn in this course:

  • The goal of this course is to help you learn how to use React in combination with several other services, libraries and frameworks to build a complete e-commerce web site  or any other website.

Prerequisites

What are the prerequisites for this course?

  • Knowledge of basic programing concepts

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

  • Desire to learn and to code

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

Curriculum

Check out the detailed breakdown of what’s inside the course

Introduction
3 Lectures
  • play icon Intro 01:38 01:38
  • play icon Intro explainer 05:30 05:30
  • play icon Course resources
Design with Figma
7 Lectures
Tutorialspoint
CMS - Create and manage the products
6 Lectures
Tutorialspoint
The frontend
33 Lectures
Tutorialspoint
Contact Page
8 Lectures
Tutorialspoint
Building the Cart Page
17 Lectures
Tutorialspoint
Authentication
4 Lectures
Tutorialspoint
Payments using PayPal
9 Lectures
Tutorialspoint
Final Section
6 Lectures
Tutorialspoint

Instructor Details

Igor Risteski

Igor Risteski

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. 

Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515