Перейти к содержимому

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

Coding in Flow

0:00 / 0:00

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

36 089 просмотров · 1 год назад
Coding in Flow
290 тыс. подписчиков
36 089 просмотров · 1 год назад
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 (Next....   ⭐ 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)