Build an Instagram Clone with Next.js 14, Server Actions, Prisma, PlanetScale, MySQL and NextAuth

Timestamps:
00:00 - Intro
00:20:00 - Introduction to Instagram project setup, TypeScript, Tailwind CSS, and Server Actions.
00:45:00 - Installation and configuration of ShadCN UI library for light and dark mode styles.
01:15:00 - Creating nav links array, mapping, and converting from server to client component.
01:35:00 - Creating a dropdown menu component with client-side button trigger.
01:50:00 - Fixing dropdown menu issues using the useEffect hook and handling events.
03:15:00 - Finding/updating user's username with Prisma ORM.
04:40:00 - Form design with React Hook Form, Zod, and Sonner.
05:15:00 - Form field events, submit handling, and custom error messages.
05:55:00 - Using server actions to create a post with validation and authentication.
06:30:00 - Dynamic rendering, fetching data with Prisma, and ordering results.
07:05:00 - Prisma: retrieve and delete a post, handle errors, revalidate dashboard.
07:20:00 - Reusable like, share, bookmark buttons as components.
07:45:00 - Liking a post server action, handle optimistic updates.
08:05:00 - Comment section, custom type, server action, useTransition hook.
08:25:00 - Add comment, server actions, optimistic update, start transition hook.
08:45:00 - Logout, login, test functionality, discuss intercepting routes.
09:05:00 - Implement server component (PostView) fetching single post with Prisma.
09:10:00 - Use include in Prisma, order data, intercept routes.
09:15:00 - Introduce skeleton components for loading animations.
09:45:00 - Implement delete comment action with Server Actions, Prisma, NextAuth.
10:10:00 - Add post actions for user interaction, ensuring visibility on various screen sizes.
10:15:00 - Create loading spinner for enhanced user experience, utilize suspense boundaries.
10:25:00 - Design responsive user profiles, hover card functionality, post editing, and deletion.
10:30:00 - Discuss individual post design, scroll areas, post actions, and time tags.
10:50:00 - Build grid view for displaying posts, implement hover effects, and address timestamp issues.
10:55:00 - Demonstrate loading animation for suspenseful content display, emphasizing user experience
11:05:00 - Not found page creation, edit post using Server Actions and Prisma.
11:15:00 - Testing edit functionality, post update, and future app enhancements.
11:25:00 - Dynamic profile pages, metadata generation, and fetch profile function.
11:35:00 - Follow functionality with Prisma, follows model, and double includes.
11:45:00 - Schema updates importance in an Instagram clone application.
12:05:00 - Update profile page creation with form and image upload functionality.
12:15:00 - Server-side authentication and validation for user profile updates.
12:25:00 - Follow button creation and implementation with Server Actions.
12:50:00 - Dynamic loading screen for username, conditional styling, and saved posts display.
13:10:00 - Implementation of following/unfollowing users, follower, and following pages.
13:30:00 - Building an edit profile page with React Hook Form, server components, and Prisma.
13:55:00 - Deployment of the Instagram clone using Vercel CLI.
14:00:00 - Generate Prisma types, deploy on Vercel, configure Google authentication.

Useful links:

Social links:

[nsanguphiri]

welcome back, really missed your builds

[victorross]

What a great tutorial, i hope we can see more of your videos. Thank you for the support!

[lightyagami]

Will definitely try to do this. Thanks for making it

[regularyt-pzki]

Huge fan from your apple build glad you are back bro

[uditnagar]

Thank You Sir....for providing this level of content for free....I really curse Youtube authorities for paying the educational creators least amount and for paying meme creators this much amount of money

[kk]

Really appreciate your effort for creating this kind of tutorial<3

[epictube]

missed your videos a lot! Keep posting

[Nothing-cxjt]

Such a pixel perfect project! Your channel deserve to be a top notch. Would love to see reels, notification, message starting with the same code base! Thanks a lot brother!!! <3

[kunalyadav]

Goldmine of knowledge, your dedication 🚀

[SaeedM.Parast]

Up to date and amazing, thank you bro.

[ujwalrathor]

Best ever insta clone in utube❤ lots of love brother

[DanielReyes-lgvo]

Thank you very much, amazing like always 😎

[sumreenali]

good video, a suggestion create a part 2 as well and add message and reel feature as well along with real-time notification

[DanielReyes-lgvo]

If you want to remove the automatic import of React you can uncheck the option "import react on top" in the extension settings of ES7+ React/Redux/React-Native snippets

[irfansaeedkhan]

it is amazing and futuristic, i can learn latest nextjs 14 on the go, kindly if you had time you can make part 2 which have mentions and hashtags and option to add video or multiple images on post, but still its awesome

[sire_ns]

Cool build! Looks like a lot of hardwork was put into it. One suggestion though, the video is too long so timestamps will be highly appreciated.

[ImpendingSole]

Can’t wait to follow it. Btw, which macbook are you using ?

[vinayakhegde]

Amazing content bro would also suggest you build backend with goland as I don't see much tutorial on golang as backend project

[cubedev]

For next video u should teach us to extends more features for the application instead of just build random application.

[tonyvito]

Great tutorial thanks can you please make a tutorial on TypeScript and industry standards