Our Inspiration: The "Narrative Gap"

In today's fast-paced work environment, countless valuable contributions are forgotten by the time performance reviews come around. This "Narrative Gap" leads to recency bias, imposter syndrome, and a chronic undervaluing of one's own work. We were inspired to build a tool that acts as a personal career advocate, ensuring that no contribution is ever lost.

How We Built It: A Modern, Event-Driven AI Application

We built a full-stack, event-driven application using a modern tech stack centered around Next.js 14 (App Router), TypeScript, and Firebase.

The user journey begins with our Chrome Extension (Manifest V3). It uses content scripts and a context menu to capture work context from any site and saves it to Firestore.

The magic begins here: the onCreate event on a new Firestore document triggers a Firebase Cloud Function. This function asynchronously calls the Google Gemini 2.5 Flash API with a carefully engineered prompt designed to analyze the raw text and return a structured Problem-Action-Impact (PAI) JSON object.

Our web app, built with React 18 Server Components, uses real-time Firestore listeners (onSnapshot). As soon as the Cloud Function updates the document with the AI's analysis, the UI instantly and reactively updates the log's status from "Structuring" to "Needs Review," presenting the user with a fully drafted accomplishment. Finally, users can select their completed logs and use another Gemini-powered Next.js API route to synthesize and articulate a compelling narrative summary.

Challenges We Faced

  • Event-Driven Complexity: Managing the async, event-driven flow was a key challenge. We had to carefully manage the status of each log (Structuring, Needs Review, Complete) and ensure the UI updated reliably using Firestore's real-time listeners. This required a robust NoSQL data model with composite indexes.
  • Prompt Engineering: Getting Gemini to reliably return clean, structured JSON from messy, unstructured HTML text was a significant challenge. We spent hours refining our prompts to handle various edge cases and ensure high-quality output.
  • The SPA Problem: Capturing content reliably from dynamic Single Page Applications like Jira required careful use of Chrome Extension APIs to target the most relevant user-focused content.

What We Learned

This project was a deep dive into building a modern, event-driven AI application. We learned the power of combining Firebase's real-time capabilities with Next.js Server Components for a highly responsive and efficient user experience. Most importantly, we validated that by leveraging a powerful LLM like Gemini for the heavy lifting of "first draft" creation, we can fundamentally solve the user friction that has plagued productivity tools for years, shifting the user's task from "documenting" to simply "reviewing."

Built With

  • chrome-extension-manifest-v3
  • cloud-functions
  • cloud-functions)
  • context-menus
  • firebase
  • firestore
  • google-gemini-api
  • google-gemini-api-*-**frontend:**-react-18
  • javascript
  • next.js-14
  • next.js-api-routes-*-**ai:**-google-gemini-1.5-flash-(`@google/generative-ai`)-*-**chrome-extension:**-manifest-v3-(service-worker
  • node.js
  • nosql
  • postcss
  • react-18
  • swc
  • tailwind-css
  • tailwind-css-*-**backend-&-database:**-firebase-(firestore
  • typescript
  • vercel
  • webpack
Share this project:

Updates