Code a Dropbox Clone with NextJS – Tutorial

Channel:

freeCodeCamp.org

Subscribers:

10,900,000

Published on May 7, 2025 3:12:21 PM ● Video Link: https://www.youtube.com/watch?v=IcOiX-jynfI

Duration: 0:00

29,136 views

1,119

Welcome to this hands-on course where you'll learn to build Droply, a Dropbox-inspired file storage service, using the latest tools and best practices in the NextJS ecosystem. Designed for beginners, this tutorial covers everything from secure authentication with Clerk and robust data management with Neon and Drizzle, to advanced features like OTP signup, ZOD validation, and seamless file uploads with Imagekit.

Course developed by ‪@HiteshCodeLab‬

💻 Code: https://github.com/hiteshchoudhary/droply

Udemy course link: https://hitesh.ai/udemy

⭐ ️ Contents ⭐ ️
⌨ ️ (0:00:00) Droply
⌨ ️ (0:11:25) Planning the project with drizzle and neon
⌨ ️ (1:11:27) Learn zod validation schema
⌨ ️ (1:27:48) Signup, clerk, OTP, zod and react hook form guide in NextJS
⌨ ️ (2:10:53) Complete signin process with clerk
⌨ ️ (2:25:45) Clerk middleware guide
⌨ ️ (2:40:05) Upload any file with Imagekit in NextJS
⌨ ️ (3:02:43) How dropbox handles folders in database
⌨ ️ (3:25:19) Fetching files from folders and sub folders
⌨ ️ (3:37:47) Custom API endpoint to upload on Imagekit
⌨ ️ (4:11:36) Mark file as star or deleted in database
⌨ ️ (4:25:49) Imagekit and HeroUI providers
⌨ ️ (4:44:06) Assignments for this course

❤ ️ Support for this channel comes from our friends at Scrimba – the coding platform that's rhttps://scrimba.com/freecodecamphttps://scrimba.com/freecodecamp

🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual

--

Learn to code fohttps://www.freecodecamp.org/ob: https://www.freecodecamp.org

Read hundrhttps://freecodecamp.org/newsg: https://freecodecamp.org/news