Instagram Clone FLutter

Instagram-style app built with Flutter & Node.js, powered by Supabase Postgres, featuring posts, stories, reels & profiles for web and mobile

Comment

Inspiration

We wanted to recreate the familiar Instagram experience but with a modern stack—Flutter for cross-platform UI, Node.js backend, and Supabase PostgreSQL for a scalable, serverless database. The goal was to allow seamless use across web and mobile with a unified codebase.

What it does

Our Instagram Clone allows users to:

  • Sign up and log in via email
  • Create posts (permanent) and stories (auto-delete after 24 hours)
  • View a feed of other users' posts and stories
  • Search for users by username
  • Watch reels randomly fetched from the database
  • View profiles, profile pictures, and post counts
  • Upload and display media in a grid layout

How we built it

  • Frontend: Flutter & Dart for shared UI between Android and Web.
  • Backend: Node.js with Express.js to handle API requests.
  • Database: Supabase PostgreSQL to store user, post, story, and reel data.
  • Media Uploads: Handled via Express routes with file upload middleware.
  • Kiro: Used as an AI-assisted coding companion to speed up development. Kiro helped in generating boilerplate code, structuring Flutter widgets, designing API endpoints, and setting up the Supabase DB schema efficiently.

Challenges we ran into

  • Handling media uploads in a serverless environment like Vercel.
  • Ensuring smooth performance and consistent UI across both web and Android.
  • Structuring the backend for scalability with Supabase’s serverless Postgres.
  • Synchronizing story deletion logic exactly at the 24-hour mark.

Accomplishments that we're proud of

  • Built a fully functional Instagram-like experience in a short time frame.
  • Single Flutter codebase for both web and Android deployment.
  • Successfully integrated Supabase PostgreSQL with Express and Flutter.
  • Leveraged Kiro for rapid prototyping and code generation.

What we learned

  • How to use Supabase DB with Node.js in a serverless context.
  • Best practices for Flutter UI organization and reusable components.
  • Strategies for integrating AI tools like Kiro into the development workflow.
  • The nuances of designing schema for social media-like platforms.

What's next for Instagram Clone Flutter

  • Add follow/follower system.
  • Implement likes, comments, and notifications.
  • Support for video uploads in posts and stories.
  • Advanced search and explore algorithms.
  • Better media hosting with CDN integration.

Built With

Share this project:

Updates