Skip to content
Back to projects

Photo Sharing Web App Project

A Next.js social photo-sharing app with feed, uploads, profiles, image storage, dark mode, and responsive mobile UI.

  • Full-Stack Apps
  • TypeScript
  • React
  • Next.js
  • Node.js
  • MongoDB
  • Mongoose
  • Docker
  • Social
  • Responsive Design

Project image carousel

Photo Sharing Web App

Image 1 of 9

Project Concept

A social photo-sharing platform with a public feed, upload from file or direct camera capture, and likes with a unique constraint preventing duplicates. The profile avatar is optional with a clean initials fallback instead of a broken image.

What the Interface Shows

The public feed in both dark and light modes and both avatar states, the user’s own photo grid, a photo-detail modal with title and description, and the login page.

My Role and Decisions

I designed storage as a swappable interface (local/Cloudinary/S3) instead of locking into one provider, which made the Heroku migration easier once I discovered some SDK packages needed to be required dependencies rather than optional ones for the app to actually run there. I also chose to validate the uploaded file’s actual byte signature instead of trusting the browser-supplied MIME type, since that’s easily spoofed. When seeding sample data, I recomputed each photo’s like count directly from the real Like documents and confirmed zero mismatches before considering the seed successful.

Technical Aspects

Next.js App Router, MongoDB via Mongoose across three collections (users, photos, likes), HttpOnly cookie sessions instead of storing the token in JavaScript (reducing XSS exposure), and a denormalized like-count field on each photo to avoid a count query on every feed load.

Project Value in the Portfolio

This project demonstrates a real Strategy pattern in the storage layer, security-conscious validation of uploaded file content, and maintaining a denormalized counter that stays consistent with its source of truth.

View more projects
View more services