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 app that represents a lifespan as a grid of weekly squares Each square equals one week, turning time into something tangible and reflective.

What it does

Accepts a birthdate (date picker + typed input support)
Calculates weeks lived and weeks remaining from a 4,000-week model
Displays a life grid with per-row labels:
- Left: Age (starts at 0)
- Right: Calendar year (based on selected birth year)
Supports two grid modes:
- Standard mode: lived vs remaining
- Typical average life phases mode: color-coded phase ranges

Typical phase color coding

When enabled, the grid can display a suggested phase model:

Childhood (0–12)
Teen & Early Adult (13–24)
Working Years (25–64)
Retirement & Later Life (65+)

Future weeks are shown as faded in this mode.

Tech stack

React
Vite
Tailwind CSS (via @tailwindcss/vite)

Run locally

Install dependencies

npm install

Start development server

npm run dev

Build for…

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.

DEV Community: CJ

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

What I Built

zennmarieee / LifeSquares

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

LifeSquares

What it does

Typical phase color coding

Tech stack

Run locally

Demo

Video Walkthrough

Screenshots

Before

After

The Comeback Story: Resurrecting LifeSquares

The Technical Debt Wake-up Call

The Debugging Nightmare

My Experience with GitHub Copilot

What's Next

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

What I Built

Demo

Video Walkthrough

Screenshots

Before

After

The Comeback Story

My Experience with GitHub Copilot

What's Next