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/nextjs-15-wix-store/tree/0-Starting-Point

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/nextjs-15-wix-store/blob/0-Starting-Point/src/app/globals.css
Assets/images:
https://github.com/codinginflow/nextjs-15-wix-store/blob/0-Starting-Point/public/placeholder.png
https://github.com/codinginflow/nextjs-15-wix-store/blob/0-Starting-Point/src/assets/logo.png
https://github.com/codinginflow/nextjs-15-wix-store/blob/0-Starting-Point/src/assets/banner.jpg
https://github.com/codinginflow/nextjs-15-wix-store/blob/0-Starting-Point/src/app/favicon.ico
https://github.com/codinginflow/nextjs-15-wix-store/blob/0-Starting-Point/src/app/opengraph-image.png
Footer: https://github.com/codinginflow/nextjs-15-wix-store/blob/final/src/app/Footer.tsx
Terms page: https://github.com/codinginflow/nextjs-15-wix-store/blob/final/src/app/terms/page.tsx

Full source code: https://github.com/codinginflow/nextjs-15-wix-store

Part 2: https://www.youtube.com/watch?v=cTcCXfDm_7k

⭐ 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/reactbestpractices
???? 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: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/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)