Mastering NextJS + Interview Questions + E-commerce Project

Name: Mastering NextJS + Interview Questions + E-commerce Project
Rating: 4.7 (28 reviews)

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

Highest Rated

Created byNirmal Joshi

Last updated 1/2025

English

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

13 sections • 231 lectures • 13h 40m total length

Introduction4:10
NEXT JS in spite of ReactJS1:38
RQ - NEXT JS in spite of ReactJS3:32
Creating First Project4:02
RQ - Creating First Project2:16
Project Structure2:59
RQ - Project Structure1:33
Pages Router Vs App Router1:40
RQ - Pages Router Vs App Router0:54
ReactJS (Client side) Vs NextJS (Server side)1:19

Defining Routes2:53
Nested Routes1:28
Linking Pages with <Link>2:48
Understanding Global Layout3:08
Creating Global Header Component3:09
The Import Alias2:04
Configuring favicon using Image Files1:40
Configuring favicon using Code2:31
<Image/> Component Basics2:48
<Image> Component - Auto Optimization Feature1:48
RQ - <Image> Component - Auto Optimization Feature1:10
Styling - Global CSS and CSS Modules4:36
RQ - Styling - Global CSS and CSS Modules1:50
React Server Component Vs Client Component5:18
RQ - React Server Component Vs Client Component1:24
Error Page3:22
Not Found Page1:23
Dynamic Routes and Route Params4:34
Learn to implement dynamic routes in Next.js using a single [slug] route to render many product pages. Build links to /products/[slug], access route params, and render data from props.
Making API calls in NextJS4:21
Asynchronous Server Components3:51
RQ - Asynchronous Server Components1:24
Implementing Loading Component3:07

Introduction1:10
Setting up Database with better-sqlite32:30
Table Creation and Adding Data3:53
Create a products table in SQLite with prepare to compile the query, run to execute, and all to fetch results after selecting from products.
Rendering Data in Next App3:41
Configuring Dynamic Routes for Products3:00
Refactoring the Code Structure2:24
Manually Configuring Tailwind CSS4:00
Creating Add Product Interface10:21
Handling Form Submission with Server Action4:21
Executing Query & Redirecting with redirect()3:28
Creating Products Grid Interface6:02
RQ - Creating Products Grid Interface0:48
Implementing Delete Product Feature3:59
Implementing Edit Functionality4:39

Introduction2:36
Project Creation2:41
Creating Sidebar Component3:34
Working on Sidebar3:46
Combining Utility Classes with @apply3:54
RQ - @layer & @apply - Combining Utility Classes1:37
Styling the Sidebar4:56
Adding Icons to the Sidebar3:03
Creating ‘Users’ Page5:43
Creating ‘Add Users’ Form7:08
Implementing Component Based Architecture6:34
Creating Button & Input Components4:16
Refactoring Code Structure2:40
Refactor the codebase by moving UI into a screens structure, turning pages into dedicated screen components, and keeping root files minimal to improve maintainability and prepare for database integration.
Database Creation2:30
Adding Users with Server Action4:00
Implementing Hashing3:19
RQ - Implementing Hashing2:04
Validating User Creation3:44
Rendering Users in the Table5:44
Render users in a Next.js app by fetching data from db.admin.user.findMany via a server action, mapping users into a table, and providing edit and delete actions with icons.
Creating Edit User Page3:33
Dynamic Default Values for Edit2:45
Updating User Data3:43
Deleting User3:41
Creating Delete Confirmation Popup4:17
Enabling Confirmation Popup5:32
Deleting User by confirmation popup2:24
Creating Product Type Page4:39
Creating Add Product Type Page3:36
Adding Product Types and Products models into the schema3:37
RQ - Adding Models In the Schema - Product Type & Product1:06
Adding Product Type using server action4:26
Rendering Product Types into the Table2:00
Creating Edit Product Type Page3:19
Dynamic Default values for Product Type2:33
Updating Product Type with server action2:39
Deleting Product Type with server action1:50
Creating Products Page3:46
Creating Products interface for listing4:50
Creating Add Product Page2:57
Completing Add Products Form2:55
Creating Switch Component5:10
Creating File Input Component6:17
Rendering Dynamic Product Types Data in Add Product Page2:12
Creating Server Action for Adding Products3:04
Implementing Image storage functionality5:53
Completing Add Product Functionality4:13
Rendering Dynamic Data in Products table3:53
Creating Edit Product Page3:13
Dynamic Default values for Product3:44
Render Default values in Switch and File Input2:39
Updating Product with server action5:14
RQ - Updating Product with server action1:39
Deleting Product with server action2:03

Initiating Client Section1:53
Creating Header Component5:20
Implementing Search bar2:16
Joining Tailwind Classes with Ideal Approach2:34
RQ-Joining Tailwind Classes with Ideal Approach2:38
Adding Profile Dropdown4:31
useRef() Hook4:42
Close Profile Dropdown menu on outside click3:02
RQ-Close Profile Dropdown menu on outside click2:36
Creating Input component1:54
Creating Home Page2:34
Creating Filters Section6:15
Creating Custom Accordion Component10:58
RQ-Creating Custom Accordion Component1:37
Completing Custom Accordion Component4:35
Continue on Filter Section3:02
Creating Price Range Slider Component4:39
Creating Product Card Component8:17
Completing Product Card Component2:47
Creating Button component1:44
API Creation for Product listing3:59
Dynamic Product Rendering using Server Action7:12
API Creation For Fetching Product Types1:41
Dynamic Product Type Rendering using API2:28
Set Filter values into the search params4:29
Modifying Products API to Apply Filters5:35
Filter Functionality on client side3:44
Search Filter Functionality4:31
Creating Product Page6:38
Create a dynamic product page route with a product id to display product details—image, name, type, ratings, price (MRP and selling price), and stock status via a grid card.
Completing Product Page3:21
API Creation For Fetching a Product by its ID2:54
Dynamic Product Details Rendering using API3:25
Rendering Products based on status2:42
Creating Cart Page3:24
Rendering Cart Item Card6:22
Completing the Cart UI4:55
Creating Context for Handling Products1:50
RQ - Creating Context for Handling Products1:28
Implement Cart Functionalities8:04
Making Cart Page Dynamic2:54
Enabling Quantity Selection3:45
Finishing Dynamic Cart Page5:06

Creating Login Page5:52
Introduction of JOSE + JWT1:53
Setup Authentication flow using JOSE + JWT8:49
Create Server action for Login3:13
Cookie Based Authentication4:56
RQ - Cookie Based Authentication1:14
Handling Private and Public routes using middleware5:03
Fetching Authenticated User Data3:07
Implementing Logout with Server Action5:18
Authenticate all the Server Actions of Admin Section2:50
Creating the Authentication Routes on the Client Section3:28
Creating Interface for Authentication Routes5:47
Creating Buyer Table in the Database1:55
Creating Sign-up API3:52
Testing Signup API using Postman3:37
Creating Login API2:56
Testing the Login API Using Postman1:34
Implementing Signup Functionality in the Client Section7:19
Implementing Customer Login Functionality3:59
API to Fetch Unique Customer's data4:18
Fetching Customer's data using API in the Client Section5:35
Logout Functionality in the Client Section2:08

Requirements

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

Description

Key concepts covered:

NextJS Fundamentals
Server Side Rendering
TailwindCSS
App Router
Pages Router
Routing in NextJS
Optimized Image Loading
Advanced Caching
SQLite
better-sqlite3 ORM
Prisma ORM
REST APIs
CRUD with SQLite
Cookies
JWT
BcryptJS
E-commerce Project
Implementing Middleware in Project
Shopping Cart Implementation
Stripe Payment Gateway
Industry Standard Coding Practices
Deployment with CICD
Interview Questions & more…

NextJS is becoming one of the most favorite framework among developers these days. And Why not!. Even the official ReactJS site encourages developers to use NextJS as it has the base of old school React practices and performance of the new generation. This course is specially crafted for developers who want to switch to NextJs with ease. It covers all the aspects of fundamentals, interview questions and a very practical E-commerce project which covers all the phases right from UI designs to successful deployment along with the implementation of CICD.

In addition you will learn

Server-side rendering for improved SEO and performance
Static site generation for lightning-fast load times
Automatic code splitting for optimized performance
Image optimization for faster page loads
Routing, data fetching, and state management
Best practices for building scalable Next.js applications

Enroll today and take a definitive step towards shaping a successful career in the world of modern server-side web development.

Who this course is for:

Aspirants who want to master NextJS
Junior & mid-level developers who want to enhance their skills to the max!
Expert developers who want to upgrade their existing development skills with the latest features.

Mastering NextJS + Interview Questions + E-commerce Project

What you'll learn

Explore related topics

Course content

Introduction10 lectures • 24min

NextJS Basics with App Router22 lectures • 1hr 1min

SQLite Basics3 lectures • 10min

Next with SQLite14 lectures • 54min

Caching in NextJS11 lectures • 31min

Pages Router9 lectures • 19min

Prisma with SQLite10 lectures • 30min

MyStore - Admin Section53 lectures • 3hr 13min

Mystore - Client Section42 lectures • 2hr 48min

Mystore - Authenitcation22 lectures • 1hr 29min

Requirements

Description

Who this course is for: