MemoFlow

📝 MemoFlow

Offline-first Volatile Planner

MemoFlow is a personal productivity tool designed around a simple assumption:
notes are meant to be written quickly and deleted without hesitation.

Rather than positioning notes as long-term assets, MemoFlow defines writing as
a temporary aid for organizing thoughts in the present moment.

The product intentionally avoids being:

as heavy as Notion,
as structurally deep as Obsidian,
while aiming to be as immediate and frictionless as a sticky note.

Project Background — The Need for “Lightness”

This project originated from two core frustrations experienced while using Notion.

Data Ownership

Personal notes were always stored on external servers.
Even private, short-lived thoughts depended on third-party infrastructure,
which felt excessive and unnecessary for such a minimal use case.

Structural Overhead

Even trivial notes—on the scale of a sticky memo—required: pages, links, hierarchy, and deliberate structural decisions.
The cognitive cost of “how to write” outweighed the act of writing itself.

What I needed was not a comprehensive knowledge management system,
but the smallest possible memo tool—accessible anywhere via a browser,
and disposable by design.

As analog tools were inconvenient to manage and digital tools overly complex,
the conclusion was clear: build a minimal tool tailored to this exact gap.

From this point, Offline-first naturally became the core design principle.

Problems Addressed

Reducing Writing Fatigue Caused by Feature Overload

→ Memo / Todo / Note / Draft

Instead of a single generic note type, content was intentionally divided by intent.
This eliminated the need to decide how to write before writing,
resulting in a structure that guides usage implicitly.

Zero-Learning-Curve UX

→ Floating Action Entry + Type Selection

The app is usable immediately after launch.
A minimal onboarding tutorial is available, but writing can begin without reading instructions.
The interaction model prioritizes muscle memory over explanation.

Eliminating Network Dependency

→ Local-first Data Model + PWA Caching

All core functionality works regardless of network state.
Offline and online experiences are intentionally identical,
removing uncertainty from the user’s mental model.

Scalable Hybrid App Architecture

→ Single Web Codebase + Capacitor

The application maintains a unified web-centric architecture,
while remaining deployable as an Android app via Capacitor.
This ensured platform expansion without fragmenting UI logic or state models.

Technical Decision Rationale

TypeScript
Used to explicitly define memo data models and state boundaries,
ensuring long-term maintainability as features scale.
Storybook
Adopted as a UI architecture tool rather than a showcase.
Enabled isolated component verification, documentation,
and fast feedback without page-level dependencies.
React
Chosen for its suitability in modeling memo-type-specific UIs
and managing predictable state flows through composable components.
Tailwind CSS
Selected to minimize runtime CSS overhead
and to enable rapid UI iteration with a utility-first approach.
PWA (Progressive Web App)
Implemented to deliver near-native usability on the web.
Service Worker–based caching guarantees operability in offline environments.
Capacitor
Preferred over React Native Expo due to architectural simplicity
and its alignment with a web-first application philosophy.
LocalStorage API
Used as the primary data store to provide instant responsiveness
without introducing server-side complexity.

Outcome

MemoFlow is designed to move away from the mindset that
“everything must be preserved.”

Instead, it focuses on keeping only what is necessary right now
and letting the rest disappear naturally.

The v2 renewal emphasized removal and alignment over feature expansion.

Balancing two goals—

a structure that can be clearly explained as a portfolio project, and
a tool that remains genuinely usable every day—

was the central architectural challenge of this project.

📝 MemoFlow: Simple Memo & Volatile Planner

English

한국어

"Fast to Record, Light to Manage" A volatile planner designed for instant memos and short-term scheduling without complex features.
Experience seamless continuity across Android, Windows, and Web using Google Drive synchronization.

🔹 Service Concept

MemoFlow aims for 'lightness,' distinguishing itself from heavy calendars or bloated note-taking apps.

Short-term Focus: Perfect for managing volatile schedules that you record and delete quickly.
Tetris Design: A minimalist UI concept that reduces visual fatigue with a clean, block-style interface.
Offline First: Record instantly without a network connection using @capacitor/filesystem and localStorage, and sync when online.

🚀 Key Features

1. Multi-Platform Support

Mobile: Native experience on Android (powered by Capacitor 8).
Desktop: Standalone software for Windows (powered by Electron 23) and PWA support.
Web: Immediate access and usage through any modern web browser.

2. Smart Sync & Backup

Google Drive Sync: Secure data synchronization and continuity using your personal Google Drive—no separate server required.
Flexible Export/Import: Export data in JSON, Markdown, or HTML formats, and restore via JSON import.

3. Modern UI/UX & Quality

Tailwind CSS 4.0: High-performance styling with the latest engine and a minimalist "Tetris-inspired" design.
Storybook 8: UI reliability ensured through component documentation and Interaction Testing (Play functions).
MSW: Robust verification of network scenarios using Mock Service Worker for API mocking.

📈 Version Log (via Storybook)

Explore the evolution of our components through the following Chromatic links:

Initial Version : UI Atom-level design.
v1.0.1 : Implementation of page-level documentation.
v2.0.0 : Full interaction testing applied.
v2.0.2 : onboard tutorial + App edge + App Back Exit UX

📦 Installation & Setup

# 1. Clone the repository
git clone [https://github.com/yoonjonglyu/memo.git](https://github.com/yoonjonglyu/memo.git)

# 2. Install dependencies
yarn install

# 3. Configure environment variables (Create .env file)
# GOOGLE_CID=your_google_client_id
# GOOGLE_DEV_KEY=your_google_developer_key

# 4. Run scripts
yarn dev      # Launch Web development server
yarn dev:pc   # Launch Electron desktop app
yarn storybook # Launch UI component test environment
yarn build    # Production build (outputs to dist folder)

📁 Project Structure

src/
├── components/     # Common UI & Atom components
├── features/       # Main domain components (Memo, Setting)
├── hooks/          # Core domain logic & custom hooks
├── mocks/          # MSW handlers & mock data
├── providers/      # Modal & Context configurations
├── store/          # Recoil-based state models
├── index.css       # Tailwind 4 global styles
electron/           # Electron main/preload process settings
android/            # Capacitor-based Android native project

🚀 Recommended For...

✔ Users who prefer writing quick notes and deleting them immediately. ✔ Managing short-term schedules and goals. ✔ Those looking for a lightweight memo tool instead of a complex calendar app.

📌 Go to MemoFlow → 🔗Project Link

🤝 Contributing

This project was developed for a personal portfolio and as a productivity tool. We welcome code reviews, feature suggestions, and bug reports through Issues!

Author: ISA (@yoonjonglyu)

← Back to Archive Github Web