Build a Full Stack 🔥 Dribbble ⚾︎ Clone in One Video Using Next.js
Hello, and welcome to the complete walkthrough of building a Dribbble Clone using Next.js and the latest cutting-edge technologies! In this full video, we will guide you step-by-step through creating a fully functional Dribbble-like platform, from front-end to back-end, incorporating modern tools to enhance performance and scalability.
In this project, we'll start by building the Upload Section, where users can upload creative shots, similar to Dribbble. This section includes components for handling text, images, videos, and galleries. We’ll cover everything from uploading media using Cloudinary to managing data with React Query.
Later in the video, we’ll focus on rendering the shots and making the platform interactive and engaging for users.
Finally, we’ll deploy our application to Vercel for a production-ready environment.
Tech Stack:
Next.js for a powerful full-stack framework
PostgreSQL as the database
Prisma ORM for database management
Clerk & NextAuth for user authentication
Neon as the database provider
React Query for server state management
Cloudinary for media handling
⏱️ Timestamps
00:00 Intro
0:30 Installation & Setup
37:40 FirstMedia In Upload Section
01:03:50 start working on text-component
01:50:26 Complete Text Component
02:09:10 SideBar Menu
02:54:36 Storing Data
03:50:50 Image Component
04:37:40 Video component
04:55:18 Gallery Component
06:23:25 Side Menu, Tags & Category
07:18:07 User Authentication and Media Upload
09:48:56 Making Navigation Menus
10:32:51 Render Shots using react Infinite Query
11:11:47 Searching
11:34:32 filter shots
11:54:06 Rendering Individual Shots
12:55:44 Following Author
13:36:08 Like Shot
13:56:43 Comment Section
14:42:35 Save Shot
16:18:50 Finalise Home Page
16:54:28 Profile Page
17:50:42 Deployment
✅ Source Code : https://github.com/Sattu2806/Gribbble
✅ Hire me Upwork : https://www.upwork.com/freelancers/~0...
#Nextjs #DribbbleClone #FullStackDevelopment #React #Cloudinary #Vercel