Skip to content
Xenia Kadar
← Back to the archive

ArchiveSocial photo-sharing app

MomentSnap

soc-clone

A social photo-sharing app for posting moments and interacting through likes and comments. Built on Firebase, with an early OpenAI-powered caption generator.

AI caption generator

React · React Router · Tailwind CSS · Headless UI · Firebase · Cloud Firestore · OpenAI API

Type
Social photo-sharing app
Build
Personal project
Repos
Single repository
Package
soc-clone
Demo
Archived

Overview

MomentSnap is a social photo-sharing app for posting special moments and interacting with other people's posts. Anyone can browse posts publicly; signing in unlocks posting, liking, and commenting.

What I built

  • Email/password and Google sign-in through Firebase Authentication
  • Image upload to Firebase Storage
  • Posts, comments, and likes stored in Cloud Firestore
  • Caption editing and post deletion
  • Likes and comments on posts
  • Public, read-only browsing for signed-out visitors
  • Responsive layouts built with Tailwind CSS and Headless UI

Early generative-AI experiment

MomentSnap included an early, deliberate step into generative AI: users could request an AI-generated caption for a post, produced through the OpenAI API. I also explored fine-tuning to shape the suggestions toward the app's tone.

It was a first exploration of bringing generative AI into an interface, a single feature I integrated on purpose, not evidence that the app itself was AI-generated.

The MomentSnap post composer with the AI caption generator returning a suggested caption for an uploaded image.
Requesting an AI-generated caption through the OpenAI API.

Technical approach

  • Firebase Authentication with email/password and Google sign-in
  • Cloud Firestore for posts, comments, and likes
  • Firebase Storage for uploaded images
  • Client-side routing with React Router
  • Interface built with React, Tailwind CSS, and Headless UI
  • Upload and interaction flows wired to Firebase
The MomentSnap feed of public posts on the web, each with an image, caption, likes, and comments.
The web feed of public posts.
MomentSnap on a mobile screen, with posts stacked in a single scrolling column.
The same feed, re-flowed for mobile.

What I learned

  • Working across Firebase Authentication, Storage, and Cloud Firestore
  • Integrating the OpenAI API into a real interface, and exploring fine-tuning
  • Building accessible UI with Headless UI and Tailwind CSS
  • Structuring a React app with React Router
  • Designing responsive, interaction-driven layouts