{"slug": "screenshot-journal", "title": "Screenshot Journal", "summary": "A developer built Screenshot Journal, a mobile-responsive spatial canvas app that turns camera-roll clutter into an interactive scrapbook where users can drag, group, search, and annotate screenshots alongside voice notes and AI-generated summaries. The app uses Next.js 15, TypeScript, Tailwind CSS, and React Flow for its infinite canvas, MongoDB Atlas for persistent layout state, and a hybrid AI pipeline that runs Google's open-weight Gemma model locally via Ollama during development and routes to OpenAI's gpt-4o-mini in production, with ElevenLabs TTS narrating summaries. It was deployed on Vercel and built for a friend who wanted to organize screenshots of recipes, design inspiration, and places to visit.", "body_md": "This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend\n\n**What I Built**\n\nI built Screenshot Journal, a mobile-responsive, tactile \"paperback scrapbook\" application designed for a close friend who constantly takes screenshots of recipes, design inspiration, places to visit, and memorable chats only to have them buried in her camera roll forever.\n\nScreenshot Journal turns fragmented camera-roll clutter into an interactive infinite spatial canvas. Users can drag, group, search, and annotate screenshots alongside voice notes and AI-generated summaries. It features customizable canvas themes—including Paperback (Cream), Charcoal Dark, Bestie Blue, and Custom hex palettes delivering a warm, physical scrapbook feel in a digital space.\n\n**Demo:**[https://screenshot-journal.vercel.app/](https://screenshot-journal.vercel.app/)\n\n**Code:**[https://github.com/Fatima-Sa1eem/Screenshot-Journal](https://github.com/Fatima-Sa1eem/Screenshot-Journal)\n\n**How I Built It**\n\nScreenshot Journal is built around a modern tech stack designed for zero-latency spatial interactions, persistent memory, and natural voice workflows:Frontend & Spatial Engine: Built with Next.js 15, TypeScript, and Tailwind CSS. Infinite-canvas interactions, zooming, and free panning are powered by React Flow (@xyflow/react), with full gesture optimizations for touch devices (zoomOnPinch, panOnDrag, touchLayout=\"direct\").Data Layer & Persistent Memory: Connected to MongoDB Atlas as the primary database layer. Screenshot metadata, canvas coordinates, user notes, and spatial relationships are stored seamlessly in MongoDB Atlas collections, ensuring the friend's scrapbook layout state persists across devices.   AI Architecture (Hybrid Local & Cloud Pipeline):Local Development & Prototyping: Powered locally using Ollama running Google's open-weight model (gemma:2b / qwen2.5-coder). This enabled full offline capability, zero API costs, and rapid \"vibe coding\" inside my IDE.   Production Deployment: Configured to route through OpenAI API (gpt-4o-mini) for fast, reliable cloud processing of screenshot context and structured note summaries in production.Voice Synthesis: Integrated ElevenLabs Text-to-Speech (TTS) to convert AI-generated summaries into natural audio narration on the canvas.Deployment & Hosting: Deployed on Vercel for serverless API execution and global edge distribution.\n\n**Why Does Open Innovation Matter?**\n\nOpen innovation and open-weight architectures fundamentally transformed how this app was built from day one:\n\n**Complete Data Privacy & Local Control**: Local inference with open-weight models like Gemma via Ollama ensured sensitive personal screenshots and notes never left the local machine during development.\n\n**Zero-Cost Prototyping**: Open-weight models eliminated API costs during initial experimentation, enabling fast, iterative UI building and spatial prompt tuning before deploying to production.\n\n**Flexible Storage & System Design**: Coupling open-source AI workflows with flexible document storage like MongoDB Atlas allows custom prompt outputs and spatial node coordinates to evolve naturally without rigid database schemas.\n\n**My Agent Session**\n\nI built and refined this project using a multi-agent open workflow:\n\n**Architecture & Foundation**: Local AI coding sessions in Antigravity powered by Ollama (qwen2.5-coder) for initial component scaffolding, Next.js 15 routing, and mobile drawer setups.\n\n**\n\nFine-Tuning & Production Polish**: When reaching initial session limits, seamlessly transitioned to Windsurf / SWE 1.6 to perform surgical code fine-tuning, polish React Flow touch gestures (panOnDrag, zoomOnPinch), integrate MongoDB Atlas models, and verify production build stability on Vercel.\n\n**Prize Categories**\n\nBest Use of Gemma: Used Google's open-weight Gemma model (gemma:2b locally with Ollama) during local development and vibe coding to iterate on prompt structures, screenshot analysis, and canvas card formatting.\n\nBest Use of ElevenLabs: Integrated ElevenLabs Text-to-Speech (TTS) to generate audio narration for notes and screenshot summaries on the spatial canvas.\n\nBest Use of MongoDB Atlas: Utilized MongoDB Atlas as the persistent database layer to store screenshot metadata, spatial canvas positions, and AI summary cards.", "url": "https://wpnews.pro/news/screenshot-journal", "canonical_source": "https://dev.to/fatima_____saleem/screenshot-journal-4i4a", "published_at": "2026-10-05 05:09:22+00:00", "updated_at": "2026-10-05 05:13:36.328627+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "generative-ai", "developer-tools"], "entities": ["Screenshot Journal", "Ollama", "Gemma", "OpenAI", "gpt-4o-mini", "ElevenLabs", "MongoDB Atlas", "Vercel"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/screenshot-journal", "markdown": "https://wpnews.pro/news/screenshot-journal.md", "text": "https://wpnews.pro/news/screenshot-journal.txt", "jsonld": "https://wpnews.pro/news/screenshot-journal.jsonld"}}