Mastering NextJS + Interview Questions + E-commerce Project

NextJS 14, Pages + App Router, Prisma, SQLite, JWT, JOSE, BcryptJS, Adv. Caching, TailwindCSS, Stripe Payment gateway

261 Learners

(159 ratings)

Created by

Init Tech Labs

This course includes:

on-demand video
Access on mobile and TV
Full lifetime access
Certificate of completion

0

0.00

What you'll learn

Learn the fundamentals of NextJS

Learn the latest App Router

Detailed explanation of Pages Router to know the legacy approach or refactor the code.

Database handling with SQLite

CRUD operations with better-sqlite3 & Prisma ORM

API creation and data handling

Password hashing with bcryptjs

Implementing authentication with JOSE and JWT

Shopping Cart Implementation

Payment gateway implementation with Stripe

Component based architecture practices

Data validation and UI/UX implementation

E-commerce application

Interview Questions and preparation guide

Course Content

11 sections

188 lectures

11 hr 38 min

Course Introduction

04:10

NEXT JS in spite of ReactJS

01:38

RQ - NEXT JS in spite of ReactJS

03:32

Creating First Project

04:02

RQ - Creating First Project

02:16

Project Structure

02:59

RQ - Project Structure

01:33

Pages Router Vs App Router

01:40

RQ - Pages Router Vs App Router

00:54

ReactJS (Client side) Vs NextJS (Server side)

01:19

Defining Routes

02:53

Nested Routes

01:28

Linking Pages with <Link>

02:48

Understanding Global Layout

03:08

Creating Global Header Component

03:09

The Import Alias

02:04

Configuring favicon using Image Files

01:40

Configuring favicon using Code

02:31

<Image/> Component Basics

02:48

<Image> Component - Auto Optimization Feature

01:48

Styling - Global CSS and CSS Modules

04:36

React Server Component Vs Client Component

05:18

Error Page

03:22

Not Found Page

01:23

Dynamic Routes and Route Params

04:34

Making API calls in NextJS

04:21

Asynchronous Server Components

03:51

Implementing Loading Component

03:07

Introduction to SQLite

01:41

Data Types in SQLite

02:34

Creating SQLite Database

05:32

Introduction

01:10

Setting up Database with better-sqlite3

02:30

Table Creation and Adding Data

03:53

Rendering Data in Next App

03:41

Configuring Dynamic Routes for Products

03:00

Refactoring the Code Structure

02:24

Manually Configuring Tailwind CSS

04:00

Creating Add Product Interface

10:21

Handling Form Submission with Server Action

04:21

Executing Query & Redirecting with redirect()

03:28

Creating Products Grid Interface

06:02

Implementing Delete Product Feature

03:59

Implementing Edit Functionality

04:39

Understanding Caching in Next

03:19

Unexpected Behaviour in Project Build

03:21

Static to Dynamic - Cache Control

02:28

Time Based Cache Control

05:03

Path Based Revalidation

03:59

Revalidating with revalidateTag()

03:28

Introduction to Pages Router

03:25

Routing With Pages Router

04:17

Extracting the Slug from Dynamic Path

01:52

Catch-All Segments in Pages Router

03:32

Adding Global Interface

02:02

Linking and Navigation

02:11

Introduction to Prisma

01:21

Setting Up Prisma

04:09

Creating Prisma Client

01:42

Inserting Data Using create()

04:29

Inserting Data Using createMany()

03:06

All Possibilities of Record Deletion - delete() & deleteMany()

04:00

Fetching Data with Prisma

03:22

Updating Records with Prisma

03:35

The upsert() Method

02:28

Introduction

02:36

Project Creation

02:41

Creating Sidebar Component

03:34

Working on Sidebar

03:46

Combining Utility Classes with @apply

03:54

Styling the Sidebar

04:56

Adding Icons to the Sidebar

03:03

Creating ‘Users’ Page

05:43

Creating ‘Add Users’ Form

07:08

Implementing Component Based Architecture

06:34

Creating Button & Input Components

04:16

Refactoring Code Structure

02:40

Database Creation

02:30

Adding Users with Server Action

04:00

Implementing Hashing

03:19

Validating User Creation

03:44

Rendering Users in the Table

05:44

Creating Edit User Page

03:33

Dynamic Default Values for Edit

02:45

Updating User Data

03:43

Deleting User

03:41

Creating Delete Confirmation Popup

04:17

Enabling Confirmation Popup

05:32

Deleting User by confirmation popup

02:24

Creating Product Type Page

04:39

Creating Add Product Type Page

03:36

Adding Product Types and Products models into the schema

03:37

Adding Product Type using server action

04:26

Rendering Product Types into the Table

02:00

Creating Edit Product Type Page

03:19

Dynamic Default values for Product Type

02:33

Updating Product Type with server action

02:39

Deleting Product Type with server action

01:50

Creating Products Page

03:46

Creating Products interface for listing

04:50

Creating Add Product Page

02:57

Completing Add Products Form

02:55

Creating Switch Component

05:10

Creating File Input Component

06:17

Rendering Dynamic Product Types Data in Add Product Page

02:12

Creating Server Action for Adding Products

03:04

Implementing Image storage functionality

05:53

Completing Add Product Functionality

04:13

Rendering Dynamic Data in Products table

03:53

Creating Edit Product Page

03:13

Dynamic Default values for Product

03:44

Render Default values in Switch and File Input

02:39

Updating Product with server action

05:14

RQ - Updating Product with server action

01:39

Deleting Product with server action

02:03

Initiating Client Section

01:53

Creating Header Component

05:20

Implementing Search bar

02:16

Joining Tailwind Classes with Ideal Approach

02:34

RQ-Joining Tailwind Classes with Ideal Approach

02:38

Adding Profile Dropdown

04:31

useRef() Hook

04:42

Close Profile Dropdown menu on outside click

03:02

RQ-Close Profile Dropdown menu on outside click

02:36

Creating Input component

01:54

Creating Home Page

02:34

Creating Filters Section

06:15

Creating Custom Accordion Component

10:58

RQ-Creating Custom Accordion Component

01:37

Completing Custom Accordion Component

04:35

Continue on Filter Section

03:02

Creating Price Range Slider Component

04:39

Creating Product Card Component

08:17

Completing Product Card Component

02:47

Creating Button component

01:44

API creation for Product listing

03:59

API Creation For Fetching Product Types

01:41

Dynamic Product Type Rendering using API

02:28

Set Filter values into the search params

04:29

Modifying Products API to Apply Filters

05:35

Filter Functionality on client side

03:44

Search Filter Functionality

04:31

Creating the Product Page

06:38

Completing Product Page

03:21

API Creation For Fetching a Product by its ID

02:54

Dynamic Product Details Rendering using API

03:25

Rendering Products based on status

02:42

Creating Cart Page

03:24

Rendering Cart Item Card

06:22

Completing the Cart UI

04:55

Creating Context for Handling Products

01:50

RQ - Creating Context for Handling Products

01:28

Implement Cart Functionalities

08:04

Making Cart Page Dynamic

02:54

Enabling Quantity Selection

03:45

Finishing Dynamic Cart Page

05:06

Creating Login Page

05:52

Introduction of JOSE + JWT

01:53

Setup Authentication flow using JOSE + JWT

08:49

Create Server action for Login

03:13

Cookie Based Authentication

04:56

Handling Private and Public routes using middleware

05:03

Fetching Authenticated User Data

03:07

Implementing Logout with Server Action

05:18

Authenticate all the Server Actions of Admin Section

02:50

Creating Authentication Routes in Client Section

03:28

Creating Interface for Authentication Routes

05:47

Creating Buyer Table in the Database

01:55

Creating Sign-up API

03:52

Testing Signup API using Postman

03:37

Creating Login API

02:56

Testing the Login API Using Postman

01:34

Implementing Signup Functionality in the Client Section

07:19

Implementing Customer Login Functionality

03:59

API to Fetch Unique Customer's data

04:18

Fetching Customer's data using API in the Client Section

05:35

Logout Functionality in the Client Section

02:08

Introduction

02:16

Basic Configurations of Stripe

04:19

Rendering Stripe's Embedded Checkout Form

08:11

Creating Checkout Session Dynamically

06:44

Creating Payment Status Page

07:23

Creating Sales and Transaction Table in Database

04:51

API to Update Database after the Successful Checkout

06:05

Testing the Checkout API using Postman

03:57

Integrating Checkout API in the Client Section

02:55

Creating Buyer Master Section

03:18

Rendering Dynamic data in Buyers Table

02:40

Requirements

JavaScript and ReactJS basics will be a great help. Time, attention and dedication to learn & practice.

5.0

Course Rating

159 Reviews

Hemang Pavar
Hemang Pavar

February 5, 2025

"I love this course"