CrackTheLemon

CrackTheLemon

Personal Project  ·  Jun – Jul 2026  ·  v1.0.4
Personal Electron + React Custom Gift AI-Assisted Development

My Role
Design & Development
Stack
Electron, React, TailwindCSS, DaisyUI, Tiptap
Tools
Claude AI, Figma, Git Hub
Status
Private · Available on Request · v1.0.4

CrackTheLemon is a customizable, category-based memo app built as a birthday gift for a close friend (Lemon) — designed around exactly how they wanted to write and organize their notes, not for a general audience. Built with Electron and React with Claude AI as a development partner, it went through five released versions shaped almost entirely by real, ongoing feedback from its one user.

Background · 01
Why I Built This

My friend wanted a memo app they could truly make their own — customizable categories, color coding, tags, and a look they could decorate themselves. So instead of designing for a general audience, I designed for one specific person.

Process · 02
One User, Several Layouts

One decision came first: always-on-top on desktop, or synced across devices? Since my friend mainly worked at their desk, we kept it simple — desktop-only.

In a one-hour session, I walked through 8 hand-sketched layout options. Rather than picking one outright, we combined pieces from several — the category sidebar from one, the split editor from another — into a layout that matched exactly what they needed.

Layout sketches
Fig.1: 8 hand-sketched layout options, each explored before combining elements into the final layout
Features · 03
Key Features
Custom categories — add, color-code, and reorder via drag-and-drop
Split panel editor — view and edit multiple notes side by side
Hashtag tagging — tag notes and search by tag
Auto-backup — automatic snapshots with recovery in settings
14 custom themes — plus custom banners for a personalized look
CrackTheLemon main interface
Fig.2: Category tabs, tagging, and the split panel editor in use
Custom banners
Fig.3: Custom banners — from a plain background to a full scene, in a few clicks
Theme options
Fig.4: 9 of 14 built-in themes
Iteration · 04
Built Through Real Feedback

CrackTheLemon evolved through a tight feedback loop with its one real user — every version addressed something they'd actually run into.

v1.0.0 — First Release
Custom categories, drag-to-reorder, tagging, and the first split panel editor

v1.0.2 – v1.0.3 — Feedback-Driven Fixes
Fixed a hashtag bug that dropped the "#" on a space · Fixed pasted text adding stray line breaks · Added a custom font file as the new default · Added a close-all-notes button · Added an auto-backup system with recovery · Added crash-protection screen (ErrorBoundary)

v1.0.4 — Final Polish
Fixed a spellcheck complaint · Reworked the banner/grid layout for easier decorating · Added sorting by recent, oldest, and alphabetical order
v1.0.0 features
Fig.5: v1.0.0 — categories, tagging, and the first split panel editor

v1.0.2 to v1.0.3 changes
Fig.6: v1.0.2 → v1.0.3 — feedback-driven fixes and stability improvements

v1.0.4 main screen
Fig.7: v1.0.4 — reworked grid layout and note sorting
Takeaway

CrackTheLemon wasn't about building features for "most users" — it was about solving one real person's pain point through design. That shift in scale changed how I approached every decision, and pushed me to grow as a designer in a way that designing for a general audience never had.

← Back to Projects