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

  • 4

    Interface & Type

  • 5

    Narrowing

  • 6

    Interesting Types

  • 7

    Generic Types

  • 8

    Inferring

  • 9

    Starting Commerce Project

  • 10

    Fetching & Structure

  • 11

    Reusable Configuration

  • 12

    Layout

  • 13

    Tailwind & PostCSS

  • 14

    Grid & Products

  • 15

    Product Card - Home Page CSS

  • 16

    [Optional]: Flex stylings

  • 17

    Components - Home Page

  • 18

    UI Provider & Sidebar

  • 19

    Product Detail Page

  • 20

    Normalization

  • 21

    Slider

  • 22

    Choices

  • 23

    Mutation Hook

  • 24

    Fetcher Improvements

  • 25

    Create Cart

  • 26

    Get Checkout

  • 27

    Cart Normalization

  • 28

    Mutation Hook Type

  • 29

    UseSWR Hook Type

  • 30

    Display Cart Items

  • 31

    Remove item Hook

  • 32

    Update Item Hook

  • 33

    UX Improvements

  • 34

    Shopify Integration

  • 35

    Vercel Deployment

Instructor(s)

Software Engineer

Filip Jerga

Hey, I'm Filip Jerga! I've been deep in the software engineering world for over 10 years, building all sorts of cool stuff—from software for ultrasound devices with C++ to modern apps with React and Angular. I even grabbed a Master's in AI along the way. What really drives me now isn't just coding; it's making complex programming simple and fun for you. I've poured all my real-world experience and a passion for teaching into these courses. My goal is to help you think like a pro, tackle tough problems, and build practical skills you'll truly use to create amazing things.

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