In this tutorial, we are going to build an Instagram clone using Next.js 15, Tailwind CSS, React, and the Pinata API for file uploads. This project is perfect for those looking to create a feature-rich social media application that includes image sharing, user authentication, and real-time interactions. We will cover setting up the Next.js environment, creating a responsive UI with Tailwind CSS, integrating with the Pinata API to handle image uploads, and implementing user profiles and feeds. By the end of this tutorial, you’ll have a solid understanding of full-stack development with Next.js, and the tools to create your own social media platform!
Source code: https://github.com/dejwid/instagram-clone
Pinata: https://rebrand.ly/PinataDawid
Timestamps:
00:00:00 - Intro
00:12:43 - Authentication
00:28:53 - Profile page
01:07:15 - Settings page
02:00:48 - File upload (avatars)
02:27:47 - Mobile navigation
02:42:44 - Mobile navigation extras
03:07:44 - Desktop navigation
03:26:57 - Create post page
03:52:10 - Single post page + comments
04:48:33 - Likes/hearts
05:12:50 - Single post modal
06:08:24 - Search page
06:41:44 - User page
07:17:14 - Home page
08:04:29 - Browse page
08:14:04 - Preloaders, bugs, extras
08:35:25 - Bookmark button
09:01:30 - Dark mode