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
Ещё видео!