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…
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!
Top comments (1)
This is my official GitHub Finish-Up-A-Thon submission. The article was appearing in the Latest submissions feed earlier but is no longer showing for me. The post remains published and tagged for the challenge.