Skip to content

ssatriya/next-ig-clone

Repository files navigation

Instagram Clone App 🚀

Welcome to the Instagram Clone App repository! This project aims to replicate the core functionalities of Instagram, providing users with a platform to share their thoughts through pictures, follow others, and engage in meaningful conversations with comments.

This project is using Drizzle ORM and Neon PostgreSQL. Some feature from that version of project implemented in this one yet, but will gradually add.

Features 🌟

  • Authentication: Currently user can authenticate only using Gmail with Lucia Auth, my fav auth lib.
  • Posting: Post your image with or without caption, user can upload multiple image at one and form carousel. Currently only support image and not video. I use uploadthing service to make it easy and fast to implement, will try to use AWS S3 in the future.
  • Follow and Unfollow: You can follow and un-follow other user, you only able to see followed user post in you feed.
  • Like and Comment: You can like and comment to post you see in your feed. Sub-comment and mention not implemented yet.

Tech Stack 🛠️

  • Frontend: React with Nextjs, Zustand for state management, Shadcn UI for styling with Tailwind CSS.
  • Backend: Next.js for all the process that require to display data in the frontend.
  • Database: PostgreSQL for database storage, via Neon service.
  • Real-Time Updates: Using Tanstack Query package to give a real-time user experience.

TODO 📝

  • Implement responsive design.
  • Implement profile edit.
  • Implement mention and sub comment.
  • Implement github and email sign-up for authentication.

Known Bug 🐞

✅ Cropper doesn't work with Swiperjs ❌ Post modal width too wide portrait image ❌ Previous post modal content/comment flicker when opening other post modal ❌ Same user info (probably username) sign up will crash the login functionlity ❌ Post modal console error

Getting Started 🚀

  1. Clone the repository:

    git clone https://github.com/ssatriya/next-ig-clone
    
  2. Open the project:

    cd x
    npm install
  3. Create the .env file

  4. Start the project

    npm run dev

About

Instagram clone build with react with Nextjs

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages