Build and Deploy a Full-Stack E-Commerce: Next.js 13, React.js, Typescript, Tailwind, Prisma, Stripe

Опубликовано: 16 Октябрь 2023
на канале: Chaoo Charles

136k

Creating a Fullstack E-Commerce web app in Next13, React.js, Typescript, TailwindCSS, Prisma, Stripe, Next Auth, MongoDB and more..

Source Codes:
e-shop-assets:
Playlist:
Follow Me on Twitter:
Join My Discord Server

Donate To My PayPal:

Features:
️ Awesome UI in TailwindCSS
Complete Shopping Cart
Authentication with Google Login in Next Auth
Payment Integration in Stripe
Admin Dashboard
Shop Statistics (Summary)
⬆️ Image Uploads in Firebase Storage
Search Functionality
‍‍‍ Product Categories
Product Rating
️ Manage Products
️ Manage Orders
Deployment

Sections:
00:00 - Intro
12:44 - Prerequisite
13:39 - Creating a Next13 App
18:32 - theRootLayout
23:25 - Adding Fonts
25:52 - Our App Layout
32:43 - Container Component
36:15 - NavBar
43:05 - Footer
56:47 - Home Banner
01:05:01 - List Products
01:13:22 - Product Card
01:31:31 - Pages and Routes
01:39:18 - Product Details
01:55:24 - Cart Product State and Types
02:02:45 - Color Select
02:17:32 - Product Quantity
02:27:46 - Button Component
02:37:36 - Display Product Images
02:48:43 - List Product Reviews
02:59:13 - Avatar Component
03:03:44 - useCart Hook
03:11:27 - CartProvider
03:17:38 - Add Product to Cart
03:36:38 - Persist the Cart
03:41:22 - React Hot Toast
03:44:36 - Cart UI
03:59:06 - Cart Item Design
04:11:33 - Remove Item From Cart
04:16:09 - Increase Cart Quantity
04:22:07 - Decrease Cart Quantity
04:25:09 - Clear Cart
04:27:53 - Calculate Subtotal
04:38:56 - Total Cart Quantity and Amount
04:45:51 - Authentication in Next Auth
06:41:19 - Processing Payment with Stripe
08:09:50 - Admin Dashboard Intro
08:14:20 - Admin Page and Nested Navbar
08:31:38 - Creating/Adding a Product
10:09:42 - Manage Products
10:53:37 - Manage Orders
11:42:04 - Show Products From DB
11:50:26 - Product Categories
12:04:07 - Adding Product Reviews
12:26:24 - Search Bar
12:33:20 - Admin Summary
13:05:38 - App Deployment

SUPPORT MY CHANNEL
SUBSCRIBE:
Become a Channel Member:

Join My Fun Channel:

GET IN TOUCH:
Twitter:

Disclaimer: This video is not sponsored