Build an e-store using Next.js, Figma, GraphQL, PayPal
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.
More
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 Build an e-store using Next.js, Figma, GraphQL, PayPal
| # | Title | Duration |
|---|---|---|
| 1 | Introduction | 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 |
Similar courses to Build an e-store using Next.js, Figma, GraphQL, PayPal
Full-Stack GraphQL with Absinthe, Phoenix, and React
Full-Stack Vue with GraphQL - The Ultimate Guide
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo
NestJS GraphQL - Schema-first approach
Zero to Full Stack Hero
NestJS GraphQL - Code-first approach
Full Stack Advanced React + GraphQL
