MENU

Fun & Interesting

Build & Deploy a Full-Stack SaaS Google Drive Clone | Next.js 15 Tutorial with React Query & Hono.js

Full Stack Mastery 5,369 3 weeks ago
Video Not Working? Fix It Now

🔥 Take your Next.js 15 skills to the next level with this comprehensive tutorial on building and deploying a full-stack SaaS project inspired by Google Drive and Dropbox. Here's what you'll learn: ✅ Upload large files using Hono.js to overcome Next.js route handler limits. ✅ Implement efficient client-side data caching with React Query. ✅ Use Pinata Cloud for cost-effective file uploads (better than AWS S3 in some cases). ✅ Manipulate the DOM effectively in a Next.js environment. 🌟 What You’ll Achieve: ⚈ Build a production-ready, scalable SaaS application. ⚈ Master advanced file upload techniques in Next.js. ⚈ Understand how to work with lightweight server frameworks like Hono.js. ☕ Support My Work: Hi there! 👋 If you find this tutorial helpful, consider supporting me by buying me a coffee ☕. Your support helps keep these tutorials coming and fuels my passion for teaching! 👉 Buy Me a Coffee: https://buymeacoffee.com/devfaiz 🔗 Useful Links: ☕ Support Me: https://buymeacoffee.com/devfaiz 🌐 GitHub Repository: https://github.com/devmdfaiz/cloud-clove Thank you for your support—it truly means a lot! 🙏😊 Chapters 00:00:00 Intro 00:12:58 Project Setup 00:17:27 Authentication Setup 01:45:38 MongoDB Setup 01:59:26 Create Subscription for user 02:16:28 Creating Landing Page 02:25:58 Implement Sidebar 03:09:58 Create Upload Button 04:03:17 Handle File Upload 04:33:19 Hono Setup 05:06:12 Create get File hono route 05:21:11 Load Files on Dashboard 07:12:16 Implement Shared File logic 07:19:19 Implement Search bar 08:10:37 Implementing infinite scroll 08:42:52 Fix Rename Error 08:49:56 Fix Delete Error 08:55:41 Fix Upload Error 09:05:52 Create Subscription Part 09:23:55 Integrate Paddle Payment gateway 10:20:46 Paddle Bad Request Error 10:29:24 Webhook Setup 11:07:31 Create Production Build 11:13:14 Deploy on Vercel

Comment