Full Stack E-Commerce CMS with Prisma, Next.js, React, Tailwind

The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 13 App Router to build a fully functional E-Commerce with Admin Dashboard with seamless navigation and user experience.

Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth.

This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with Next.js 13 App Router!

00:00:00 | Intro

00:11:13 | Environment setup (Admin)

00:27:48 | Clerk Authentication (Admin)

00:43:27 | Modal components (Admin)

01:06:20 | Form components (Admin)

01:21:28 | Prisma, PlanetScale, MySQL setup (Admin)

01:45:02 | Dashboard setup (Admin)

02:03:43 | Navigation bar (Admin)

02:38:57 | Settings page (Admin)

03:35:01 | Billboards Entity (Admin)

04:29:58 | Data Table (Admin)

05:18:15 | Categories Entity (Admin)

05:50:13 | Sizes Entity (Admin)

06:05:18 | Colors Entity (Admin)

06:19:41 | Products Entity (Admin)

07:14:38 | Orders Entity (Admin)

07:26:15 | Environment setup & featured products (Store)

08:22:14 | Individual product screen (Store)

08:45:47 | Individual category screen (Store)

09:07:17 | Product preview modal components (Store)

09:20:29 | Add to Cart functionality (Store)

09:46:14 | Stripe Setup & Checkout finalization (Admin, Store)  

10:08:07 | Dashboard page (Admin)

10:27:34 | Dark Mode (Admin)

10:30:22 | Deployment to Vercel (Admin, Store)

Sources:

https://github.com/antonioerdeljac/next13-ecommerce-admin

https://github.com/antonioerdeljac/next13-ecommerce-store