AI asisted smart notepad
A premium, mobile-first AI notes app that turns messy raw thoughts into structured notes, todos, and lists, built with Next.js 15, an editorial design system, and physics-based micro-interactions throughout.
Overview
Why this project mattered.
Context
What problem it's solving.
A premium, mobile-first AI notes app that turns messy raw thoughts into structured notes, todos, and lists, built with Next.js 15, an editorial design system, and physics-based micro-interactions throughout.
Balancing information density with a calm, uncluttered editorial aesthetic.
Architecture
How the system was structured.
The implementation prioritized simplicity, maintainability, and predictable performance over unnecessary complexity.
Interface
User interactions and presentation.
Application
Business logic and orchestration.
Services
Processing and integrations.
Storage
Persistence and retrieval.
Engineering
Key decisions.
Built a from-scratch design token system (color, radius, shadow, easing) instead of using default component styling.
Implemented swipe/delete with optimistic removal plus a toast-based undo window rather than confirmation dialogs.
Standardized on a shared set of spring constants (stiffness/damping) reused across headers, toolbars, cards, and sheets.
Iterated the visual language against Apple, Linear, and Stripe Press references rather than default shadcn output.
Process
Challenges and trade-offs.
Challenge
Balancing information density with a calm, uncluttered editorial aesthetic.
Resolution
Built a from-scratch design token system (color, radius, shadow, easing) instead of using default component styling.
Challenge
Making destructive actions (delete) feel safe without adding friction.
Resolution
Implemented swipe/delete with optimistic removal plus a toast-based undo window rather than confirmation dialogs.
Challenge
Keeping every micro-interaction physically consistent across dozens of components.
Resolution
Standardized on a shared set of spring constants (stiffness/damping) reused across headers, toolbars, cards, and sheets.
Challenge
Achieving a premium, non-templated feel without a large design team.
Resolution
Iterated the visual language against Apple, Linear, and Stripe Press references rather than default shadcn output.
Reflection
Lessons learned.
- 01
A consistent motion language (shared spring constants) matters more to perceived quality than any single flashy animation.
- 02
Optimistic UI plus undo beats confirmation modals for destructive actions in a notes app.
- 03
Design tokens defined early make theming and later redesigns dramatically cheaper.
- 04
Self-hosting fonts early avoids fragile network-dependent dev environments.
Interested in similar work?
I enjoy building thoughtful, maintainable products and solving problems through engineering.