Build A Complete E-Commerce Website (Next.js 15, React Query, Tailwind CSS, TypeScript, Wix Studio)

Опубликовано: 10 Октябрь 2024
на канале: Coding in Flow

13,062

811

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)