Mô tả

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?

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.

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.

Bạn sẽ học được gì

Build a modern, well-architectured app from scratch

Get most of the JS with Typescript

Create applications with real use case

Create Shopify integration

Yêu cầu

  • Basic Javascript knowledge is required
  • Fundamentals in React, HTML and CSS

Nội dung khoá học

35 sections

Introduction

3 lectures
Short Introduction
01:30
Course Motivation
01:34
[Optional] How to resolve issues
05:51

TS Intro

4 lectures
Next Init
05:56
Ts Init
06:10
Ts options
05:57
Ts Config
08:23

TS Beginnings

4 lectures
Playground
04:04
[ai] Function params
06:15
[ai] Custom types
06:31
Quiz 1
2 questions

Interface & Type

6 lectures
[ai] Interface vs Type
04:59
[ai] Function Types
08:21
[ai] Class Types
03:41
[ai] Optional Parameters
02:56
Quiz 2
2 questions
Quiz Answers
00:17

Narrowing

9 lectures
[ai] Narrowing
06:47
[ai] Extending Interface
04:21
[ai] Extending Type
04:59
[ai] Unions
02:44
[ai] Union narrowing
05:31
[ai] Type casting
02:05
[ai] Interface narrowing
06:10
Quiz 3
3 questions
Quiz Answers
00:50

Interesting Types

7 lectures
[ai] Declaration merging
02:09
[ai] Never usage
03:12
[ai] Generic Objects Types
04:43
[ai] Unknown type
03:07
[ai] Void Type
05:46
Quiz 4
2 questions
Quiz Answers
00:38

Generic Types

8 lectures
[ai] Array Generic
04:24
[ai] Custom Generic Type
11:36
[ai] Generic extends
06:10
[ai] Default values of generics
04:50
[ai] Generic Types with Extends
08:25
[ai] Ternary with Generics
05:13
Quiz 5
2 questions
Quiz Answers
00:33

Inferring

10 lectures
Single from Array Type
04:30
Array Index Types
04:51
Mapped Types
05:48
Typeof
06:34
Infer keyword
08:58
KeyOf
02:49
Multiple generic params
04:45
Infering return type of Promise
12:07
Quiz 6
1 question
Quiz Answers
00:15

Starting Commerce Project

8 lectures
Infer get static props
05:22
Get all products separation
05:37
Fetch Api Function
09:18
Integrate Custom API Server
20:35
More about Shopify GraphQL
16:35
Quiz 7
1 question
Quiz Answers
00:11
GraphQL Query
00:18

Fetching & Structure

11 lectures
Fetch product query
09:18
Move fetch API
08:25
Specify fetcher return type
10:04
Map product from connection type
03:59
Normalize product
13:12
Normalize product images
09:42
Product bussines type
05:24
Alias Imports
05:39
Module re-exports
05:50
Quiz 8
1 question
Quiz Answers
00:06

Reusable Configuration

7 lectures
Next config file
06:42
Framework specific configuration
08:44
Ts config specific setup
10:46
Format JSON in config file
08:06
Handle corner cases in config
10:55
Shopify Config
06:56
Api config type
09:56

Layout

5 lectures
_app component
06:06
Layout component
07:54
FC vs FunctionComponent
00:10
Reusable layout
04:54
Noop
02:11

Tailwind & PostCSS

9 lectures
Css Start
02:34
Tailwind & PostCSS
15:04
Generate PostCss output
06:32
Autoprefixer
02:12
Layout styling
09:20
Add fit styling
06:24
Css variables
06:36
Tailwind variables
03:52
BG Color
02:12

Grid & Products

10 lectures
Product Card
08:08
Product info
08:42
Grid Component
05:24
Grid stylings
11:05
More About Grid Stylings
08:32
Additional Explanation
08:16
Product Images
03:42
Grid on LG screen
01:53
LayoutA
05:47
LayoutA Col
04:39

Product Card - Home Page CSS

7 lectures
[css] Product Tag
14:25
[css] Product BG
06:03
[css] Pattern svg
06:13
[css] Scaling up
04:28
[css] Transition
04:05
Normalize product price
07:37
[css] Max Height
02:46

[Optional]: Flex stylings

5 lectures
Flex Start
06:19
Apply Flex & Flex 1
07:45
Flex shrink
03:14
Flex basis
11:20
Justify content
09:08

Components - Home Page

16 lectures
Hero component
14:35
Container
06:51
Container custom element
05:18
El type
04:42
Flex Hero
07:39
Marquee
07:58
Product Variant
04:19
Slim Product
10:42
Ticker
03:33
Layout B
02:52
Marquee variant
03:40
Footer
02:56
Navbar
03:27
Navbar Links
07:30
Usernav
09:18
Icons
03:38

UI Provider & Sidebar

9 lectures
Sidebars, Wishlist
13:52
UI Provider
10:19
State in Ui Provider
06:58
Ui provider Interfaces
09:38
use reducer
11:38
Get ref
06:06
Disable scroll
05:06
Issue Introduction
04:43
Use memo
03:53

Product Detail Page

8 lectures
Product Detail Page
14:20
get all products paths
09:01
get static paths query
08:01
Get Product Function
06:04
Get Product Query
09:36
Pass variables to query
11:42
Specify variables type
07:16
Get normalized product
08:21

Normalization

7 lectures
Normalize Options
08:25
Normalize finished
07:52
Normalize variants
09:00
Normalize variants options
06:11
Variant and Option types
11:47
Product View
05:13
Product Data
09:52

Slider

5 lectures
Keen Slider
10:25
Sliding in keen slider
08:14
Product Slider Done
08:12
UI Button
05:47
Button Improvements
06:24

Choices

10 lectures
Display variant options
05:45
Swatch
08:40
Style Swatch
05:55
Choices
06:13
Choices type
04:02
Active Choice
11:47
isDark color
10:49
get variant
10:39
Find variant
13:20
Add item to cart
08:38

Mutation Hook

10 lectures
use add item
10:34
useHook handler
06:00
Use Api provider
09:01
Shopify api provider
11:10
Core config
04:02
Api Hooks
06:04
Context types
05:23
Use hook
11:25
Provide fetch
04:31
Mutation Hook
06:12

Fetcher Improvements

9 lectures
Pass custom fetch
10:03
Hook fetcher types
05:54
Call Api Fetcher
06:17
Api URL rework
11:29
Fix Fetcher type
03:17
Fetcher options
05:51
Variables Specification
11:01
Get checkout id
09:00
Checkout Line Items Add
07:25

Create Cart

11 lectures
use cart preparation
10:52
Fixing types
03:33
useSWRHook
03:46
useData hook
10:30
Call fetcher in use data
12:45
cookies checkout id
11:24
get checkout cookie from provider
05:05
checkout create prep
08:59
Checkout create mutation
09:51
extract data from checkout create
08:34
Store Cookies to Browser
09:21

Get Checkout

5 lectures
get checkout query
07:50
Checkout detail fragment
08:01
useSWR
09:13
useSWR improvement and useMemo
06:24
Pass SWR options
06:34

Cart Normalization

5 lectures
Checkout to cart
06:38
Cart normalization
08:35
Normalize line item
12:04
Normalize images, options
06:41
Line item interface
06:43

Mutation Hook Type

4 lectures
Mutation Hook
08:09
Mutation Hook Descriptor
13:43
Fetcher Output
06:24
UseAddItem type
12:47

UseSWR Hook Type

4 lectures
SWR Hook Type
09:44
Use Data Type
07:17
Fetcher output description
03:57
Use Cart Type
10:06

Display Cart Items

7 lectures
Display items in cart
07:07
Extend isEmpty to SWR
05:03
Cart Item Component
08:40
Display cart options
06:38
Mutate Cart
07:46
Display items count
07:06
Provide swatch
09:24

Remove Item Hook

4 lectures
Use remove item
11:05
Remove item descriptor
05:50
Remove item done
07:05
Remove item handler type
02:42

Update Item Hook

5 lectures
Use update item start
10:17
Handle quantity
09:20
Quantity improvement
01:40
Use update item done
11:09
Use update item type
02:50

UX improvements

4 lectures
Small improvements
03:25
Loading button
09:59
Loading Dots + Default variant
06:50
Button to link
04:54

Shopify Integration

6 lectures
Shopify and private app
09:15
Creating Shopify products
12:00
Accessing Storefront API
13:04
Checkout API
06:18
Handling checkout
12:03
Remove old checkout
10:12

Deployment To Vercel

3 lectures
Github deployment
09:12
Deployment To Vercel
05:44
Course End
05:01

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.