IIRF Online > Development > Web Development > Next.js > Next JS & Typescript with Shopify Integration - Full Guide
Next JS & Typescript with Shopify Integration - Full Guide by Udemy
Learn modern Next JS(Next 10+). Code everything in Typescript and integrate with Shopify. Professional app architecture.
Course Highlights
- Build a modern, well-architectured app from scratch
- Get most of the JS with Typescript
- Create applications with real use case
- Create Shopify integration
Skills you will learn!
Curriculum
3 Topics
Short Introduction
Course Motivation
[Optional] How to resolve issues
4 Topics
Next Init
Ts Init
Ts options
Ts Config
4 Topics
Playground
[ai] Function params
[ai] Custom types
Quiz 1
6 Topics
[ai] Interface vs Type
[ai] Function Types
[ai] Class Types
[ai] Optional Parameters
Quiz 2
Quiz Answers
9 Topics
[ai] Narrowing
[ai] Extending Interface
[ai] Extending Type
[ai] Unions
[ai] Union narrowing
[ai] Type casting
[ai] Interface narrowing
Quiz 3
Quiz Answers
7 Topics
[ai] Declaration merging
[ai] Never usage
[ai] Generic Objects Types
[ai] Unknown type
[ai] Void Type
Quiz 4
Quiz Answers
8 Topics
[ai] Array Generic
[ai] Custom Generic Type
[ai] Generic extends
[ai] Default values of generics
[ai] Generic Types with Extends
[ai] Ternary with Generics
Quiz 5
Quiz Answers
10 Topics
Single from Array Type
Array Index Types
Mapped Types
Typeof
Infer keyword
KeyOf
Multiple generic params
Infering return type of Promise
Quiz 6
Quiz Answers
8 Topics
Infer get static props
Get all products separation
Fetch Api Function
Integrate Custom API Server
More about Shopify GraphQL
Quiz 7
Quiz Answers
GraphQL Query
11 Topics
Fetch product query
Move fetch API
Specify fetcher return type
Map product from connection type
Normalize product
Normalize product images
Product bussines type
Alias Imports
Module re-exports
Quiz 8
Quiz Answers
7 Topics
Next config file
Framework specific configuration
Ts config specific setup
Format JSON in config file
Handle corner cases in config
Shopify Config
Api config type
5 Topics
_app component
Layout component
FC vs FunctionComponent
Reusable layout
Noop
9 Topics
Css Start
Tailwind & PostCSS
Generate PostCss output
Autoprefixer
Layout styling
Add fit styling
Css variables
Tailwind variables
BG Color
10 Topics
Product Card
Product info
Grid Component
Grid stylings
More About Grid Stylings
Additional Explanation
Product Images
Grid on LG screen
LayoutA
LayoutA Col
7 Topics
[css] Product Tag
[css] Product BG
[css] Pattern svg
[css] Scaling up
[css] Transition
Normalize product price
[css] Max Height
5 Topics
Flex Start
Apply Flex & Flex 1
Flex shrink
Flex basis
Justify content
16 Topics
Hero component
Container
Container custom element
El type
Flex Hero
Marquee
Product Variant
Slim Product
Ticker
Layout B
Marquee variant
Footer
Navbar
Navbar Links
Usernav
Icons
9 Topics
Sidebars Wishlist
UI Provider
State in Ui Provider
Ui provider Interfaces
use reducer
Get ref
Disable scroll
Issue Introduction
Use memo
8 Topics
Product Detail Page
get all products paths
get static paths query
Get Product Function
Get Product Query
Pass variables to query
Specify variables type
Get normalized product
7 Topics
Normalize Options
Normalize finished
Normalize variants
Normalize variants options
Variant and Option types
Product View
Product Data
5 Topics
Keen Slider
Sliding in keen slider
Product Slider Done
UI Button
Button Improvements
10 Topics
Display variant options
Swatch
Style Swatch
Choices
Choices type
Active Choice
isDark color
get variant
Find variant
Add item to cart
10 Topics
use add item
useHook handler
Use Api provider
Shopify api provider
Core config
Api Hooks
Context types
Use hook
Provide fetch
Mutation Hook
9 Topics
Pass custom fetch
Hook fetcher types
Call Api Fetcher
Api URL rework
Fix Fetcher type
Fetcher options
Variables Specification
Get checkout id
Checkout Line Items Add
11 Topics
use cart preparation
Fixing types
useSWRHook
useData hook
Call fetcher in use data
cookies checkout id
get checkout cookie from provider
checkout create prep
Checkout create mutation
extract data from checkout create
Store Cookies to Browser
5 Topics
get checkout query
Checkout detail fragment
useSWR
useSWR improvement and useMemo
Pass SWR options
5 Topics
Checkout to cart
Cart normalization
Normalize line item
Normalize images options
Line item interface
4 Topics
Mutation Hook
Mutation Hook Descriptor
Fetcher Output
UseAddItem type
4 Topics
SWR Hook Type
Use Data Type
Fetcher output description
Use Cart Type
7 Topics
Display items in cart
Extend isEmpty to SWR
Cart Item Component
Display cart options
Mutate Cart
Display items count
Provide swatch
4 Topics
Use remove item
Remove item descriptor
Remove item done
Remove item handler type
5 Topics
Use update item start
Handle quantity
Quantity improvement
Use update item done
Use update item type
4 Topics
Small improvements
Loading button
Loading Dots + Default variant
Button to link
6 Topics
Shopify and private app
Creating Shopify products
Accessing Storefront API
Checkout API
Handling checkout
Remove old checkout
3 Topics
Github deployment
Deployment To Vercel
Course End
Next JS & Typescript with Shopify Integration - Full Guide
Related Next.js Courses
Thank You!
Your review has been submitted successfully.