Turn your product launch into an actionable battle map

1. Product overview

1.1 One-sentence positioning

HYB (Hatch Your Beta) is a local-first, multi-project product launch and growth distribution console for indie hackers and SaaS founders. It helps you manage launch materials, track 500+ acquisition channels, and record cold-start and live-URL distribution progress — with all data stored only in your browser's localStorage, never uploaded to a server.

1.2 What problem it solves

In the cold-start phase, the most draining work isn't writing code — it's tracking where to post, how far along each channel is, and where to resume next. HYB decomposes this into three quantifiable objects:

The three intersect into a "channel × project" matrix — the core data model of HYB. The "Launched" and "Featured" counts in the overview are counted by this matrix, not by channel.

1.3 Who it's for

• Indie hackers preparing a cold start on Product Hunt, Hacker News, Reddit, and AI tool directories.
• Small teams running multiple product lines, each of which needs a full launch cycle.
• Global SaaS teams that need a bilingual (EN/zh-CN) UI and records for Google, Bing, Baidu, Naver and other search engine submissions.
• Privacy-conscious users who don't want their launch plans sitting in a third-party SaaS.

2. Core features (mapped to the code)

3. How it compares to common alternatives

4. FAQ

Every number and behavior below can be verified against the source code.

5. How it works

Told in data-flow order. All function names and key names are from the source code.

5.1 Data model (three layers)

projects[]                    each project: id, name, url, tagline, desc, collapsed
platforms[]                   each channel: id, name, url, category, free, dr, custom
progress[projectId][platId]   each combination: status, followUp, notes, links[{url,title,date}]
okrMap[projectId]             each project: cycle(week|month|quarter|year), target

Relationship: progress is a sparse matrix of projects × platforms; only combinations that have been operated on have entries. On read, getProgress(pid, platId) auto-creates an empty record if missing (emptyProgress() returns status: 'pending').

5.2 Boot flow (init())

1. loadState(): decides between migration and direct read based on the version number.
   • If hyb_v12_version < 12 or there is no v12 platforms, it first tries migrateFromV10() (migrating from ffee_console_v10_*).
   • Reads hyb_v12_platforms; if missing, reads the legacy ffee_promo_data_final_v2; if still missing, uses defaultPlatforms() (i.e., REAL_PLATFORMS + PRELOADED_DR).
   • When the catalog version is below CATALOG_VERSION (3) and the channel count is ≥300, mergeCatalog() merges new channels and records catalogAdded.
   • Reads projects / progress / okr / lang / ui / savedAt, cleans each via normalize*, and ensures unique ids via dedupeIds.
2. bindEvents(): wires up all buttons, filters, table event delegation, keyboard Esc, page visibility, and pagehide/beforeunload saves.
3. applyI18n() + startClock() (refreshes the top date/time every second).
4. buildFilterOptions() → renderProjects() → updateMaterialsUi() → renderTable() → renderOverview().
5. If needsCatalogPersist or needsCopyRefresh is set, one extra persistence pass is made.

5.3 Render flow

• Overview: renderStats() iterates over platforms × projects to accumulate live-URL count, launched count, and featured count, plus a per-project breakdown; renderGoal() computes the current project's OKR within the period, the percentage, days left, and the coaching message.
• Materials: renderProjects() builds project cards from template strings; autoGrowAllTextareas() makes textareas auto-size.
• Channel table: filteredPlatforms() first filters channels by search/category/fee, then uses rowsFor(p) to check whether the channel has any visible rows under the current project/status; sorting only handles DR (null always last). renderTable() outputs the main row + sub-rows (when multiple projects) + the expanded live-URL panel.

5.4 Interaction & saving

• Material field input: the input event updates the in-memory object; queueProjectSave() debounces 260 ms before writing to localStorage; flushProjectSave() forces a flush on export, language switch, page hide, and unload.
• Table status/date/notes: the change event calls persistProgress() immediately; status and date changes re-render the table and overview.
• Live URL add/edit/remove: updates links[index][field] and persists immediately; a date change triggers renderGoal() to recompute the goal.
• DR inline editing: replaces the button with an input.dr-input; Enter/blur saves, Esc cancels; normDr() validates 0–100 and rounds, treating invalid values as null.
• All writes go through writeJSON(), which catches QuotaExceededError and similar exceptions and shows a toast.

5.5 Import / export / reset

• Export: exportData() assembles {app, version, exportedAt, lang, platforms, projects, progress, okr} and downloads it as a Blob.
• Import: importFile() parses the JSON and determines whether it's a flat array (legacy) or a full object; a full object reads platforms/projects/progress/okr, while legacy migrates old fields into the first project; after confirmation it replaces the in-memory state, persists each piece, and re-renders.
• Reset: resetAllData() restores defaultPlatforms() + the default project + the default OKR, clears filters and expanded state, and persists each piece.

5.6 Migration & compatibility

• v10 → v12: reads ffee_console_v10_* and migrates old platforms' status/followUp/notes/links to the "target project" (first the current project, then the project named ffee.me, then proj_ffee, then the first project).
• Legacy materials: migrateLegacyProjects() reads ffee_mats and converts zhName/zhUrl/zhTagline/zhDesc into a single project.
• Channel dedup: dedupePlatforms() merges by platformUrlKey and platformNameKey, keeps non-empty DR/free, and unions custom.

5.7 Privacy & boundaries

• The persistence layer is localStorage only; there is no fetch/XHR uploading of business data.
• Clipboard prefers navigator.clipboard (requires a secure context), falls back to execCommand('copy'), and on further failure prompts manual copy.
• The only external dependencies are the Clarity script and the logo image; noscript explicitly states that JavaScript is required.

6. Step-by-step tutorial

6.1 First launch

1. Open the HYB console in your browser. The current date, weekday, and time are displayed at the top (refreshed every second).
2. Switch between English / Simplified Chinese in the top-right. Switching only changes UI copy, not data.
3. The page has four blocks: Overview (stats + goal), Launch Materials, Growth Channels, and the footer (reset entry).

6.2 Create your first project

1. In the Launch Materials section, click Add project. An empty card is generated, scrolled into view, and the cursor lands in "Product name".
2. Fill in the four fields:
   • Product name: e.g., ffee.me
   • Website: e.g., https://ffee.me/ (the card subtitle shows the host in real time)
   • Tagline: one sentence that says what it is
   • Description: selling points, target users, differentiation
3. Each field has a Copy button for copying that field alone.
4. Copy all in the card's top-right copies in a four-block format in one click:

   [Product Name] …
   [Website] …
   [Tagline] …
   [Description] …

5. Click the chevron on the right of the card to collapse/expand; the state is persisted.
6. To manage multiple products, repeat "Add project". Each project has independent materials, progress, and OKR.
7. To delete a project, click the trash icon; the confirmation dialog warns that "materials, progress, notes, live URLs, and goals will all be removed".

6.3 Pick channels and record progress

1. Scroll to "Growth Channels". Columns: Category / Channel / DR / Project / Status / Follow-up / Live URLs / Notes.
2. Filters (the row above the table header):
   • Search box: type a channel name, URL, or category keyword (140 ms debounce).
   • Project: All projects / a specific project. When a specific project is selected, only its rows are shown.
   • Category, status, fee: combine as needed.
   • DR sort: default / ascending / descending (null always last).
   • Reset filters: clears all conditions in one click.
3. Change status: use the inline dropdown to pick Pending / Launched / Featured / Rejected. Saved immediately.
4. Set a follow-up date: the inline date field. If the date is earlier than today and the status is neither Featured nor Rejected, a black bar appears on the left of the row to mark overdue.
5. Write notes: the inline notes field auto-saves on blur; its placeholder is "Click to add…".
6. Record live URLs:
   • Click the button in the "Live URLs" column to expand the panel; the number on the button is the current live-URL count.
   • Click Add live URL to add a row: URL, title/note, date (defaults to today).
   • The date matters — OKRs count by live-URL date.
   • Each row has a trash icon to delete it.
7. Multiple projects on the same channel: when a channel has multiple projects attached, the table shows a main row + sub-rows, each with independent status/date/notes/live URLs.

6.4 Set a goal and watch progress

1. In the Overview's "Goal" row:
   • Choose a period: this week / this month / this quarter / this year (switching auto-fills the default target: 20/100/300/1000).
   • Enter "Achieve __ distribution points".
   • The right side shows the percentage, progress bar, "X of Y done", and "N days left".
2. Calculation rule: only counts live-URL entries under the current project whose date falls within the current period. Live URLs without a date are not counted.
3. Coaching hints change based on the situation:
   • Target is 0 → prompt to set a target
   • 100% reached → congratulations
   • ≤2 days left and <80% → warning to sprint
   • Time progress > completion +20% → behind schedule
   • Completion > time progress → ahead of schedule
   • Otherwise → steady

6.5 Add a custom channel

1. Click Add channel in the top-right of the channel table.
2. Fill in: channel name (required), URL, category, fee (Free/Paid/Unknown), DR (0–100, optional).
3. If the same name or host already exists, a confirmation dialog appears; confirming adds it as a custom channel (shown with a small "Custom" tag in the table).
4. Custom channels participate in filtering, sorting, and progress tracking just like preloaded ones.

6.6 Edit DR

1. In the DR column, click any DR value (showing DR — means empty).
2. It turns into an input; enter 0–100, Enter to save, Esc to cancel.
3. Invalid values (non-numeric, out of range) are cleared to null.
4. A toast confirms "DR saved: xx" or "DR cleared".

6.7 Export backup & import to restore

Export

1. Click Export in the top-right.
2. Downloads hyb-console-backup-YYYY-MM-DD.json, containing full platforms/projects/progress/okr data.
3. Export after every bulk change and keep multiple copies.

Import

1. Click Import in the top-right and select a JSON file.
2. A confirmation dialog appears: "Importing will overwrite all current channels, project materials, distribution progress, and goal settings".
3. Confirm to replace everything and re-render; a toast shows "Imported: X channels · Y projects".
4. Supports the older flat-array format (migrated into the first project).

6.8 Reset data

1. Click Reset data in the footer.
2. The confirmation dialog warns that "all channel distribution progress, notes, live records, project materials, and goals will be restored to their initial state".
3. Confirming restores the default channel library + default project + default OKR (month/100).

6.9 Suggested daily rhythm

• Before launch: complete the four-field materials → export a backup → filter by category to pick target channels and set their status to "Pending".
• During launch: after each post, change the status to "Launched", set a follow-up date, and record the live URL with a date.
• After launch: check overdue rows (left-side bar) daily; review the OKR progress and coaching hint weekly; switch to "Featured" once a channel features you.
• Weekly: export a JSON with the date in the filename and archive it.

7. Troubleshooting