Build A Complete E-Commerce Website (Next.js 15) - Part 2/2

Published: 11 October 2024
on channel: Coding in Flow

2,611

141

Build and deploy a full-stack e-commerce website with Next.js 15 and Wix Studio Headless. Great for (aspiring) freelancers or for your own portfolio.

Part 1:    • Build A Complete E-Commerce Website (...

Create a free Wix account: https://www.wix.com/studio

Full source code: https://github.com/codinginflow/nextj...

⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbes...
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord

📣 Follow Coding in Flow on social media:
Twitter:   / codinginflow
Instagram:   / codinginflow
TikTok:   / codinginflow
Facebook:   / codinginflow

Timestamps:
0:00 - Dark mode (next-themes)
7:42 - Collections page (advanced layout.tsx fetching) & navigation menu
42:58 - Responsive pagination bar (server-side pagination via search params)
1:05:32 - Product search (progressive enhancement)
1:31:29 - Sort & filter, URL state, useOptimistic
2:30:59 - Responsive navbar (mobile menu)
2:46:19 - Checkout, payment providers, and shipping configuration
3:44:05 - Buy now button (single product checkout)
3:56:39 - Update member info (React Hook form)
4:15:28 - Past orders (infinite loading with useInfiniteQuery)
4:29:44 - Related products
4:44:35 - Product reviews with media uploads (image/video) & email automation
7:02:07 - Deployment to Vercel + URL setup (DNS records)