DEV Community: CJ

The Passion Autopsy: A Compassionate Case File for the Hobbies We Let Go

CJ — Mon, 13 Jul 2026 06:05:39 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

The Passion Autopsy is a small web app for a passion no one ever talks about: the ones we quietly let die.

Most "passion" projects celebrate the fire — the fandom, the rivalry, the obsession still burning. I wanted to build something for the other side of that: the guitar in the closet, the half-finished novel, the sport you gave up somewhere between adulthood and exhaustion. Instead of guilt-tripping you about quitting, the app generates a compassionate, literary autopsy report for your lost passion — written by the fictional Chief Examiner at the Department of Lost Passions — exploring what happened to it, and whether it could realistically come back.

You type in what you used to love, roughly when it faded, and a sentence or two of context. The examiner returns a full case file: a status (Deceased / Dormant / Critical / Missing), a cause of death, contributing factors, a fragment of "recovered evidence" quoted from your own words, the examiner's findings, and an honest read on whether revival is possible — closing on a single line meant to read like the last words on a museum plaque.

Demo

Live app: https://passion-autopsy.vercel.app/
GitHub repo: https://github.com/zennmarieee/passion-autopsy

Home Page

Passion Report

How I Built It

Stack: Next.js (App Router) + TypeScript + Tailwind CSS, deployed on Vercel. No database, no authentication — the entire experience lives in a single page, backed by one serverless API route.

The persona is the product. The whole app hinges on Gemini staying in character as a forensic examiner rather than slipping into generic AI or self-help language. I spent real time on the prompt: it explicitly forbids clichés like "it's never too late" or "follow your dreams," frames the passion itself (not the person) as the "patient" under examination, and asks for a closing line written like a museum plaque inscription rather than a motivational quote. Getting that tone right mattered more to me than any single feature.

Structured output, validated end-to-end. Gemini returns strict JSON (status, cause_of_death, contributing_factors, recovered_evidence, autopsy_findings, resurrection_possibility, case_closing_statement), which I validate against a schema server-side before it ever reaches the client — so a malformed AI response fails loudly on the server instead of quietly breaking the UI.

Prompt-injection guard. Since three form fields get dropped directly into the prompt, I explicitly delimit user input as <case_intake> data, with an instruction telling Gemini to treat anything that looks like an embedded instruction as a strange detail about the passion, not a command to obey.

The hardest bug wasn't the AI — it was the screenshot. The "Download as Image" export (built with html2canvas) came out looking completely washed out for a while. Turned out to be two separate issues stacked on top of each other: Tailwind's CSS-variable-based color system doesn't always survive html2canvas's DOM cloning, and the card's fade-in animation — which starts at opacity: 0 — was restarting on the clone and getting rasterized before it finished. The fix was to have html2canvas copy already-resolved computed colors onto the clone and explicitly force animation: none; opacity: 1 before rasterizing. Small bug, satisfying fix.

Local history, no database. Past cases save to localStorage so you can revisit or re-download old reports — fully client-side, removable anytime, never sent anywhere. Keeps the "no backend" constraint honest while still giving the experience some persistence.

Guardrails for a public demo. A lightweight per-IP rate limit and an origin check on the API route keep the (very finite) Gemini quota from being drained by casual abuse, since this is a publicly shared link with no login.

Prize Categories

Best Use of Google AI — Gemini (gemini-3.1-flash-lite) is the entire reasoning engine behind this project, not a bolted-on summarizer. It's doing structured persona-driven creative writing under a hard JSON schema: sustaining a consistent fictional voice, reasoning about why a passion plausibly faded from sparse user input, and reconstructing a specific "evidence" detail grounded only in what the user actually said — while explicitly avoiding cliché and staying in character across every generation.

Thanks for reading — and for anyone who's ever had a passion quietly go dormant: no judgment. Just data.

The Passion Autopsy — A Compassionate Case File for the Hobbies We Let Go

CJ — Mon, 13 Jul 2026 06:01:33 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

The Passion Autopsy is a small web app for a passion no one ever talks about: the ones we quietly let die.

Demo

Live app: https://passion-autopsy.vercel.app/
GitHub repo: https://github.com/zennmarieee/passion-autopsy

Home Page

Passion Report

How I Built It

Stack: Next.js (App Router) + TypeScript + Tailwind CSS, deployed on Vercel. No database, no authentication — the entire experience lives in a single page, backed by one serverless API route.

Prize Categories

Thanks for reading — and for anyone who's ever had a passion quietly go dormant: no judgment. Just data.

I Finally Finished LifeSquares: A Life-in-Weeks Reflection App

CJ — Sun, 07 Jun 2026 16:34:36 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

LifeSquares is a reflective web application that visualizes a person's life as a grid of weeks. Each square represents a single week, turning the abstract concept of time into something tangible and easier to understand.

The project was inspired by the idea that life is finite and that seeing time visually can encourage more intentional living. Rather than focusing on productivity or achievement, LifeSquares is designed as a personal reflection tool that helps users think about their past, present, and future.

Key features include:

Interactive life grid where every week is represented as a square
Birthdate-based calculations for weeks lived and weeks remaining
Adjustable lifespan projections
Life phase visualization using color-coded stages
Weekly journaling and reflection entries
Life statistics and summary metrics
Responsive and accessible interface
Light and dark theme support
Local storage persistence

Live Demo: Check out the Live Demo

Source Code:

zennmarieee / LifeSquares

Each square equals one week, turning time into something tangible and reflective.

LifeSquares

LifeSquares is a web-based life visualization and reflection app that represents your entire lifespan as a grid of weekly squares. Each square equals one week — turning abstract time into something you can see, feel, and write about.

Features

🟦 Interactive Life Grid

Visualize every week of your life as a square. Hover for tooltips, navigate with your keyboard, and see your past and future at a glance.

📅 Birthdate Input & Validation

Enter your birthdate via a date picker or typed input. LifeSquares computes your weeks lived and weeks remaining automatically.

⏳ Lifespan Selector

Adjust your assumed lifespan (default: 4,000 weeks / ~76.9 years) to explore different projections and see how the numbers shift.

🎨 Life Phase Color Coding

Toggle a suggested life phase model that colors the grid by heuristic age ranges:

Phase	Age Range
Childhood	0–12
Teen & Early Adult	13–24
Working Years	25–64
Retirement &

…

View on GitHub

Demo

Video Walkthrough

Demo:

The walkthrough demonstrates:

Creating a life grid from a birthdate
Exploring life statistics
Switching lifespan projections
Writing journal entries
Theme switching and persistence

Screenshots

Before

After

The Comeback Story: Resurrecting LifeSquares

LifeSquares started as an experiment inspired by the “life in weeks” concept. The initial version did its job—it could render a life grid and calculate weeks lived—but it always felt closer to a visualization than a real product.

When I returned to it for the Finish-Up-A-Thon, it was clear the project had potential, but it was incomplete in every meaningful way: no persistence, no reflection layer, and no real structure beyond the grid itself.

The Goal: Before the challenge, LifeSquares could display time. After revisiting it, I wanted it to help users interact with time.

The Technical Debt Wake-up Call

Reopening the codebase months later was a reality check. The architecture had drifted into something fragile—state was scattered, components were tightly coupled, and the grid logic was doing far more than it should have been responsible for. Even small changes risked breaking unrelated parts of the UI.

The biggest pivots I had to make were:

Refactoring state management: Moving from a scattered component-level approach into a more structured flow.
Rebuilding the grid logic: Decoupling it from user data so it could scale cleanly with different lifespan configurations.

The Debugging Nightmare

The most frustrating issue showed up in the grid layout. On certain screen sizes (especially mobile Safari), the squares would subtly shift out of alignment.

I ended up tracing it back to how offsets were being calculated when mapping weeks into rows and columns. The logic assumed a fixed layout, which completely broke under responsive scaling. The fix came from simplifying the calculation instead of overengineering it:

// The corrected approach: Deriving the grid from a single source of truth
const calculateGrid = (lifeExpectancy) => {
  // Each year = 52 weeks, grid is derived directly from total weeks
  return lifeExpectancy * 52;
};

My Experience with GitHub Copilot

GitHub Copilot acted as a development partner throughout the project.

I used Copilot to:

Accelerate React component development
Generate repetitive UI boilerplate
Refactor existing code
Improve accessibility implementations
Explore alternative approaches for state management
Speed up debugging and iteration

Rather than replacing my decision-making, Copilot helped reduce development friction and allowed me to focus more on product design, user experience, and feature refinement.

The Finish-Up-A-Thon provided the perfect motivation to revisit an unfinished idea and turn it into something I was excited to share publicly.

What's Next

Future plans for LifeSquares include:

Data export and backup options
Richer journaling experiences
Goal and milestone tracking
Calendar integrations
Additional visualization modes
Optional cloud synchronization

LifeSquares reminded me that unfinished projects still have potential—it just takes the decision to come back and finish them.

I'm curious—how do you all track your time or personal milestones? Do you prefer 'productivity' focused tools, or are you more into 'reflection' tools like LifeSquares? Let me know in the comments!

I Finally Finished LifeSquares: A Life-in-Weeks Reflection App

CJ — Sun, 07 Jun 2026 15:45:36 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

Key features include:

Interactive life grid where every week is represented as a square
Birthdate-based calculations for weeks lived and weeks remaining
Adjustable lifespan projections
Life phase visualization using color-coded stages
Weekly journaling and reflection entries
Life statistics and summary metrics
Responsive and accessible interface
Light and dark theme support
Local storage persistence

Live Demo: https://lifesquares.vercel.app/

Source Code: https://github.com/zennmarieee/LifeSquares

Demo

Video Walkthrough

Demo: https://www.youtube.com/watch?v=frlmt0q53Pw

The walkthrough demonstrates:

Creating a life grid from a birthdate
Exploring life statistics
Switching lifespan projections
Writing journal entries
Theme switching and persistence

Screenshots

Before

After

The Comeback Story

LifeSquares started as an experiment inspired by the popular "life in weeks" concept. The initial version successfully displayed a life grid, but it felt more like a visualization than a complete product.

Before participating in the Finish-Up-A-Thon, LifeSquares could display a life grid and calculate weeks lived, but it lacked journaling, life statistics, theme support, local persistence, and many of the features needed to make it useful beyond a simple visualization.

During the challenge, I focused on transforming it from a simple concept into a more complete experience by:

Adding weekly journaling functionality
Building life summaries and statistics dashboards
Creating lifespan customization options
Improving accessibility and keyboard navigation
Implementing light and dark themes
Adding local persistence so data survives page refreshes
Improving the overall UI and responsiveness
Preparing the application for deployment and public use

The biggest improvement was shifting the project from merely showing time to helping users reflect on how they spend it.

My Experience with GitHub Copilot

GitHub Copilot acted as a development partner throughout the project.

I used Copilot to:

Accelerate React component development
Generate repetitive UI boilerplate
Refactor existing code
Improve accessibility implementations
Explore alternative approaches for state management
Speed up debugging and iteration

Rather than replacing my decision-making, Copilot helped reduce development friction and allowed me to focus more on product design, user experience, and feature refinement.

The Finish-Up-A-Thon provided the perfect motivation to revisit an unfinished idea and turn it into something I was excited to share publicly.

What's Next

Future plans for LifeSquares include:

Data export and backup options
Richer journaling experiences
Goal and milestone tracking
Calendar integrations
Additional visualization modes
Optional cloud synchronization

LifeSquares reminded me that unfinished projects still have potential—it just takes the decision to come back and finish them.