Next.Js Ecommerce - Build A Shopping Platform From Scratch

[0dayddl]

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

Bitte Anmelden oder Registrieren um Code Inhalt zu sehen!

Bitte Anmelden oder Registrieren um Code Inhalt zu sehen!

Bitte Anmelden oder Registrieren um Code Inhalt zu sehen!