238
Lectures
28
Hours
Watch Intro Video

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.


Requirements

  • Basic ES6 and Javascript knowledge is required

  • Fundamentals in React, HTML and CSS

Course curriculum

  • 1

    Introduction

  • 2

    TS Intro

  • 3

    TS Beginnings

    • Playground

    • [ai] Function params

    • [ai] Custom types

    • Quiz 1
  • 4

    Interface & Type

    • [ai] Interface vs Type

    • [ai] Function Types

    • [ai] Class Types

    • [ai] Optional Parameters

    • Quiz 2
  • 5

    Narrowing

    • [ai] Narrowing

    • [ai] Extending Interface

    • [ai] Extending Type

    • [ai] Unions

    • [ai] Union narrowing

    • [ai] Type casting

    • [ai] Interface narrowing

    • Quiz 3
  • 6

    Interesting Types

    • [ai] Declaration merging

    • [ai] Never usage

    • [ai] Generic Objects Types

    • [ai] Unknown type

    • [ai] Void Type

    • Quiz 4
  • 7

    Generic Types

    • [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
  • 8

    Inferring

    • Single from Array Type

    • Array Index Types

    • Mapped Types

    • Typeof

    • Infer keyword

    • KeyOf

    • Multiple generic params

    • Infering return type of Promise

    • Quiz 6
  • 9

    Starting Commerce Project

    • Infer get static props

    • Get all products separation

    • Fetch Api Function

    • Integrate Custom API Server

    • More about Shopify GraphQL

    • Quiz 7

    • GraphQL Query
  • 10

    Fetching & Structure

    • 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
  • 11

    Reusable Configuration

    • 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
  • 12

    Layout

    • _app component

    • Layout component

    • Reusable layout

    • Noop
  • 13

    Tailwind & PostCSS

    • Css Start

    • Tailwind & PostCSS

    • Generate PostCss output

    • Autoprefixer

    • Layout styling

    • Add fit styling

    • Css variables

    • Tailwind variables

    • BG Color
  • 14

    Grid & Products

    • Product Card

    • Product info

    • Grid Component

    • Grid stylings

    • More About Grid Stylings

    • Additional Explanation

    • Product Images

    • Grid on LG screen

    • LayoutA

    • LayoutA Col
  • 15

    Product Card - Home Page CSS

    • [css] Product Tag

    • [css] Product BG

    • [css] Pattern svg

    • [css] Scaling up

    • [css] Transition

    • Normalize product price

    • [css] Max Height
  • 16

    [Optional]: Flex stylings

    • Flex Start

    • Apply Flex & Flex 1

    • Flex shrink

    • Flex basis

    • Justify content
  • 17

    Components - Home Page

    • 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
  • 18

    UI Provider & Sidebar

    • Sidebars, Wishlist

    • UI Provider

    • State in Ui Provider

    • Ui provider Interfaces

    • use reducer

    • Get ref

    • Disable scroll

    • Issue Introduction

    • Use memo
  • 19

    Product Detail Page

    • 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
  • 20

    Normalization

    • Normalize Options

    • Normalize finished

    • Normalize variants

    • Normalize variants options

    • Variant and Option types

    • Product View

    • Product Data
  • 21

    Slider

    • Keen Slider

    • Sliding in keen slider

    • Product Slider Done

    • UI Button

    • Button Improvements
  • 22

    Choices

    • Display variant options

    • Swatch

    • Style Swatch

    • Choices

    • Choices type

    • Active Choice

    • isDark color

    • get variant

    • Find variant

    • Add item to cart
  • 23

    Mutation Hook

    • use add item

    • useHook handler

    • Use Api provider

    • Shopify api provider

    • Core config

    • Api Hooks

    • Context types

    • Use hook

    • Provide Fetch

    • Mutation Hook
  • 24

    Fetcher Improvements

    • 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
  • 25

    Create Cart

    • 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
  • 26

    Get Checkout

    • get checkout query

    • Checkout detail fragment

    • useSWR

    • useSWR improvement and useMemo

    • Pass SWR options
  • 27

    Cart Normalization

    • Checkout to cart

    • Cart normalization

    • Normalize line item

    • Normalize images, options

    • Line item interface
  • 28

    Mutation Hook Type

    • Mutation Hook

    • Mutation Hook Descriptor

    • Fetcher Output

    • UseAddItem type
  • 29

    UseSWR Hook Type

    • SWR Hook Type

    • Use Data Type

    • Fetcher output description

    • Use Cart Type
  • 30

    Display Cart Items

    • Display items in cart

    • Extend isEmpty to SWR

    • Cart Item Component

    • Display cart options

    • Mutate Cart

    • Display items count

    • Provide Swatch
  • 31

    Remove item Hook

    • Use remove item

    • Remove item descriptor

    • Remove item done

    • Remove item handler type
  • 32

    Update Item Hook

    • Use update item start

    • Handle quantity

    • Quantity improvement

    • Use update item done

    • Use update item type
  • 33

    UX Improvements

    • Small improvements

    • Loading button

    • Loading Dots + Default variant

    • Button to link
  • 34

    Shopify Integration

    • Shopify and Private app

    • Creating Shopify products

    • Accesing storefront api

    • Checkout Api

    • Handling Checkout

    • Remove old checkout
  • 35

    Vercel Deployment

    • Github deployment

    • Deplyment to vercel

    • Course End

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of such a really extensive course

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture. Just download the correct version of the project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Next JS & Typescript with Shopify Integration - Full Guide"

    $29.00

    Access to this course only.

    Get started now

  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now

  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now