# 9x9 Goals Grid: The Harada Method

## Overview

The **9x9 Goals Grid** is a digital implementation of the Harada Method, the same framework used by Shohei Ohtani to transform from a high school athlete into a baseball legend. Unlike traditional to-do lists that are infinite and overwhelming, this tool forces finite prioritization. It turns one abstract dream into **81 concrete, actionable steps**.

Designed with a **"Neobrutalist"** aesthetic and a **"Privacy-First"** architecture, it lives entirely in your browser. No logins, no cloud databases, no tracking. Just you and your goals.

![The Harada Grid Interface](/projects/images/proto1.webp)

## Video Tour

[Watch the full tour and implementation details](https://www.loom.com/share/05e45cb8aba14ef1b7a7fb980c560dae)

## The Philosophy

Productivity tools often become procrastination traps. We spend more time organizing lists than doing the work. The 9x9 Grid solves this by enforcing constraints:

- **Constraint 1: The Space is Finite.** You have exactly 8 subgoals and 64 actions. If it doesn't fit, it's not a priority.
- **Constraint 2: Visual Impact.** Seeing your entire roadmap in a single glance creates a powerful mental model of your path to success.
- **Constraint 3: Complete Privacy.** Your ambitions are personal. By using LocalStorage, we ensure your data never leaves your device.

## Core Features & Workflow

### 1. The Macro View (The Bird's Eye)

At the center sits your **Main Goal**. Surrounding it are 8 **Subgoals**, the pillars required to support that main goal (e.g., Mental Strength, Physical Health, Technical Skill).

<!-- ![Macro View](/projects/images/proto2.webp) -->

Each of these pillars is further broken down into 8 specific, actionable tasks. This recursive structure ensures that even the loftiest ambition is grounded in daily habits.

![Grid Structure](/projects/images/proto6.webp)

### 2. The Focus Mode (The Deep Dive)

It can be daunting to look at 81 boxes at once. **Focus Mode** allows you to zoom in on a single 3x3 sector. This isolates one specific domain of your life, like "Finance" or "Health", allowing you to plan that area without distraction.

![Focus Mode](/projects/images/proto3.webp)

This mode is designed for deep work sessions where you are brainstorming the specific "How" for a particular "What".

![Editing Cells](/projects/images/proto4.webp)

### 3. The Narrative View (Chapters)

Not everyone thinks spatially. The **Chapters View** transforms the grid into a linear, card-based story. It presents your 8 subgoals as distinct chapters in the book of your success, perfect for reviewing your strategy or presenting it to mentors.

![Chapters View](/projects/images/proto5.webp)

## Technical Architecture

This application was built with performance and portability in mind.

- **Framework**: React 18 with TypeScript for type safety and component modularity.
- **Build Tool**: Vite for lightning-fast development and optimized production builds.
- **Styling**: Tailwind CSS for the stark, high-contrast "Neobrutalist" design system.
- **State Standards**: LocalStorage API for persistent, client-side data management.

![Mobile Responsiveness](/projects/images/proto8.webp)

## Export & Durability

Because the tool is local-first, data portability is key. Users can export their entire board as a **JSON file** for backup or transfer between devices. Additionally, the tool allows generating high-resolution **PNG/SVG** images of the completed grid, perfect for printing as a poster or setting as a desktop wallpaper to keep your goals visible.