Photo Sharing Web App Project
A Next.js social photo-sharing app with feed, uploads, profiles, image storage, dark mode, and responsive mobile UI.
Project image carousel

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.
Related projects
AI-Assisted English Learning App
An AI-powered English-learning assistant for Arabic speakers, with lessons, quizzes, translation, and pronunciation practice, with no accounts or persistent storage.
Read more: AI-Assisted English Learning AppEvent Booking Platform
An event-booking platform with a GraphQL API, browsing, search, booking, cancellation, and real-time activity via GraphQL Subscriptions.
Read more: Event Booking PlatformExpense Tracker Web App
A full-stack Next.js expense tracker with JWT authentication and MongoDB, hardened through a complete security audit, an automated test suite, CI/CD deployment, and a ready-to-r...
Read more: Expense Tracker Web AppRelated services
Full-Stack Web Application Development
End-to-end web applications that connect responsive interfaces, APIs, authentication, and databases into practical product workflows.
Mobile App Interface Development
Mobile-first application interfaces connected to APIs where needed, with focused navigation, forms, profiles, and responsive web previews.










