0daytutorial
MyBoerse.bz Pro Member
Next.Js Ecommerce - Build A Shopping Platform From Scratch
Published 12/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 12.63 GB | Duration: 22h 7m
Use Next 15, React 19, TypeScript, PostgreSQL and Prisma to build a real-world ecommerce website
What you'll learn
Build a professional ecommerce website from absolute scratch
PayPal, Stripe and Cash On Delivery payment options
Learn Next 15, React 19, PostgreSQL, Prisma, TypeScript & Zod
Full Authentication, admin area, review system, featured projects, sorting, search filters, user profiles, image uploading & more
Continuous deployment with Vercel & Git
Shopping cart, sessions, JWT & cookies
Learn how to write TypeSafe code with TypeScript, Zod for validation & React Hook Form for easy form management
Full admin dashboard with stats and montly sales chart as well as product, order and user management
Requirements
You should know the fundamentals of JavaScript & React
Description
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 v15React v19TypeScriptES LintPostgreSQLPrismaZodNext AuthReact Hook FormPayPal & Stripe APIShadCN UITailwind CSSRechartsUploadthingJestEven 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 library5. 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 page11. 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.
Overview
Section 1: Introduction
Lecture 1 Welcome To The Course
Lecture 2 The Stack
Lecture 3 The Project
Lecture 4 The Environment
Lecture 5 Premium Docs
Section 2: App Creation & Basic Layout
Lecture 6 Section Intro
Lecture 7 Create Next App & Assets
Lecture 8 ShadCN UI Setup
Lecture 9 Root Layout & Constants
Lecture 10 Header & Footer Components
Lecture 11 Theme Mode Toggle
Lecture 12 Loading & Not Found Pages
Lecture 13 Responsive Sheet Menu
Lecture 14 Sample Products & Product List
Lecture 15 Product Card Component
Lecture 16 Product Price Component
Section 3: Database, Prisma & Product Display
Lecture 17 Section Intro
Lecture 18 PostgreSQL & Prisma Setup
Lecture 19 Prisma Models & Migrations
Lecture 20 Seed Sample Data
Lecture 21 Load Products From Database
Lecture 22 Zod Validation & Type Inference
Lecture 23 Servlerless Environment Config
Lecture 24 Product Details Page
Lecture 25 Product Images Component
Lecture 26 Initial Deployment
Lecture 27 A Note On ES Lint Errors
Section 4: Authentication With Next Auth
Lecture 28 Section Intro
Lecture 29 Prisma User-Related Models
Lecture 30 Seed User Data
Lecture 31 Next Auth Setup
Lecture 32 Next Auth Catch All API Route
Lecture 33 Sign In & Sign Out Action
Lecture 34 Credentials Sign In Form
Lecture 35 Hook Up Sign In Form
Lecture 36 Callback URL Redirect
Lecture 37 User Button & Sign Out
Lecture 38 Sign Up Zod Schema & Action
Lecture 39 Sign Up Page & Form
Lecture 40 Sign Up Error Handling
Lecture 41 Customize Token With JWT Callback
Section 5: Add To Cart
Lecture 42 Section Intro
Lecture 43 Cart Zod Schema & Prisma Model
Lecture 44 Add To Cart Component
Lecture 45 Session Cart ID Cookie
Lecture 46 Get Item From Cart
Lecture 47 Price Calc & Add To Database
Lecture 48 Handle Quantity & Multiple Products
Lecture 49 Remove Cart Action
Lecture 50 Dynamic Cart Button
Lecture 51 Smooth UI With useTransition Hook
Section 6: Cart & Shipping Pages
Lecture 52 Section Intro
Lecture 53 Cart Page
Lecture 54 ShadCN UI Table
Lecture 55 Subtotal Card
Lecture 56 Shipping Address Zod Schema & Page
Lecture 57 Shipping Address & Form
Lecture 58 Update User Address
Lecture 59 Checkout Steps Component
Lecture 60 Persist Session Cart
Lecture 61 Protecting Paths
Section 7: Payment Method & Order Pages
Lecture 62 Section Intro
Lecture 63 Payment Method Action & Zod Schema
Lecture 64 Payment Method Page
Lecture 65 Payment Method Form & Update
Lecture 66 Order & OrderItem Prisma Schema
Lecture 67 Order Zod Schemas & Types
Lecture 68 Place Order Page
Lecture 69 Create Order Action
Lecture 70 Place Order Form
Lecture 71 Order Page & Action
Lecture 72 Format Utility Functions
Lecture 73 Order Details Table
Section 8: PayPal Payments
Lecture 74 Section Intro
Lecture 75 PayPal Sandbox Setup
Lecture 76 Generate Access Token
Lecture 77 Jest Testing For Access Token
Lecture 78 Create Order & Capture Payment Request
Lecture 79 Jest Testing For Order Payment
Lecture 80 Create PayPal Order Action
Lecture 81 Approve & Update Order
Lecture 82 Implement PayPal Button
Section 9: Order History & User Profile
Lecture 83 Section Intro
Lecture 84 User Layout & Menu
Lecture 85 Get My Orders Action
Lecture 86 Orders Page
Lecture 87 Orders Pagination
Lecture 88 Update Profile Action
Lecture 89 Update Profile Form
Lecture 90 Profile Form Submission
Section 10: Admin Overview & Orders
Lecture 91 Section Intro
Lecture 92 Admin Layout & Main Nav
Lecture 93 Get Order Summary
Lecture 94 Admin Overview Display Data
Lecture 95 Monthly Sales Chart
Lecture 96 Admin Orders Page & Action
Lecture 97 Delete Orders
Lecture 98 Update Order Actions (COD)
Lecture 99 Update Order Buttons (COD)
Section 11: Admin Products & Image Upload
Lecture 100 Section Intro
Lecture 101 Get Products For Admin Page
Lecture 102 Display Products
Lecture 103 Delete Products
Lecture 104 Create & Update Actions
Lecture 105 Create Product Page & Form
Lecture 106 Form Fields & Slugify
Lecture 107 Create Product Form Submission
Lecture 108 Uploadthing Configuration
Lecture 109 Add Image Uploads
Lecture 110 Product Cleanup
Lecture 111 Is Featured & Banner
Lecture 112 Product Update Form
Section 12: Admin Users & Search
Lecture 113 Section Intro
Lecture 114 Get & Display Users
Lecture 115 Delete Users
Lecture 116 User Edit Page
Lecture 117 Update User Form
Lecture 118 Update User Action
Lecture 119 Admin Search Form
Lecture 120 Admin Order Search
Lecture 121 Admin User Search
Section 13: Search Filtering, Drawer & Carousel
Lecture 122 Section Intro
Lecture 123 Category Drawer
Lecture 124 Featured Products Carousel
Lecture 125 Search Component
Lecture 126 Search Page
Lecture 127 Search Filters
Lecture 128 Get Filter URL Function
Lecture 129 Category & Price UI Filters
Lecture 130 Rating Filter & Filter Display
Lecture 131 Sorting Products
Lecture 132 Dynamic Metadata
Section 14: Ratings & Reviews
Lecture 133 Section Intro
Lecture 134 Review Prisma Schema, Zod & Type
Lecture 135 Review List Component
Lecture 136 Review Form Dialog Component
Lecture 137 Create & Update Review Action
Lecture 138 Connect Review Form To Action
Lecture 139 Get Reviews Action
Lecture 140 Display Reviews
Lecture 141 Update & Reload Reviews
Section 15: Stripe Payments
Lecture 142 Section Intro
Lecture 143 Stripe Seup
Lecture 144 Order Form Payment Intent
Lecture 145 Stripe Payment Component
Lecture 146 Stripe Payment Success Page
Lecture 147 Webhook To Mark Order As Paid
Section 16: Email Purchase Receipts
Lecture 148 Section Intro
Lecture 149 Resend API Key & Setup
Lecture 150 Resend Main Function
Lecture 151 Purchase Email Receipt Template
Lecture 152 Preview Email In Browser With React Email
Lecture 153 Sending Emails
Section 17: Homepage Components & Wrap Up
Lecture 154 Section Intro
Lecture 155 Icon Boxes Component
Lecture 156 Deal Countdown Component
Lecture 157 Wrap Up
React developers that want to take it a step further by creating a professional-level platform
