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

PERN Stack Project: Build and Deploy a Full Stack E-Commerce App

Codesistency

0:00 / 0:00

PERN Stack Project: Build and Deploy a Full Stack E-Commerce App

41 425 просмотров · 4 месяца назад
Codesistency
158 тыс. подписчиков
41 425 просмотров · 4 месяца назад
💫 Try Sentry for FREE: https://dub.sh/sentry3 (Get $80 for FREE) 🚀 Try Stream for FREE: https://dub.sh/getstreamio ✨ Try Neon for FREE: https://dub.sh/neon3 🔐 Try Clerk for FREE: https://dub.sh/clerk3 💥 Try Imagekit for FREE: https://tinyurl.com/4c8pmh88 👇 Resources: 📚 Source Code: https://dub.sh/code4 (Give it a star ⭐) ✏️ Diagrams: https://dub.sh/diagrams6 🤖 Vision Agents: https://dub.sh/vision-agents Copy paste dependencies: npm i express@5.2.1 dotenv@16.4.7 cors@2.8.5 @clerk/express@2.1.0 @clerk/backend@3.2.8 @imagekit/nodejs@7.4.0 @sentry/node@10.48.0 @sentry/profiling-node@10.48.0 drizzle-orm@0.39.3 pg@8.13.1 standardwebhooks@1.0.0 stream-chat@8.57.6 zod@3.24.2 npm i --save-dev @types/express@5.0.6 @types/node@22.10.10 @types/pg@8.11.10 drizzle-kit@0.30.4 tsx@4.19.2 typescript@5.7.3 ✨ Highlights: 🛒 Full Stack E-Commerce App built from scratch ⚛️ Frontend with React, TanStack Query, Tailwind CSS & DaisyUI 🚀 Backend with Express.js & TypeScript 🔐 Secure Authentication with Clerk 🗄️ PostgreSQL Database hosted on Neon 💳 Payments integration with Polar 📦 Product, Cart & Order Management 📊 Admin Dashboard to manage products 💬 Real-time Customer Support Chat with Stream 📹 Video Calling powered by Stream ⌨️ Typing Indicators in chat 😀 Message Reactions 🧵 Threaded Conversations 📁 File Uploads in chat 🎞️ GIF Support inside messages 🔔 Webhooks explained and implemented step-by-step 📤 Image Uploads & Optimization with ImageKit 🚨 Monitoring, Error Tracking & Performance Tracking with Sentry 📋 Structured Logs for debugging and analysis ⚡ Modern SaaS / E-Commerce Architecture 🌐 Deploy your app with a live URL 🆓 100% Free Setup to get started 📂 Full Source Code Provided 🎯 Resume-ready production-style project Timestamps: 00:00:00 - 0- Project Preview 00:02:53 - 1- Project & Tools Setup 00:33:06 - 2- Database Schema & Relations 00:56:53 - 3- Auth & Webhooks 01:28:30 - 4- Deploying Our App 01:48:25 - 5- Understanding Cron Jobs 01:55:18 - 6- Product & Stream Routes 02:18:48 - 7- Checkout Routes for Payments 02:44:35 - 8- Polar Webhooks 03:01:17 - 9- Server Side Integrating Sentry 03:19:56 - 10- Admin Routes 03:38:47 - 11- Order Routes 04:01:15 - 12- Frontend Setup - Tailwind, Tanstack etc. 04:31:48 - 13- Navbar & useCart Store 05:04:23 - 14- Home Page 05:38:16 - 15- Cart Page 06:00:54 - 16- Orders Page 06:15:44 - 17- Checkout Return Page 06:20:26 - 18- Product Detail Page 06:30:34 - 19- Order Detail Page 06:55:08 - 20- Order Chat Page 07:18:32 - 21- Video Call Page 07:31:45 - 22- Admin Dashboard Page Thanks for watching! Keywords: PERN Stack Project. React Tutorial. React.js Tutorial. Build and Deploy an E-commerce App. Postgres Tailwind TypeScript #coding #webdevelopment #nextjs #react #programming #codesistency