Build and Deploy a Full Stack Google Drive Clone with Next.js 15

Build a Professional and Production-ready Storage Management Platform inspired by giants like Google Drive, Dropbox, and OneDrive, used by billions of users.

📚 Materials/References:

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

[khray]

Making these projects is hard but imagine making them and then uploading it to everyone for free. My god adrian you're a living legend. As soon as I will be able to afford it I'm investing into your courses fr

[dagogouranta]

This guy's projects man, just when you think you think you've seen something crazy, he brings out another one that trumps the previous one. I'm glad I'm a subscriber man😅

[motlalepulasello]

Been needing to clear up my phone space. This is a good thing to build and handle by myself without worrying about privacy and third party inconveniences.

Thanks Adrian for another awesome one!

[hooooman.]

Hey Adrian, please do a Nextjs 14 complete SEO tutorial, including all the steps such as best practices, robots/sitemap files, and everything the latest nextjs has to offer.

[kirunali]

You're approaching 1 million 🎉🎉🎉🎉 You are a real perfect teacher keep it up man!

[superhumandose]

My God Adrian, how do you work so hard? Your work ethic is insane. Right now, am hard at work on the Next.js 15 Ultimate course and boom! you drop another great tutorial. You are a blessing my guy, keep it up.

[KrishnaList]

Hey Adrian I watched your all videos regularly again and again I have learned a lot from your channel. I loved your next js course. You are the best Adrian.

[amirdbt]

What a legend!!!, Respect to you sir all the way from Nigeria.

[The-Giggle_Factory-uc]

00:04 Learn to build a scalable storage management solution with Next.js 15.
02:17 Navigate and manage files effectively in a Google Drive clone.
06:42 Prepare for hands-on coding by setting up the Next.js application.
08:59 Updated favicon and typography in a Next.js project.
13:39 Set up ESLint and Tailwind CSS for consistent design and coding standards.
15:48 Extend Tailwind CSS theme with custom colors for a Google Drive clone.
20:07 Creating reusable heading styles for better application design.
22:10 Architecting authentication screens for a Google Drive clone using Next.js.
26:29 Creating a visually appealing layout for the Google Drive clone.
28:29 Enhancing UI elements with high-resolution assets for better visuals.
33:08 Creating a reusable sign-in and sign-up form in Next.js.
35:15 Implementing reusable forms in a Next.js app using Shaten library.
39:17 Setting up a responsive form using React Hook Form.
41:14 Creating a responsive signup form with dynamic fields in Next.js.
45:36 Implement error handling and user account toggling in a Next.js app.
47:45 Implementing a dynamic form schema for functional user input.
51:49 Create and manage unlimited projects without interruption.
53:39 Set up database collections for users and files.
57:42 Setting up storage and integrating with Next.js for file management.
59:51 Simplifying environment variable management using a configuration file.
1:04:41 Setting up session and admin clients for user data management.
1:07:02 Creating Admin Client Functions for User Management.
1:11:26 Fetching user documents and managing account sessions for email verification.
1:13:48 Implement error handling and user verification in email OTP process.
1:18:12 Implement account creation and error handling for sign-up functionality.
1:20:22 Integrate OTP model for user verification in sign-up process.
1:24:27 Managing form state and submission for OTP verification.
1:26:27 Implementing OTP Authentication UI in the Google Drive Clone.
1:30:47 Creating a responsive alert dialog with loading functionality.
1:33:09 Styling the OTP form and implementing submission functionality.
1:38:01 Implement email OTP functionality in user account creation.
1:40:04 Setting up user session and homepage layout in the app.
1:44:11 Implementing the header component for the Google Drive clone.
1:46:23 Implementing sidebar component layout for better UI structure.
1:50:45 Create sidebar navigation with dynamic linking in a Next.js app.
1:52:50 Implement dynamic rendering of links with styling in Next.js.
1:57:31 Configure HTTPS for image loading and fetch user session details.
1:59:46 Implement a function to fetch the current user in Next.js.
2:04:17 Create and manage user sessions in the Google Drive clone.
2:06:27 Implementing user avatar and mobile navigation in the Google Drive clone.
2:10:59 Implement user avatar and details in the navigation component.
2:13:24 Creating a mobile navigation bar with styled components.
2:17:37 Integrating AI to enhance OTP login and user log-out procedures.
2:19:49 Implement user sign-out functionality in the application.
2:24:19 Handle user sign-in with email and OTP in a function.
2:26:37 Implement authentication and file uploading in a Google Drive clone.
2:31:11 Implement state management for file uploads in Next.js.
2:33:46 Implementing a utility function to determine file types and extensions.
2:38:14 Implementing image display logic in a Next.js component
2:40:34 Implementing image upload features with thumbnails and loaders.
2:44:55 Implementing file upload functionality in a Google Drive clone.
2:47:12 Understanding TypeScript interface management in a Next.js application.
2:51:40 Storing file metadata and handling file uploads in the Google Drive clone.
2:53:57 Implementing file deletion and upload functionality in the Google Drive clone.
2:58:32 Implementing file upload functionality with Next.js and handling errors.
3:00:44 Implement upload functionality with error handling in the Google Drive clone.
3:04:55 Passing user and account IDs for file upload functionality.
3:07:04 File upload functionality is complete with new file details stored in the database.
3:11:23 Implementing dynamic routing for a Google Drive clone in Next.js.
3:13:36 Develop dynamic file structures with sorting features in Next.js.
3:18:30 Implementing file access queries for user-specific file retrieval.
3:20:43 Fix query errors for fetching user-uploaded files in the app.
3:24:52 Creating clickable file cards with dynamic thumbnails in Next.js.
3:26:52 Creating a file card component with size and details display.
3:31:28 Implementing file access and action dropdown in a Google Drive clone.
3:33:33 Install components and implement state management for dialog and dropdown.
3:38:26 Implement action handling for file operations in a Google Drive clone.
3:40:43 Implement conditional rendering for download links and modals.
3:45:10 Implementing rename function using React state management.
3:47:25 Implementing loading states and button functionalities in a modal.
3:52:15 Implementing actions like rename, share, and delete in a Google Drive clone.
3:54:43 Renaming files and implementing view details functionality.
3:59:28 Creating a detailed file information display in a Google Drive clone.
4:01:55 Implementing share functionality for file sharing in the application.
4:06:38 Implementing image thumbnail sharing features in a Google Drive clone.
4:09:14 Implementing user sharing feature for files in the Google Drive clone.
4:13:54 Implementing file sharing and removal functionality in a Google Drive clone.
4:16:18 User sharing and file management functionalities are explained.
4:20:49 Implement file deletion from the storage bucket.
4:23:06 Downloading various media assets for the storage application.
4:27:13 Implementing type filtering for file retrieval in Next.js.
4:29:36 Implementing search functionality with dynamic filtering and sorting.
4:34:17 Implementing sorting functionality for file queries in a Google Drive clone.
4:36:32 Fixed sorting errors and started implementing global search functionality.
4:41:03 Handling search queries with hooks in Next.js client components.
4:43:33 Implementing search results for file retrieval in UI.
4:48:37 Implementing click handler for navigating to specific file types.
4:50:58 Implementing search results optimization through debouncing in a Next.js application.
4:55:29 Implementing debounced global search and sort functionality.
4:57:38 Implement sorting functionality for theme selection in Next.js component.
5:02:02 Sorting feature implementation reuses a single sort component efficiently.
5:04:11 Build and optimize a dashboard for the Google Drive clone project.
5:08:03 Combine lesson insights for building a Google Drive clone using Next.js.
5:10:07 Implementing dynamic server behavior for cookie usage in Next.js.
5:14:32 Learning to debug server-side errors in a full stack application.
5:16:33 Handling user authentication and error management in the app.
Crafted by Merlin AI.

[umehiamkosmic]

Wow!!!

I'm new to NextJs and I am absolutely blown away, thank you Adrian 🙏

[AARP]

Best frontend development channel with great projects ❤ love from India

[geek_]

Congratulations on 1 million subscribers, Adrian! I started learning web development during the lockdown and have great memories from that time. It's nice to come across your videos again.

[IagoCech]

This is the best. Adrian keeps cooking that his students get full with Projects. Thanks so much, from your biggest fan and i would recommend you get his NextJS 15 course, it's loaded...

[humanity]

I'm a huge fan of your channel and eagerly wait for each new project video! It's been two weeks now, and I can’t wait to see your latest Next.js project uploaded. Every time I think I’ve seen it all, you come out with something even more impressive. I'm so glad to be a subscriber! 😅

[andydataguy]

This is literally what I need right now. Guess it's time to learn nextJS! Thank you 🙌🏾💜

[_elusivex_]

Adrian brother! how's life going? remember me? I've come here after a long, just saw the notification and to my surprise, google drive clone. I've been trying to find one form few months and finally here we go. Idk how you provide with all this when i just think about it. thanks for all these tutorials for free.
i visit your channel often to see your community grow, hope you gain even more. I've also changed a lot, in my interests and abilities.
I read your JSM emails often and i like them. Keep going!!

[Nehemiah_one]

Hi Adrian
I just want to say a big thank you for the amazing projects you've created so far
I have learned allot from you, and with that I was able to land a job as a developer
I am currently building A fintech Mobile app with React Native, which are part of the skills I acquired from you ❤❤❤❤

[yanivwin]

For your next project, consider "login as guest" option that allows users to explore features without requiring immediate login

[RikasMohomed]

Excited to start building this Google Drive clone!
Thanks for the tutorial, gonna dive in right away 🚀

[samali-by]

Hey Adrain your method of teaching is so simple and clear. By the way, your voice is so unqiue. 😇