🔴 React.js Clones by PAPA React - 🔴 Let’s build a Cloud File Storage App with NEXT.JS 14! (React, Clerk, Firebase, Drag/Drop, 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 🔴 LOOKING FOR THE CODE? 🛠️ https://links.papareact.com/github Join me as show you how to build it 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