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

🔥 Save Big this Cyber Week with Hostinger using code SONNY here 👉 www.hostinger.com/sonny
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
🔴 LOOKING FOR THE CODE? 🛠️
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 👉 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

Пікірлер: 84

  • @MegaDonaldification
    @MegaDonaldification6 ай бұрын

    When legend like Sonny is on, your job is to pay close attention. He is literally helping you support your dream by explaining and coding at the same time. This is rare.

  • @nemeziz_prime
    @nemeziz_prime6 ай бұрын

    When Next.js 14 dropped, Sonny was the first channel that came to mind for an amazing new tutorial

  • @SonnySangha

    @SonnySangha

    6 ай бұрын

    Thank you I appreciate you!

  • 6 ай бұрын

    I have good memories in this channel. Last year I followed the live actions and learnt React a little. And as a data scientist I can build my own services now. Although Django and Flask are fine, this is just another level of awesomeness. Thank you. When you build it for the first time it feels dumb and you are just repeating and copying. After 3-4 builds you slowly start understanding. So beginners shouldnt frustrate and give up.

  • @rohanwandre2389

    @rohanwandre2389

    6 ай бұрын

    So true! Even I learnt the same way

  • @aboronilov
    @aboronilov5 ай бұрын

    Sonny you are on of the best teachers on KZread. Believe me I've been a professor for 5 years. You do have a talent to teach

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Thank you so much! This means a lot!! #PAPAFAM 💯🙏🏽

  • @kolyaharutyunyan3035
    @kolyaharutyunyan30355 ай бұрын

    Thank you Sonny for an amazing video! To avoid "@ts-ignore" we can do the following: import { type DefaultExtensionType, FileIcon, defaultStyles } from "react-file-icon";

  • @rennan9891
    @rennan98916 ай бұрын

    This guy helped me got my brand new first job, and i'm always looking forward to see his stuff, i'm going to my third week in the job and still using everything he taught us, thx a lot

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    This is an AWESOME Comment thank you i'm so glad I could help you land your job!

  • @DigitalAlchemyst
    @DigitalAlchemyst6 ай бұрын

    If you opted to use the component from Next instead of the tag this will cause an error with hot reload down the road when you go to test in dropping a new file at about 2:07:00 for the instant file loading, you will either need to swap back to or find a work around.

  • @garikmelqonyan6011
    @garikmelqonyan60115 ай бұрын

    I could never imagine your tutorials could be this good man. Thank you

  • @DigitalAlchemyst
    @DigitalAlchemyst6 ай бұрын

    If you are using /src folder in your projects, the middleware.ts file needs to go in the /src folder not the root If it is in the wrong place you will see the following error in your terminal ○ Compiling /_error ... ✓ Compiled /_error in 654ms (921 modules) and the dashboard will show up just fine.

  • @DigitalAlchemyst

    @DigitalAlchemyst

    6 ай бұрын

    sidenote this also caused an issue with tailwind.

  • @jamestuttle

    @jamestuttle

    5 ай бұрын

    What I did too as per the Docs, then found this... Confirmed on my end too!

  • @DigitalAlchemyst

    @DigitalAlchemyst

    5 ай бұрын

    @@jamestuttle Yeah i did see that in the docs later on after making this comment.

  • @AbdulxoliqOdiljonov
    @AbdulxoliqOdiljonov5 ай бұрын

    Thank you so much Sonny !! You are best teacher !!!

  • @wowpixels_dev
    @wowpixels_dev4 ай бұрын

    Such a great project to follow, thanks!

  • @silva8215
    @silva82156 ай бұрын

    Thanks Sonny that was awesome!

  • @user-ur2xe1br4g
    @user-ur2xe1br4g5 ай бұрын

    Loved your video bro learned a few new things :) found it (this vid) looking for a shawncn tuto. You got a new sub.

  • @muhammaduseram9405
    @muhammaduseram940519 күн бұрын

    Yoo sunny you are inspirations💕

  • @youssefmahmoud6268
    @youssefmahmoud62686 ай бұрын

    From the best best best on KZread, thanks.

  • @kulvirsingh4568
    @kulvirsingh45686 ай бұрын

    Awesome Sonny 🎉🎉

  • @crim-son
    @crim-son6 ай бұрын

    is there a way to use Firebase only on the server and still get to use storage and have Realtime updates on the client, or must firebase always completely be on the client? I see Sonny didn't add firebase keys to the env file, is that wrong or is it completely fine?

  • @ioannhide3355
    @ioannhide33556 ай бұрын

    This guy are amazing programmer 🎉

  • @RABWA333
    @RABWA3335 ай бұрын

    Great job , watching from Libya

  • @siddharthpadwal9649
    @siddharthpadwal96496 ай бұрын

    Hey sonny i really like your videos, i know it’s irrelevant at the time but can you make a short series or clones working with vue js / nuxt js too. It would be a great help!

  • @chiedozieezidiegwu1592
    @chiedozieezidiegwu15926 ай бұрын

    Nice one bro, Weldone... 👍

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Thank you so much 😀

  • @jamestuttle
    @jamestuttle5 ай бұрын

    @Sonny, you mentioned at 1:21 in video about your going to do. Firebase videos - any ETAs? I am very interested in it, also on their messaging/nootificaitons services too..?

  • @mrsingh5351
    @mrsingh53516 ай бұрын

    Dope 🔥

  • @billwhite515
    @billwhite5155 ай бұрын

    I know react/nextjs are your forte but have you ever thought of having a build using angular, vue or svelte kit?

  • @chinmaysawant1343
    @chinmaysawant13436 ай бұрын

    I was trying to move the firebaseConfiguration to env file. But it is giving bucketNotFound error. I tried to debug and found out that projectId and storageBucket are the culprits. If they are passed directly, it's working as expected. How to fix this? Also the rename and delete modal are lagging in performance. how to optimize it?

  • @chessrecap5462
    @chessrecap54623 ай бұрын

    hello sonny can i build nextjs app showing pdf page but not allowed the viewer to downlaods it using react-pdf pdfjs and i store the file in the any database.

  • @crim-son
    @crim-son6 ай бұрын

    Please what is the point of the file reader at 1:16:20? why do we not just call upload file directly with the file?

  • @GavHTFC
    @GavHTFC6 ай бұрын

    36:34 bro was hurt by the very suggestion!

  • @iashutosh0520
    @iashutosh05202 ай бұрын

    I m facing problem when i add on clerk .. please help me out and how I can I reach out you to show error

  • @moreshwardalavi
    @moreshwardalavi5 ай бұрын

    Hi Sonny, If we added the following line, publicRoutes: ["/"]; then to redirect to a route `/dashbaord` but it's not working as excepted. in the terminal getting following message: INFO: Clerk: The request to /dashboard is being redirected because there is no signed-in user, and the path is not included in `ignoredRoutes` or `publicRoutes`. To prevent this behavior, choose one of: 1. To make the route accessible to both signed in and signed out users, add "/dashboard" to the `publicRoutes` array passed to authMiddleware 2. To prevent Clerk authentication from running at all, pass `ignoredRoutes: ["/((?!api|trpc))(_next.*|.+\.[\w]+$)", "/dashboard"]` to authMiddleware 3. Pass a custom `afterAuth` to authMiddleware, and replace Clerk's default behavior of redirecting unless a route is included in publicRoutes

  • @nooneknowsme1370
    @nooneknowsme13705 ай бұрын

    if the skeleton files (server loaded files) are available without any delay then why are calling files again in the client side and causing more delay? i didn't understand the logic behind it. was it just for the skeleton effect? or any other logic behind it?

  • @shubhamdhage96

    @shubhamdhage96

    Ай бұрын

    I believe to get files from server/firebase should alway be a network call. if not next.js will cache the page and we may not see latest updates. so this delay is acceptable.

  • @hassannasir1222
    @hassannasir12224 ай бұрын

    hi i hope you are well Plz tell me that dropbox paid version has token usage time option i.e i want token can not be expire so please guide me i am waiting for your reply.

  • @AuRoN344
    @AuRoN3446 ай бұрын

    2:07:13 How is that possible it refreshes de table after uploading another file? I really dont see the part of code where he rettriggers the call to get all the files again. After uploading a file the application should not rerender anything since it is not changing its state.

  • @SonnySangha

    @SonnySangha

    6 ай бұрын

    React Firebase hooks uses a realtime listener, this is why it’s always listening and updating due to changes in the database!

  • @AuRoN344

    @AuRoN344

    6 ай бұрын

    @@SonnySangha Didnt know that. Thank you very much for your fast answer and all the content you make :)

  • @crisreyes1630
    @crisreyes16306 ай бұрын

    When i drop and drag the file it doesn't push through firebase i did exactly the same you did maybe it was the import ?

  • @crisreyes1630

    @crisreyes1630

    6 ай бұрын

    NVM haha ijust forgot to pass the onDrop on DropzoneComponent thanks

  • @chinmaysawant1343
    @chinmaysawant13436 ай бұрын

    Totally agree with you about the live debugging. Keep it going!!

  • @SonnySangha

    @SonnySangha

    6 ай бұрын

    🙏🏽💯

  • @lokindradangi
    @lokindradangi5 ай бұрын

    Minimum Asset should be provided to start such a video url, images url, (images used) so that it will be easy.

  • @ardianhotii
    @ardianhotii6 ай бұрын

    In you next video when you have to use files and uploads can you use uploadthing , if more people agree with me I want you to use it pls, your videos are soo good keep going

  • @zlatkoiliev8927
    @zlatkoiliev89276 ай бұрын

    Can we use supabase next time please?

  • @JosesHamptona
    @JosesHamptona5 ай бұрын

    very good but it so cool

  • @agadaFrancisLouis
    @agadaFrancisLouis6 ай бұрын

    Sonny, I love the fact that you used Shadcn, Zustand and Clerk😍😍😍👏🏾. It’s like you read my mind. You’re the best, bro 🫶🏾

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Maybe I have a super power to read minds.... muhahahaha thanks for the support!!! #PAPAFAM all the way!

  • @agadaFrancisLouis

    @agadaFrancisLouis

    5 ай бұрын

    @@SonnySangha#PAPAFAM all the way!!!😄🔥❤️❤️❤️ One day when I make it, I’ll do well to hit you up and support whatever you’re doing. Not all superheroes wear capes. You’re my hero, bro🫶🏾

  • @chinmaysawant1343
    @chinmaysawant13436 ай бұрын

    Issues faced and their solution: 1)Error: Clerk: auth() was called but Clerk can't detect usage of authMiddleware() - I was using node version 18, updated to 20 and it got resolved

  • @gokulkandasamy4952

    @gokulkandasamy4952

    5 ай бұрын

    same error came for me,i updated to node version 20 but not working

  • @sayandutta2038
    @sayandutta20386 ай бұрын

    Did anyone get the same error: `Error: Clerk: auth() was called but Clerk can't detect usage of authMiddleware()`

  • @HarshvardhanGaikwad6969

    @HarshvardhanGaikwad6969

    5 ай бұрын

    Maybe you're using node version 18, update it to v20 and it will get resolved

  • @sayandutta2038

    @sayandutta2038

    5 ай бұрын

    @@HarshvardhanGaikwad6969 doesn't work, bruhhh

  • @yohansamuditha
    @yohansamuditha6 ай бұрын

    🔥🔥💖

  • @usmanmarkaz
    @usmanmarkaz6 ай бұрын

    Am waiting for some React native App Projects please make 3 to four apps like your long NEXT JS video please

  • @chasedemaster6888
    @chasedemaster68885 ай бұрын

    track id for 50:00 ?

  • @SupremeDriveTV
    @SupremeDriveTV5 ай бұрын

    clerk did not work for me do you have solution

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Need more info, nobody will be able to help with little info! :D

  • @SupremeDriveTV

    @SupremeDriveTV

    5 ай бұрын

    thanks but i was able to pull it off it had @@SonnySanghato do with the middleware not placed correctly.​

  • @kelechihilary1270
    @kelechihilary12705 ай бұрын

    Please does anyone have the constant.ts file ?

  • @RamlaRayonly1

    @RamlaRayonly1

    5 ай бұрын

    i created this one: export const COLOR_EXTENSION_MAP: { [key: string]: string } = { txt : "#C0C0C0", doc : "#0000FF", docx : "#00008B", pdf : "#FF0000", ppt : "#FFA500", pptx : "#FF8C00", xls : "#008000", xlsx : "#006400", jpg : "#00FFFF", png : "#008B8B", gif : "#FFFF00", mp3 : "#800080", mp4 : "#4B0082", zip : "#A52A2A", rar : "#8B4513", html : "#FFD700", css : "#FF4500", js : "#FF6347", json : "#2E8B57", xml : "#9932CC", svg : "#800000", php : "#8A2BE2", java : "#F08080", py : "#FF69B4", cpp : "#B22222", c : "#A0522D", md : "#4B0082", csv : "#2F4F4F", log : "#4682B4", exe : "#8B0000", dll : "#800000", bat : "#A52A2A", sh : "#808000", sql : "#008080", };

  • @RamlaRayonly1

    @RamlaRayonly1

    5 ай бұрын

    after implementing the skeleton Loader (2/2) i get an empty array when i consol log the skeletonFile , do you have any idea why?

  • @marcosviniciusmoreira9115
    @marcosviniciusmoreira91156 ай бұрын

    "I'm encountering an issue when declaring 'open' with 'isDeleteModalOpen'. I'm getting an error saying 'Type '(open: boolean) => void' is not assignable to type 'boolean | undefined.' Could you provide guidance on resolving this issue? It's happening around the 02:26:00 mark of the tutorial."

  • @amandacaroline488

    @amandacaroline488

    6 ай бұрын

    I have the same bug @sonny save us 😢

  • @codelucky
    @codelucky6 ай бұрын

    Background music was too loud and unnecessary.

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Feedback noted

  • @mabdurrafeyahmed9256
    @mabdurrafeyahmed92566 ай бұрын

    please add timeline of video. very hard to view video

  • @SonnySangha

    @SonnySangha

    6 ай бұрын

    Added!

  • @vittoriomorellini1939
    @vittoriomorellini19395 ай бұрын

    Good video. Why did you select clerk for auth and you do not select firebase as you already used firebase for storage?

  • @lawrencemacharia2182

    @lawrencemacharia2182

    5 ай бұрын

    To explore or use a new/different library. Yes, firebase can do the same, but it's always good to learn something new. To increase options when you will building. My opinion!

  • @vittoriomorellini1939
    @vittoriomorellini19395 ай бұрын

    Are you located in Dubai??