PicShare

A small Instagram-style image feed I built to learn Firebase real-time and Next.js together. Upload, share, like, repeat.

About

PicShare was a deliberate learning project: I wanted to understand Firebase real-time subscriptions and Next.js App Router in the same build, rather than learning them separately from tutorials. The architecture splits data concerns deliberately: MongoDB stores user profiles, image metadata, and relationship graphs (followers/following) because it's good at flexible document shapes. Firebase handles the real-time feed updates — when a followed user uploads a photo, the subscriber's feed updates without a page refresh. That separation kept the MongoDB schema clean while using Firebase for what it's actually great at. Firebase Authentication handles login with Google OAuth, which reduced session management to zero lines of custom code. The image upload flow processes files client-side to enforce a 5MB limit and JPEG/PNG validation before hitting the API — catching bad input early reduced server-side error rates significantly. The biggest lesson: Firebase real-time listeners need careful cleanup or they accumulate as users navigate between pages, causing memory leaks and duplicate events. I spent more time on listener lifecycle management than on any feature. The outcome was a clean mental model for when to use Firebase vs. when to use a traditional polling approach.

Features

  • Image upload and sharing functionality
  • Firebase authentication with secure login/signup
  • Real-time updates and feed using Firebase
  • MongoDB database for storing user and image metadata
  • Responsive design with smooth user experience
  • Explore and like photos from other users

Tech stack

Next.jsReactTypeScriptMongoDBFirebase

Screenshots

PicShare — Image feed
Image feed
PicShare — Upload interface
Upload interface
PicShare — Gallery view
Gallery view