Local-first Electron and React contact manager for group-based email workflows.
SmartCard is a lightweight desktop contact manager built with Electron and React. It stores contacts locally (no cloud) and lets users build recipient groups quickly, then launch targeted email drafts via their default mail client.
Key highlights:
- Desktop-first, privacy-first: local JSON storage, no sync required
- Group-based recipient selection with active/inactive toggles
- Fast “Send Email” flow that opens the system mail client
- Compact, animated UI tuned for small windows
01. The Challenge
The challenge was designing a desktop workflow that makes group-based email preparation fast without sacrificing clarity or privacy. I had to simplify contact management, state transitions, and micro-interactions within a compact Electron interface.
Design Process
Users juggle contacts across tools yet still scramble to assemble accurate recipient lists. Cloud sync adds friction and privacy concerns. The goal: a fast, local-first desktop app that keeps grouping and sending frictionless.
Three-page flow to reduce cognitive load:
- contact list with search/filters,
- focused contact editor,
- group-based recipient selection with a live send preview.
Contacts live in a local JSON file ({ id, name, email, group, active }) stored in Electron’s userData directory. The main process handles file I/O and import/export dialogs; React manages UI state via IPC. Local-first keeps it private and offline-ready.
A short video demonstrating the app in use
Specs
Cross-platform desktop build with local JSON storage, import/export flows, and a polished UI. Video walkthrough and flow diagrams capture the interaction and data model.
Design Objectives
- Keep grouping and sending frictionless for compact windows
- Maintain privacy with local-first storage
- Clear active/inactive states and fast recipient preview
- Consistent motion and theming across light/dark
Final Output
- Electron + React app with import/export backup
- Group-based mailto launch with recipient chips
- Data flow + UI flow artifacts for handoff
- Demo video of core flows and interactions
