Build and Deploy a Full Stack Google Drive Clone with Next.js 15
JavaScript Mastery
1,561,636 views
Build a Professional and Production-ready Storage Management Platform inspired by giants like Google Drive, Dropbox, and OneDrive, used by billions of users.
⭐ Join JS Mastery Pro: https://jsm.dev/gdrive-jsmpro
💎 Become a Top 1% Next.js Developer: https://jsm.dev/gdrive-nextjs
📁 Free Video Kit (Code, Design, Repo, Guide): https://jsm.dev/gdrive-kit
Appwrite: https://jsm.dev/gdrive-appwrite
WebStorm: https://jsm.dev/gdrive-webstorm
Rate us on TrustPilot: https://jsm.dev/trustpilot
Discord: discord Twitter: jsmasterypro Instagram: javascriptmastery LinkedIn: javascriptmastery
Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 — Intro
00:03:55 — Setup & Metadata
00:10:50 — ESLint & Prettier
00:14:52 — Design System, Theming & Tailwind Config
00:22:22 — Auth Layout
00:33:46 — Reusable AuthForm
00:51:03 — Setup Appwrite & Create Account
01:20:26 — OTP Modal
01:41:35 — Layout, Nav, Sidebar
02:07:39 — Mobile Navigation
02:17:08 — Finalize Auth
02:27:31 — Upload Files
03:10:56 — Dynamic File Routes
03:25:08 — File Card
03:32:49 — Actions Dropdown
03:50:01 — Rename File
03:55:49 — File Details
04:02:41 — Share File
04:18:17 — Delete File
04:26:48 — Filter Files & Global Search
04:57:00 — Sorting
05:03:03 — Dashboard Page
05:09:05 — Deployment
20 Comments
Thanks Adrian for another awesome one!
Build and Deploy a Full Stack Google Drive Clone with Next.js 15
JavaScript Mastery
1,561,636 views
Build a Professional and Production-ready Storage Management Platform inspired by giants like Google Drive, Dropbox, and OneDrive, used by billions of users.
⭐ Join JS Mastery Pro: https://jsm.dev/gdrive-jsmpro
💎 Become a Top 1% Next.js Developer: https://jsm.dev/gdrive-nextjs
📁 Free Video Kit (Code, Design, Repo, Guide): https://jsm.dev/gdrive-kit
Appwrite: https://jsm.dev/gdrive-appwrite
WebStorm: https://jsm.dev/gdrive-webstorm
Rate us on TrustPilot: https://jsm.dev/trustpilot
Discord: discord Twitter: jsmasterypro Instagram: javascriptmastery LinkedIn: javascriptmastery
Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 — Intro
00:03:55 — Setup & Metadata
00:10:50 — ESLint & Prettier
00:14:52 — Design System, Theming & Tailwind Config
00:22:22 — Auth Layout
00:33:46 — Reusable AuthForm
00:51:03 — Setup Appwrite & Create Account
01:20:26 — OTP Modal
01:41:35 — Layout, Nav, Sidebar
02:07:39 — Mobile Navigation
02:17:08 — Finalize Auth
02:27:31 — Upload Files
03:10:56 — Dynamic File Routes
03:25:08 — File Card
03:32:49 — Actions Dropdown
03:50:01 — Rename File
03:55:49 — File Details
04:02:41 — Share File
04:18:17 — Delete File
04:26:48 — Filter Files & Global Search
04:57:00 — Sorting
05:03:03 — Dashboard Page
05:09:05 — Deployment
• Check the video description and click the "VideoKit" link.
• Everything you need is there, and it's 100% FREE.
Explore my Pro Content:
⭐ Join JS Mastery Pro: https://jsmastery.com
💎 Become a Top 1% Next.js Developer: https://jsmastery.com/course/the-ultimate-next-js-15-course
💎 Master Next.js Testing: https://jsmastery.com/course/the-complete-next-js-testing-course
📗 GSAP Pro Course (includes GTAVI Website): https://jsmastery.com/course/gsap-animations-course
📕 Three.js 3D Pro Course: https://jsmastery.com/course/vanilla-three-js-course
📙 JavaScript Pro Course: https://jsmastery.com/course/complete-path-to-javascript-mastery
🚀 Launch Your SaaS Pro Course: https://jsmastery.com/course/build-launch-your-saas-in-under-7-days
💬 I switched to Webstorm, what about you? → https://jb.gg/GetWebStormFree
Many Pro Courses launching soon! Join the waitlists to get notified! 🔥🔥
👉 React Native Pro Course Waitlist: https://jsmastery.com/waitlist/react-native-course
👉 Backend Pro Course Waitlist: https://jsmastery.com/waitlist/ultimate-backend-course
👉 React.js Pro Course Waitlist: https://jsmastery.com/waitlist/react-course
👉 Tailwind Pro Course Waitlist: https://jsmastery.com/waitlist/tailwindcss-course
👉 AI Development Pro Course Waitlist: https://jsmastery.com/waitlist/ai-course