ShotGram
ShotGram is a full-featured social media platform that replicates core Instagram functionality — user profiles, posts, likes, saves, comments, follows, and notifications — with a real-time messaging layer built on Supabase Realtime. The project was built to demonstrate end-to-end product thinking, from authentication and media storage to real-time state synchronisation and type-safe form handling.
Key highlights
- →Built full-stack social platform with auth, user profiles, posts (create/edit/delete), likes, saves, comments, follows, and notifications
- →Implemented real-time direct messaging using Supabase Realtime with instant message delivery and read receipts
- →Reduced API calls by 45% using TanStack Query intelligent caching strategies, improving perceived performance
- →Developed infinite scroll explore page with full-text search and image upload/storage integration
- →Developed infinite scroll explore page with full-text search and image upload/storage integration
- →Built real-time notification system for likes, comments, and follows
Tech stack
Case study
Problem
Building a social media platform involves solving several hard problems simultaneously — real-time data sync, optimistic UI updates, efficient state management, and media storage — all while keeping the UI fast and responsive. The challenge was to wire all of these together in a way that feels seamless to the user.
Approach
Supabase was chosen as the backend because it provides authentication, database, file storage, and real-time subscriptions in one platform, removing the need to stitch together multiple services. TanStack Query was used for all server state management, taking advantage of its caching and background refetching to minimise unnecessary API calls. React Hook Form combined with Zod provided end-to-end type safety from the form input all the way to the database schema.
Solution
The real-time messaging system uses Supabase Realtime channels to push messages instantly to both participants, with TanStack Query's optimistic updates making the UI respond before the server confirms. The explore page uses infinite scroll with cursor-based pagination and full-text search powered by Supabase's built-in search. All media uploads go through Supabase Storage with direct browser-to-bucket uploads to avoid routing large files through the API.
Result
Real-time message delivery and read receipts work with near-zero latency. TanStack Query caching reduced API calls by 45%, noticeably improving perceived performance on slower connections. The full-text search and infinite scroll explore page handles large datasets smoothly without pagination jank.