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

This podcast offers a detailed guide on creating "StorIt," a file storage management app using Next.js 15, TypeScript, Tailwind CSS, and AppWrite. It covers everything from building the front-end user interface to implementing secure passwordless OTP authentication. You'll learn how to manage file uploads, including features like renaming, previewing, downloading, deleting, and sharing. The tutorial also integrates AppWrite for backend functionalities, such as user management and file storage. Throughout the process, you'll discover modern tech stacks, best practices, and clean coding techniques, equipping you with valuable skills for a full-stack developer career.

Outlines

Sign in to continue reading, translating and more.

Open full episode in Podwise

JavaScript Mastery

Introduction to the StorIt Project

Setting up the Next.js Project and Development Environment

Implementing ESLint and Prettier for Code Quality

Implementing the Design System with Tailwind CSS

Designing the Authentication Flow with Next.js Route Groups

Implementing Authentication UI with ShadCN and Next Image

Building Reusable Auth Forms with ShadCN

Implementing OTP Authentication UI and Logic

Connecting the Frontend to AppWrite for User Authentication

Setting up AppWrite and Environment Variables

Implementing AppWrite Client and Server Actions

Building the Create Account Server Action

Creating and Implementing the OTP Modal Component

Implementing Server-Side OTP Verification and Logout

Building the Main Application Layout

Implementing the Sidebar Component

Implementing the Mobile Navigation Component

Implementing Logout Functionality and UI Refinements

Implementing File Upload with React Dropzone

Creating Server Actions for File Upload and Handling Errors

Integrating File Upload into the UI and Handling Large Files

Implementing Dynamic Routing for File Types

Fetching and Displaying Files Based on Type

Creating the File Card Component

Implementing the Actions Dropdown Component

Implementing the Rename File Functionality

Implementing File Details Modal

Implementing File Sharing Functionality

Implementing File Deletion Functionality

Adding More Files and Refining File Type Filtering

Implementing Global Search Functionality

Implementing the Sort Component and UI Refinements

Building the Dashboard and Conclusion

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

JavaScript Mastery

00:00Introduction to the StorIt Project

Introduction to the StorIt Project

03:44Setting up the Next.js Project and Development Environment

Setting up the Next.js Project and Development Environment

10:47Implementing ESLint and Prettier for Code Quality

Implementing ESLint and Prettier for Code Quality

14:30Implementing the Design System with Tailwind CSS

Implementing the Design System with Tailwind CSS

22:08Designing the Authentication Flow with Next.js Route Groups

Designing the Authentication Flow with Next.js Route Groups

29:54Implementing Authentication UI with ShadCN and Next Image

Implementing Authentication UI with ShadCN and Next Image

33:47Building Reusable Auth Forms with ShadCN

Building Reusable Auth Forms with ShadCN

40:34Implementing OTP Authentication UI and Logic

Implementing OTP Authentication UI and Logic

47:39Connecting the Frontend to AppWrite for User Authentication

Connecting the Frontend to AppWrite for User Authentication

58:32Setting up AppWrite and Environment Variables

Setting up AppWrite and Environment Variables

1:03:20Implementing AppWrite Client and Server Actions

Implementing AppWrite Client and Server Actions

1:14:10Building the Create Account Server Action

Building the Create Account Server Action

1:20:27Creating and Implementing the OTP Modal Component

Creating and Implementing the OTP Modal Component

1:33:39Implementing Server-Side OTP Verification and Logout

Implementing Server-Side OTP Verification and Logout

1:41:08Building the Main Application Layout

Building the Main Application Layout

1:46:53Implementing the Sidebar Component

Implementing the Sidebar Component

2:07:16Implementing the Mobile Navigation Component

Implementing the Mobile Navigation Component

2:16:45Implementing Logout Functionality and UI Refinements

Implementing Logout Functionality and UI Refinements

2:27:32Implementing File Upload with React Dropzone

Implementing File Upload with React Dropzone

2:45:15Creating Server Actions for File Upload and Handling Errors

Creating Server Actions for File Upload and Handling Errors

2:54:54Integrating File Upload into the UI and Handling Large Files

Integrating File Upload into the UI and Handling Large Files

3:10:57Implementing Dynamic Routing for File Types

Implementing Dynamic Routing for File Types

3:16:06Fetching and Displaying Files Based on Type

Fetching and Displaying Files Based on Type

3:24:57Creating the File Card Component

Creating the File Card Component

3:32:49Implementing the Actions Dropdown Component

Implementing the Actions Dropdown Component

3:42:18Implementing the Rename File Functionality

Implementing the Rename File Functionality

3:55:49Implementing File Details Modal

Implementing File Details Modal

4:02:24Implementing File Sharing Functionality

Implementing File Sharing Functionality

4:18:09Implementing File Deletion Functionality

Implementing File Deletion Functionality

4:22:49Adding More Files and Refining File Type Filtering

Adding More Files and Refining File Type Filtering

4:30:02Implementing Global Search Functionality

Implementing Global Search Functionality

4:56:43Implementing the Sort Component and UI Refinements

Implementing the Sort Component and UI Refinements

5:02:59Building the Dashboard and Conclusion

Building the Dashboard and Conclusion