Next.js Ecommerce 2026 – Shopping Platform From Scratch
-
Introduction
-
App Creation & Basic Layout
-
Database, Prisma & Product Display
-
Authentication With Next AuthSection Intro0sPrisma User-Related Models0sSeed User Data0sNext Auth Setup0sNext Auth Catch All API Route0sSign In & Sign Out Action0sAuth Layout & Sign In Page0sCredentials Sign In Form0sHook Up Sign In Form0sCallback URL Redirect0sUser Button & Sign Out0sSign Up Zod Schema & Action0sSign Up Page & Form0sSign Up Error Handling0sCustomize Token With JWT Callback0s
-
Add To Cart
-
Cart & Shipping Pages
-
Payment Method & Order PagesSection Intro0sPayment Method Action & Zod Schema0sPayment Method Page0sPayment Method Form & Update0sOrder & OrderItem Prisma Schema0sOrder Zod Schemas & Types0sPlace Order Page0sCreate Order Action0sPlace Order Form0sOrder Page & Action0sFormat Utility Functions0sOrder Details Table0s
-
PayPal Payments
-
Order History & User Profile
-
Admin Overview & Orders
-
Admin Products & Image UploadSection Intro0sGet Products For Admin Page0sDisplay Products0sDelete Products0sCreate & Update Actions0sCreate Product Page & Form0sForm Fields & Slugify0sCreate Product Form Submission0sUploadthing Configuration0sAdd Image Uploads0sProduct Cleanup0sIs Featured & Banner0sProduct Update Form0s
-
Admin Users & Search
-
Search Filtering, Drawer & Carousel
-
Ratings & Reviews
-
Stripe Payments
-
Email Purchase Receipts
-
Homepage Components & Wrap Up
-
Notes & Fixes
If you want to take your React skills to the next level and learn to use Next.js in an actual real-world project, this is the course for you. We are using Next.js, TypeScript and many other technologies to create “Prostore”. A full-featured shopping platform with reviews, PayPal and Stripe integration, email receipts and more.
This course is for people that already know React. Knowing the basics of Next.js is even better. You will learn how to use many different technologies together to create a full project that you can then display on your portfolio.
Here is a list of some of the technologies and libraries that we’ll be using:
Next.js v15
React v19
TypeScript
ES Lint
PostgreSQL
Prisma
Zod
Next Auth
React Hook Form
PayPal & Stripe API
ShadCN UI
Tailwind CSS
Recharts
Uploadthing
Jest
Even though this is a project-based course, it is not simply “watch me code”. I will explain in detail what I am doing so that you can understand rather than just copy. You can then use that knowlege to create your own awesome projects.
Here is a complete outline of the course sections:
1. Introduction – I explain what the course is about and we go over the project and the stack.
2. App Creation & Basic Layour – We create our app, the layout, setup ShadCN UI and learn how to use UI components, create a theme toggler, loading & not found pages, display some sample data.
3. Database, Prisma & Product Display – We setup our Neon PostgreSQL database and the Prisma ORM. We learn to create models and migrations and how to seed data and fetch products from the database.
4. Authentication With Next Auth – We create full authentication with the Next Auth library
5. Add To Cart – Create a cart system with database and session integration.
6.. Cart & Shipping Page – We start out checkout process with the cart page summary and the shipping address form.
7. Payment Method & Order Pages – We create the other pages in our checkout process.
8. PayPal Payments – Integrate the PayPal API. We even do a little unit testing with JEST.
9. Order History & User Profile – Create the user area with a list of orders and the profile update page.
10. Admin Dashboard – We start on the admin area and the overview page
11. Admin Products & Image Uploading – We manage products from admin and implement image uploading with Uploadthing.
12. Admin Users & Search – Manage users from admin and implement a search for products, orders and users in admin.
13. Drawer, Carousel and Search – We create a category drawer, featured product carousel and then work on the main product search filters.
14. Ratings & Reviews – We create the rating and review system.
15. Stripe Payments – Use the Srtipe API and some packages to ad stripe payments.
16. Email Purchase Receipts – We use the Resend service for sending emails through the app.
17 – Homepage Components & Wrap Up – We add few more homepage components and then wrap up the course.
What's included
- 22.5 hours on-demand video
- 2 articles
- 7 downloadable resources
- Access on mobile and TV
- Certificate of completion