Suplatzigram
Instagram-inspired social network built with Next.js and Supabase as the full backend: authentication, database, storage and realtime.
- Tech stack
- Next.js
- React
- TypeScript
- Tailwind
- Supabase
- Resend
- Vercel
Context
Project from the Supabase course: an Instagram-inspired social network built with Next.js (App Router) and TypeScript. Supabase handles the entire backend: Auth, PostgreSQL, Storage, Realtime and Edge Functions.
What I did
- Implemented sign-up and sign-in with Supabase Auth. Sign-up validates the username (format, length and availability) and creates the user profile automatically.
- Implemented image uploads for posts and avatars with Supabase Storage, including a preview before publishing and profile editing.
- Implemented realtime notifications for likes and comments with Supabase Realtime and Edge Functions, plus a dashboard showing live metrics and activity.
- Built a Next.js API route that sends an email via Resend when someone comments. It uses a server-only Supabase admin client so the service key is never exposed.
- Built a post ranking based on the likes each post receives. It joins posts, profiles and likes with batched queries and groups the results on the client.