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/dailycoding...

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