Tailwind Resources Logo Tailwind Resources
Trpc Insta screenshot

Trpc Insta

Author Avatar Theme by 99yash
Updated: 8 Apr 2025
18 Stars

Instagram using tRPC (with a NextJS backend) & React Server Components: Next Auth, Prisma & Shadcn UI.

Github Live Preview

Categories

Nextjs React Tanstack Prisma Cmdk Shadcn ui Fullstack

Overview:

This article discusses a clone of Instagram that has been created using Next.js, Tailwind CSS, and Server Components. The clone includes a variety of features such as user search, liking posts, editing profiles, and more. The theme also incorporates the uploadThing API and components from Shadcn-ui, along with added metadata tags.

Features:

  • Trinsta Carousel: Scroll through a carousel of images on the Trinsta clone.
  • Search by User or Username: Easily search for other users on the platform by their name or username.
  • Double Tap to Like a Post: Like a post by double-tapping on it, similar to the Instagram functionality.
  • Skeleton UI for Major Pages: Utilize a skeleton UI to provide a smooth loading experience for major pages.
  • Fallback UI for Loading User DP: Display a fallback UI while loading a user’s display picture.
  • Edit Profile: Allow users to edit their profile information, including their name, bio, profile picture, and more.
  • Post Loading and View States: Implement loading and view states for posts to enhance the user experience.
  • Custom Errors: Show custom error messages for various scenarios to provide better feedback to users.
  • Delete Post for the Author: Allow authors to delete their own posts for better content management.

Installation:

To install the Instagram clone theme, follow these steps:

  1. Clone the repository: git clone [repository-url]

  2. Navigate to the theme directory: cd [theme-directory]

  3. Install the dependencies: npm install

  4. Start the development server: npm run dev

  5. Open your browser and visit http://localhost:3000 to access the Instagram clone theme.

Summary:

The Instagram clone theme built using Next.js, Tailwind CSS, and Server Components offers a range of features that closely mirror the functionality of the popular social media platform. With its clean design, smooth transitions, and user-friendly interface, users can easily navigate the platform, search for other users, like posts, edit their profiles, and more. The incorporation of the uploadThing API and components from Shadcn-ui, along with added metadata tags, enhances the overall experience. Overall, this clone theme provides a great foundation for those looking to create their own Instagram-like application.