Draft → Publish Workflow
Stories are created in a rich text editor, saved as unpublished drafts, and promoted to public posts with structured metadata and image uploads.
[Project Context]
This was my first project built with Next.js (v12). I intentionally chose a Medium-style application because it forced me to work across the full stack: authentication, server-side rendering, API routes, database persistence, and media storage. I wanted to understand how the UI communicates with the server, how sessions are validated server-side, and how a framework like Next.js abstracts server creation without removing the need to think about backend architecture. It also pushed me to explore handling media uploads (images), implementing a rich text editor, and structuring global state through context in a real full-stack environment. I never fully implemented the notification system, but designing around it made me think deeply about how cross-user events would propagate in a real application.
[Problem]
Online writing platforms either feel overly complex or lack meaningful social interaction. Independent writers need a focused space to publish stories, grow an audience, and build engagement without platform bloat.
Writers need a simple draft-to-publish workflow
Discovery should feel lightweight, not algorithm-heavy
Social feedback (likes, comments, follows) drives engagement
Writers benefit from notification systems that reward consistency
[Solution]
urStory delivers a Medium-style publishing experience powered by Firebase, combining real-time engagement features with a clean writing workflow. Users can write, publish, follow, comment, like, save, and receive notifications — all within a responsive interface.
Real-Time Engagement
Likes, comments, replies, and saves update instantly using Firestore listeners for dynamic user feedback.
Social Graph
Follow/unfollow mechanics allow users to build audiences and optionally receive publishing notifications.
Content Discovery
Search and category filtering enable lightweight exploration without complex ranking algorithms.
[Architecture]
urStory is a client-driven Firebase application where authentication, real-time updates, and document-based relationships power the social writing experience. Firestore structures model stories, comments, followers, and notifications with targeted snapshot listeners.
Document-Based Social Graph
Users, stories, followers, and notifications are modeled as Firestore documents and subcollections, allowing flexible iteration without rigid schemas.Real-Time Snapshot Listeners
onSnapshot listeners power instant updates for likes, comments, and notifications without manual polling.Client-Heavy Architecture
Most business logic resides in the client through context providers, tightly coupling UI interactions with Firestore operations.Slug-Based Routing
Dynamic routes enable SEO-friendly story URLs and consistent data lookup via unique slugs.Centralized Auth Context
Authentication, publishing logic, follow mechanics, and engagement mutations are consolidated within a global context layer.[UI / UX]
The interface blends expressive motion with content-first hierarchy. Writing is distraction-minimal, while story pages emphasize author identity and social interaction through clear visual affordances.
Rich text editing with live reading-time feedback
Story cards optimized for scannability (image, category, author, date)
Inline engagement controls (like, save, follow, notify)
Threaded comment interactions with reply indicators
Profile pages that visualize follower relationships
Design System Notes
Animated Entry Transitions
GSAP-driven animations introduce stories and navigation elements to create a polished feel.
Engagement Emphasis
Like and follow actions provide immediate visual state changes for user feedback.
Writing Focus
The editor experience removes clutter and separates drafting from publishing confirmation.
Responsive Structure
Layouts adapt between feed, story view, and profile views while maintaining visual consistency.
State Awareness
Conditional UI reflects ownership (edit/delete), follow state, and notification toggles.