Emolit
Emotion-journaling app: pixel-faithful Figma-to-Flutter build
Emolit helps people understand, express and grow through their feelings, an emotion-journaling app translated 1:1 from a detailed Figma design system into Flutter, with editorial typography (Playfair Display + Lora) and a breathing-exercise entry ritual. Currently in development: the full frontend and state architecture are built, with the API layer staged for backend integration.
The Problem
Most journaling apps ask 'how do you feel?' and offer five emoji. Emolit's design is built around an emotion-word taxonomy (helping users find precise language for feelings), and the engineering challenge was translating that unusually rich design system into Flutter without losing fidelity or structure.
The Solution
A feature-wise MVC + Riverpod architecture: immutable state models, intent-driven controllers (views never touch repositories), and passive ConsumerWidget views. The full journaling loop is implemented (guided onboarding, a mood-spectrum discovery search over the emotion-word taxonomy, a calendar 'soul timeline', bookmarks, and a breathing 'preparing' screen before each entry), with a Dio API client and auth-token interceptor already in place so the backend snaps in without restructuring.
Architecture
- Feature-wise MVC with Riverpod: model (immutable state) → controller (Notifier with intent methods) → view (passive ConsumerWidgets)
- Clean core/shared/features layout with a shared EmotionWord/EmotionCore domain model
- Dio ApiClient with auth-token interceptor and session persistence, staged for backend wiring
- Design-token theming faithful to the Figma system: editorial serif typography, mood-spectrum color language
Challenges & How I Solved Them
Design fidelity as an engineering constraint
Every screen was built against the Figma source with a token-first approach: spacing, type scale and mood colors live in the theme layer, so pixel-faithfulness survives refactors instead of depending on hand-tuned widgets.
My Contributions
- Entire frontend: architecture, all feature flows, design system implementation
Impact
- Complete design-to-code translation of a full product design system
- API-ready architecture: backend integration requires no restructuring
Lessons Learned
Design-to-code quality is an architecture question: tokens and intent-driven controllers made pixel-fidelity durable, not decorative.