Next JS & Typescript with Shopify Integration - Full Guide
You will build an e-commerce application from scratch. You will learn how to write code in Typescript language, a superset of Javascript providing additional features, and a static type checker. The course starts with an explanation and practical examples of the Typescript language. The typescript section is optional but it explains a lot of types of structures that will be used throughout the course.
More
What is Next.js?
Next.js is a React-based framework that provides infrastructure and simple development experience for server-side rendered(SSR) & static page applications.
An intuitive page-based routing system (with support for dynamic routes)
Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
What is Typescript?
TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.
Is this course right for you?
If you plan to start your career as a developer or improve your programming skills, this course is right for you. Learn how to build a professional web application inspired by the project of Next JS developers.
Start with learning the Typescript language and progress into building your own e-commerce application.
This resource is the only thing you need to start Web Development with Next.js. During this course, you will get the confidence and skills required to start your own projects. In addition, you will get the right mindset to apply for a developer career and improve in modern frameworks like Next.js and React.js.
What are you going to work on?
After typescript lectures, you will start building your e-commerce app. You will learn how to structure the application in a modular and clean way.
You will build your own React components from the scratch. As the styling framework, the course is utilizing PostCSS and Tailwind CSS which is a great choice for every project.
Later in the course, you will learn the latest patterns on how to use hook functions efficiently. Entire checkout functionality is built on top of the hook functions. Hooks are reactive, modular, and easy to get tested.
At the end of the course, we will hook up the application with Shopify, and we will deploy it to the Vercel platform so anyone on the internet can access it.
Watch Online Next JS & Typescript with Shopify Integration - Full Guide
| # | Title | Duration |
|---|---|---|
| 1 | Short Introduction | 01:31 |
| 2 | Course Motivation | 01:35 |
| 3 | [Optional] How to resolve issues | 05:52 |
| 4 | Next Init | 05:57 |
| 5 | Ts Init | 06:11 |
| 6 | Ts options | 05:58 |
| 7 | Ts Config | 08:24 |
| 8 | Playground | 04:05 |
| 9 | [ai] Function params | 06:16 |
| 10 | [ai] Custom types | 06:32 |
| 11 | [ai] Interface vs Type | 05:00 |
| 12 | [ai] Function Types | 08:22 |
| 13 | [ai] Class Types | 03:42 |
| 14 | [ai] Optional Parameters | 02:57 |
| 15 | [ai] Narrowing | 06:48 |
| 16 | [ai] Extending Interface | 04:22 |
| 17 | [ai] Extending Type | 05:00 |
| 18 | [ai] Unions | 02:45 |
| 19 | [ai] Union narrowing | 05:32 |
| 20 | [ai] Type casting | 02:06 |
| 21 | [ai] Interface narrowing | 06:11 |
| 22 | [ai] Declaration merging | 02:10 |
| 23 | [ai] Never usage | 03:13 |
| 24 | [ai] Generic Objects Types | 04:44 |
| 25 | [ai] Unknown type | 03:08 |
| 26 | [ai] Void Type | 05:47 |
| 27 | [ai] Array Generic | 04:25 |
| 28 | [ai] Custom Generic Type | 11:37 |
| 29 | [ai] Generic extends | 06:11 |
| 30 | [ai] Default values of generics | 04:51 |
| 31 | [ai] Generic Types with Extends | 08:26 |
| 32 | [ai] Ternary with Generics | 05:14 |
| 33 | Single from Array Type | 04:31 |
| 34 | Array Index Types | 04:52 |
| 35 | Mapped Types | 05:49 |
| 36 | Typeof | 06:35 |
| 37 | Infer keyword | 08:59 |
| 38 | KeyOf | 02:50 |
| 39 | Multiple generic params | 04:46 |
| 40 | Infering return type of Promise | 12:08 |
| 41 | Infer get static props | 05:23 |
| 42 | Get all products separation | 05:38 |
| 43 | Fetch Api Function | 09:19 |
| 44 | Integrate Custom API Server | 20:36 |
| 45 | More about Shopify GraphQL | 16:36 |
| 46 | Fetch product query | 09:19 |
| 47 | Move fetch API | 08:26 |
| 48 | Specify fetcher return type | 10:05 |
| 49 | Map product from connection type | 04:00 |
| 50 | Normalize product | 13:13 |
| 51 | Normalize product images | 09:43 |
| 52 | Product bussines type | 05:25 |
| 53 | Alias Imports | 05:40 |
| 54 | Module re-exports | 05:51 |
| 55 | Next config file | 06:43 |
| 56 | Framework specific configuration | 08:45 |
| 57 | Ts config specific setup | 10:47 |
| 58 | Format JSON in config file | 08:07 |
| 59 | Handle corner cases in config | 10:56 |
| 60 | Shopify Config | 06:57 |
| 61 | Api config type | 09:57 |
| 62 | _app component | 06:07 |
| 63 | Layout component | 07:55 |
| 64 | Reusable layout | 04:55 |
| 65 | Noop | 02:12 |
| 66 | Css Start | 02:35 |
| 67 | Tailwind & PostCSS | 15:05 |
| 68 | Generate PostCss output | 06:33 |
| 69 | Autoprefixer | 02:13 |
| 70 | Layout styling | 09:21 |
| 71 | Add fit styling | 06:25 |
| 72 | Css variables | 06:37 |
| 73 | Tailwind variables | 03:53 |
| 74 | BG Color | 02:13 |
| 75 | Product Card | 08:09 |
| 76 | Product info | 08:43 |
| 77 | Grid Component | 05:25 |
| 78 | Grid stylings | 11:06 |
| 79 | More About Grid Stylings | 08:33 |
| 80 | Additional Explanation | 08:17 |
| 81 | Product Images | 03:43 |
| 82 | Grid on LG screen | 01:54 |
| 83 | LayoutA | 05:48 |
| 84 | LayoutA Col | 04:40 |
| 85 | [css] Product Tag | 14:26 |
| 86 | [css] Product BG | 06:04 |
| 87 | [css] Pattern svg | 06:14 |
| 88 | [css] Scaling up | 04:29 |
| 89 | [css] Transition | 04:06 |
| 90 | Normalize product price | 07:38 |
| 91 | [css] Max Height | 02:47 |
| 92 | Flex Start | 06:20 |
| 93 | Apply Flex & Flex 1 | 07:46 |
| 94 | Flex shrink | 03:15 |
| 95 | Flex basis | 11:21 |
| 96 | Justify content | 09:09 |
| 97 | Hero component | 14:36 |
| 98 | Container | 06:52 |
| 99 | Container custom element | 05:19 |
| 100 | El type | 04:43 |
| 101 | Flex Hero | 07:40 |
| 102 | Marquee | 07:59 |
| 103 | Product Variant | 04:20 |
| 104 | Slim Product | 10:43 |
| 105 | Ticker | 03:34 |
| 106 | Layout B | 02:53 |
| 107 | Marquee variant | 03:41 |
| 108 | Footer | 02:57 |
| 109 | Navbar | 03:28 |
| 110 | Navbar Links | 07:31 |
| 111 | Usernav | 09:19 |
| 112 | Icons | 03:39 |
| 113 | Sidebars, Wishlist | 13:53 |
| 114 | UI Provider | 10:20 |
| 115 | State in Ui Provider | 06:59 |
| 116 | Ui provider Interfaces | 09:39 |
| 117 | use reducer | 11:39 |
| 118 | Get ref | 06:07 |
| 119 | Disable scroll | 05:07 |
| 120 | Issue Introduction | 04:44 |
| 121 | Use memo | 03:54 |
| 122 | Product Detail Page | 14:21 |
| 123 | get all products paths | 09:02 |
| 124 | get static paths query | 08:02 |
| 125 | Get Product Function | 06:05 |
| 126 | Get Product Query | 09:37 |
| 127 | Pass variables to query | 11:43 |
| 128 | Specify variables type | 07:17 |
| 129 | Get normalized product | 08:22 |
| 130 | Normalize Options | 08:26 |
| 131 | Normalize finished | 07:53 |
| 132 | Normalize variants | 09:01 |
| 133 | Normalize variants options | 06:12 |
| 134 | Variant and Option types | 11:48 |
| 135 | Product View | 05:14 |
| 136 | Product Data | 09:53 |
| 137 | Keen Slider | 10:26 |
| 138 | Sliding in keen slider | 08:15 |
| 139 | Product Slider Done | 08:13 |
| 140 | UI Button | 05:48 |
| 141 | Button Improvements | 06:25 |
| 142 | Display variant options | 05:46 |
| 143 | Swatch | 08:41 |
| 144 | Style Swatch | 05:56 |
| 145 | Choices | 06:14 |
| 146 | Choices type | 04:03 |
| 147 | Active Choice | 11:48 |
| 148 | isDark color | 10:50 |
| 149 | get variant | 10:40 |
| 150 | Find variant | 13:21 |
| 151 | Add item to cart | 08:39 |
| 152 | use add item | 10:35 |
| 153 | useHook handler | 06:01 |
| 154 | Use Api provider | 09:02 |
| 155 | Shopify api provider | 11:11 |
| 156 | Core config | 04:03 |
| 157 | Api Hooks | 06:05 |
| 158 | Context types | 05:24 |
| 159 | Use hook | 11:26 |
| 160 | Provide fetch | 04:32 |
| 161 | Mutation Hook | 06:13 |
| 162 | Pass custom fetch | 10:04 |
| 163 | Hook fetcher types | 05:55 |
| 164 | Call Api Fetcher | 06:18 |
| 165 | Api URL rework | 11:30 |
| 166 | Fix Fetcher type | 03:18 |
| 167 | Fetcher options | 05:52 |
| 168 | Variables Specification | 11:02 |
| 169 | Get checkout id | 09:01 |
| 170 | Checkout Line Items Add | 07:26 |
| 171 | use cart preparation | 10:53 |
| 172 | Fixing types | 03:34 |
| 173 | useSWRHook | 03:47 |
| 174 | useData hook | 10:31 |
| 175 | Call fetcher in use data | 12:46 |
| 176 | cookies checkout id | 11:25 |
| 177 | get checkout cookie from provider | 05:06 |
| 178 | checkout create prep | 09:00 |
| 179 | Checkout create mutation | 09:52 |
| 180 | extract data from checkout create | 08:35 |
| 181 | Store Cookies to Browser | 09:22 |
| 182 | get checkout query | 07:51 |
| 183 | Checkout detail fragment | 08:02 |
| 184 | useSWR | 09:14 |
| 185 | useSWR improvement and useMemo | 06:25 |
| 186 | Pass SWR options | 06:35 |
| 187 | Checkout to cart | 06:39 |
| 188 | Cart normalization | 08:36 |
| 189 | Normalize line item | 12:05 |
| 190 | Normalize images, options | 06:42 |
| 191 | Line item interface | 06:44 |
| 192 | Mutation Hook | 08:10 |
| 193 | Mutation Hook Descriptor | 13:44 |
| 194 | Fetcher Output | 06:25 |
| 195 | UseAddItem type | 12:48 |
| 196 | SWR Hook Type | 09:45 |
| 197 | Use Data Type | 07:18 |
| 198 | Fetcher output description | 03:58 |
| 199 | Use Cart Type | 10:07 |
| 200 | Display items in cart | 07:08 |
| 201 | Extend isEmpty to SWR | 05:04 |
| 202 | Cart Item Component | 08:41 |
| 203 | Display cart options | 06:39 |
| 204 | Mutate Cart | 07:47 |
| 205 | Display items count | 07:07 |
| 206 | Provide swatch | 09:25 |
| 207 | Use remove item | 11:06 |
| 208 | Remove item descriptor | 05:51 |
| 209 | Remove item done | 07:06 |
| 210 | Remove item handler type | 02:43 |
| 211 | Use update item start | 10:18 |
| 212 | Handle quantity | 09:21 |
| 213 | Quantity improvement | 01:41 |
| 214 | Use update item done | 11:10 |
| 215 | Use update item type | 02:51 |
| 216 | Small improvements | 03:26 |
| 217 | Loading button | 10:00 |
| 218 | Loading Dots + Default variant | 06:51 |
| 219 | Button to link | 04:55 |
| 220 | Shopify and private app | 09:16 |
| 221 | Creating Shopify products | 12:01 |
| 222 | Accessing Storefront API | 13:05 |
| 223 | Checkout API | 06:19 |
| 224 | Handling checkout | 12:04 |
| 225 | Remove old checkout | 10:13 |
| 226 | Github deployment | 09:13 |
| 227 | Deployment To Vercel | 05:45 |
| 228 | Course End | 05:02 |
Similar courses to Next JS & Typescript with Shopify Integration - Full Guide
Build a Notion Clone with React and TypeScriptzerotomastery.io
Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQLfullstack.io
Fullstack React with Typescriptfullstack.io
AWS & Typescript Masterclass - CDK V2, Serverless, Reactudemy
The Software Architect Mindset (COMPLETE)ArjanCodes
Design Patterns in TypeScriptudemy
TypeScript with Vue.js 3vueschool.io
TypeScript courseui.dev (ex. Tyler McGinnis)
React and Typescript: Build a Portfolio ProjectudemyStephen Grider
