Next JS & Typescript with Shopify Integration - Full Guide

27h 55m 27s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 228 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Next JS & Typescript with Shopify Integration - Full Guide

0:00
/
#1: Short Introduction

All Course Lessons (228)

#Lesson TitleDurationAccess
1
Short Introduction Demo
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

Unlock unlimited learning

Get instant access to all 227 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React with TypeScript

React with TypeScript

Sources: ui.dev (ex. Tyler McGinnis)
We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as what you'll build during the course.
2 hours 53 seconds
NFT Marketplace in React, Typescript & Solidity - Full Guide

NFT Marketplace in React, Typescript & Solidity - Full Guide

Sources: udemy
The course covers everything you need for a decentralized NFT application according to the ERC721 standard. Students of this course will learn about NFTs by creating a real-worl...
16 hours 20 minutes 55 seconds
React Query: Server State Management in React

React Query: Server State Management in React

Sources: udemy
React Query has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to ke
7 hours 39 minutes 49 seconds
TypeScript Simplified

TypeScript Simplified

Sources: webdevsimplified.com
Everything you need to learn TypeScript and build any project you can dream of in 47 easy to digest videos which amount to just under 5 hours of video content. Every single vide...
10 hours 23 minutes 56 seconds