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
React,Figma,GraphQL,Development,Web Development
Lectures -93
Resources -1
Duration -14.5 hours
30-days Money-Back Guarantee
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
- 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
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. Build an e-store using Next.js, Figma, GraphQL, PayPal.](https://d3mxt5v3yxgcsr.cloudfront.net/courses/12754/course_12754_image.png)
Curriculum
Check out the detailed breakdown of what’s inside the course
Introduction
3 Lectures
-
Intro 01:38 01:38
-
Intro explainer 05:30 05:30
-
Course resources
Design with Figma
7 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
CMS - Create and manage the products
6 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
The frontend
33 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Contact Page
8 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Building the Cart Page
17 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Authentication
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Payments using PayPal
9 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Final Section
6 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Instructor Details
![Igor Risteski](https://www.tutorialspoint.com/assets/profiles/553959/profile/200_2575354-1693814077.jpg)
Igor Risteski
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual 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 Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)