MemoFlow
Loading resources...
If the screen stays blank, please try refreshing.
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:
This project originated from two core frustrations experienced while using Notion.
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.
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.
→ 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.
→ 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.
→ 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.
→ 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.
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.
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—
was the central architectural challenge of this project.
"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.
MemoFlow aims for 'lightness,' distinguishing itself from heavy calendars or bloated note-taking apps.
@capacitor/filesystem and localStorage, and sync when online.| Category | Tech Stack |
| :--------------- | :----------------------------------------------------- |
| Core | React 18, Recoil (State Management), Babel |
| Styling | Tailwind CSS 4, Styled-components, FontAwesome 6 |
| Build & Tool | Webpack 5 |
| Platform | Capacitor 8 (Android), Electron 23 (Desktop) |
| Testing | Storybook 8, MSW, React Testing Library |
Explore the evolution of our components through the following Chromatic links:
# 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)
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
├── services/ # heavy domain logic Services
├── index.css # Tailwind 4 global styles
electron/ # Electron main/preload process settings
android/ # Capacitor-based Android native project
✔ 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(Web) → 🔗Project Link 📌 Go to MemoFlow(Android) → 🔗AppStore Link
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)
License: MIT Licensed. Copyright © 2026 ISA.