ProtagaMe | Devpost

Inspiration

Journaling is a powerful tool for self-reflection, but text alone often fails to capture the visceral "feeling" of a moment. We wanted to bridge the gap between memory and imagination. Inspired by the idea that everyone is the "protagonist" of their own life, we created ProtagMe to turn mundane daily entries into epic, visual storybook moments, making the habit of reflection something users actually look forward to.

What it does

ProtagMe is an AI-powered journaling platform that transforms text into art. When a user writes about their day and hits the "Visualize" button, an AI pipeline analyzes the emotional subtext and key imagery of the entry to generate a unique, high-quality visual representation. These "memories" are stored in a persistent database, allowing users to flip through a digital gallery of their life’s journey, organized by date, ensuring their story remains intact even after logging out.

How we built it

The project is built with a modern full-stack architecture:

Frontend: Built with Next.js and TypeScript for a responsive, type-safe user experience. We used Tailwind CSS for the styling and Framer Motion to create smooth, book-like transitions.
Backend & AI: We developed a custom API pipeline using Node.js that communicates with generative AI models with OpenRouter to handle prompt engineering and image synthesis.
Database: We integrated MongoDB to handle persistent storage, moving away from local JSON files to a scalable cloud solution that manages journal entries, visual prompts, and media URLs.

Challenges we ran into

One of the biggest hurdles was managing state and caching. We initially struggled with "stale data," where the frontend would show old entries after a user navigated between pages. We had to implement a strict no-store caching policy and manual state synchronization to ensure that the moment an image is generated, it is reflected across the entire app without needing a manual refresh. We also faced the classic challenge of "AI timeout" issues, which we solved by implementing a race-condition wrapper to manage long-running generation tasks.

Accomplishments that we're proud of

We are incredibly proud of the seamless integration between the text editor and the AI pipeline. Seeing a few sentences about a "walk in the rain" turn into a beautiful, atmospheric piece of art in real-time feels like magic. We are also proud of successfully migrating the entire architecture from local storage to a live MongoDB production environment, which was a significant step in making the app "user-ready."

What we learned

This project taught us a lot about the nuances of asynchronous data fetching in Next.js and how to handle the "Hydration" process between the server and the client. We also deepened our understanding of NoSQL schema design, specifically how to structure data to allow for efficient date-based queries while storing complex AI metadata.

What's next for ProtagMe

The next step for ProtagMe is adding collaborative storytelling, where users can link entries to create "shared worlds" with friends. We also plan to implement a style-selector, allowing users to choose if their life looks like a Studio Ghibli film, a noir comic book, or a high-fantasy oil painting.