🔴 Let’s build Dropbox Clone with NEXT.JS 14! (React, Clerk, Shadcn, Firebase, Drag/Drop, CRUD, TS)

🔥 Save Big this Cyber Week with Hostinger using code SONNY here 👉 https://www.hostinger.com/sonny

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

🫂 Join my Community, "University of Code" for FREE: https://www.universityofcode.com

📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github

Join me as show you how to build a Dropbox clone from scratch with the newly released Next.js 14. You'll learn the following in this build:

👉 How to upload all File types to Firebase storage just like the real Dropbox!
👉 How to integrate full CRUD Functionality for the files
👉 Create a Beautiful UI & UX for our Dropbox clone using the highly Popular Shadcn!
👉 Learn how to use NextAuth Middleware to protect unauthorised access
👉 How to build a Login and Logout Authentication flow using Clerk Authentication!
👉 How to use Loaders whilst data is being fetched!
👉 Learn to implement a file sorter feature to sort all files based on various properties!
👉 Learn to implement a table view for all files with File Metadata display!
👉 How to leverage Global State Management with Zustand!
👉 How to build a beautiful UI design with Tailwind CSS!
👉 Learn how to download any uploaded file straight to your device!
👉 Learn how to implement the React DnD Library to Upload files via Drag and Drop!
👉 Learn how to implement Dark Mode toggling to update the UI based on user preference!
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!

🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter

🕐 TIMESTAMPS
00:00 Introduction
01:07 Build Showcase
04:45 Hostinger Sponsorship
07:51 Initialising the Build (1/2)
09:06 Build Tech
11:27 Implementing Node Version Manager
13:01 Initialising the Build (2/2)
16:55 VS Code Extensions
18:28 Building the Home Page (1/2)
19:47 Build Plan
21:13 Implementing Authentication Functionality with Clerk Authentication
26:30 Implementing Middleware
28:40 Creating the User Button Component
29:43 Building the Header Component
39:42 Implementing Shadcn/ui
45:35 Implementing Light & Dark Mode
51:03 Building the Home Page (2/2)
1:00:33 Building the Dashboard Page
1:03:21 Implementing Drag & Drop Functionality with React Dropzone
1:13:17 Implementing the File Upload Functionality (1/2)
1:20:07 Setting Up Firebase & Cloud Firestore
1:24:02 Implementing Firebase & Cloud Firestore
1:26:09 Implementing the File Upload Functionality (2/2)
1:37:01 Implementing Skeleton Loader (1/2)
1:38:59 Setting Up Type Definitions
1:39:26 Implementing Skeleton Loader (2/2)
1:42:33 Building a Table View for All Files
1:46:58 Building the Columns for the Table View
1:54:52 Building the Table Wrapper Component (1/2)
1:58:28 Implementing the Sort Functionality
2:03:46 Building the Table Wrapper Component (2/2)
2:08:40 Implementing Different Edge Cases
2:15:14 Setting Up Rename & Delete Modals
2:16:00 Implementing Zustand for State Management
2:23:33 Implementing File Delete Functionality
2:33:15 Implementing File Rename Functionality
2:38:21 Implementing Toast Notifications with React Hot Toast Library
2:44:37 Final Build Demo
2:47:26 Deploying to Vercel
2:50:13 Implementing a Custom Domain Name with Hostinger
2:54:56 Zero to Full Stack Hero
2:58:41 Final Deployed Build Demo
2:59:42 Outro

Let’s get it PAPAFAM 🔥.

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Dropbox and/or any of its subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.

#nextjs #nextjs14 #react #firebase #typescript #reactjs #dropbox #fileupload #coding #javascript #tailwindcss #tutorial #nosql #reactjstutorial #coding #tutorial #beginner #programming