Skip to content
Back to Projects
Emotion-First Literary Platform

Fragments of Me

An immersive digital reading and writing sanctuary featuring ambient soundscapes and line-by-line reactions.

Next.js 16React 19Firebase FirestoreFirebase AuthFirebase Admin SDKExpress MicroserviceNodemailerTailwind CSSVercel Analytics

Overview

Fragments of Me is an emotion-driven reading and writing environment designed to evoke contemplation and personal expression. Rather than treating writing as content for consumption, the platform prioritizes atmosphere through mood-based soundscapes, granular line-by-line reader reactions, and an editorial author ecosystem.

Architecture

Storefront & Reading UI

Next.js 16 (App & Pages)
React 19
Tailwind CSS
Ambient Audio Engine

Dedicated Microservices

Express Newsletter Microservice
Nodemailer SMTP Dispatcher
React Email Templates

Data & Auth (Firebase)

Firebase Auth
Firestore Database
Reaction Subcollections
Firebase Admin SDK

Engineered Features

Ambient Soundscapes

Integrated web audio engine offering 4 curated mood environments (warm, soft, melancholic, dark) with seamless looping and persistent volume controls across route transitions.

Line-by-Line Reactions

Readers can leave contextual emoji reactions on specific lines. Each line maintains its own isolated subcollection in Firestore to prevent hitting document size limits.

Echoes Commentary

Threaded reflective discussions allowing readers to exchange insights and interpretations on essays and poems.

Daily Ritual Tracking

Consistent reading and writing streak counter encouraging continuous creative reflection without intrusive notifications.

Technical Implementation

  • Built with Next.js 16 and React 19, taking advantage of improved hydration speed and modern hooks.
  • Utilizes Firestore Subcollections to store fine-grained reader reaction counts, ensuring document reads remain O(1) and never exceed the 1MB Firestore document limit.
  • Separated heavy email dispatch tasks into an isolated Express.js microservice to prevent long-running SMTP handshakes from blocking client web workers.
  • Implemented strict Content Security Policies, security response headers, and dynamic SEO sitemaps.

Lessons Learned

Designing for emotional engagement requires equal parts aesthetic sensitivity and data design. Designing the line-by-line reaction feature demonstrated the importance of subcollection partitioning in NoSQL databases, maintaining instant UI optimistic updates even when readers react in quick succession.

Open Live SanctuaryBrowse Other Projects