Build A Complete E-Commerce Website (Next.js 15, React Query, Tailwind CSS, TypeScript, Wix Studio)
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.
Features and technologies:
-Next.js 15
-React Query for caching, optimistic updates, and infinite loading lists
-Search & filter URL state management with useOptimistic
-User accounts and anonymous shopping carts
-Product options, variants, and inventory management
-Checkout from cart or single product
-User reviews with image & video uploads
-Email automations (Back in stock notifications, review reminders, etc.)
-Payment & shipping provider integration
-Real-time form validation with React Hook Form & Zod
-Mobile-responsive layout with Tailwind CSS & Shadcn UI components
-Pagination
-Dark theme, light theme, and system theme
-Advanced Next.js layout patterns
-Code best practices & architecture
-IDE setup with Prettier & plugins
-Deployment on Vercel
Starting code: https://github.com/codinginflow/nextj...
Create a free Wix account: https://www.wix.com/studio
Wix Headless setup link: https://www.wix.com/intro/headless
Project files:
Shadcn custom theme (globals.css): https://github.com/codinginflow/nextj...
Assets/images:
https://github.com/codinginflow/nextj...
https://github.com/codinginflow/nextj...
https://github.com/codinginflow/nextj...
https://github.com/codinginflow/nextj...
https://github.com/codinginflow/nextj...
Footer: https://github.com/codinginflow/nextj...
Terms page: https://github.com/codinginflow/nextj...
Full source code: https://github.com/codinginflow/nextj...
Part 2: • Build A Complete E-Commerce Website (...
⭐ 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 - Project overview
25:54 - Project & IDE setup (create-next-app, Shadcn UI, Prettier Tailwind plugin, VS Code extensions)
54:10 - Wix Studio setup & store configuration
1:00:37 - Creating products & categories
1:12:16 - Setting up Wix OAuth, T3 Env & Wix client
1:22:19 - Fetching products server-side (Suspense boundary)
1:58:35 - Product & WixImage components (advanced TypeScript type)
2:30:50 - Navbar (fetch shopping cart) + footer
2:41:24 - Wix API layer
2:52:35 - Product details page (generateMetadata, client component, React cache, loading.tsx, staleTimes)
4:38:36 - Add products to cart
4:48:21 - Session middleware (access & refresh tokens), Wix server/browser clients (js-cookie)
5:13:23 - Shopping cart button (React Query, useQuery, initialData, useMutation, cache mutation)
5:42:20 - Shopping cart sheet (optimistic updates with React Query)
6:34:34 - Back-in-stock notifications (React Hook Form validation, email automation)
7:01:39 - Member login (OAuth callback)
Watch video Build A Complete E-Commerce Website (Next.js 15, React Query, Tailwind CSS, TypeScript, Wix Studio) online without registration, duration hours minute second in high quality. This video was added by user Coding in Flow 10 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 30,485 once and liked it 1.2 thousand people.