rust_web

111InspirationLiving in Japan, I am constantly inspired by the aesthetic of Zen (禅) and the concept of Ma (negative space). In our modern digital lives, we are bombarded with notifications, complex interfaces, and information overload. I wanted to build a tool that didn't just manage tasks, but actually calmed the mind.The goal was to strip away the non-essential and focus purely on "flow." I envisioned an application that feels less like a spreadsheet and more like a carefully raked rock garden—simple, intentional, and balanced.What it doesZenSync is a minimalist productivity dashboard that prioritizes focus over features.Smart Prioritization: It uses a weighted algorithm to surface only the top 3 tasks you need to focus on right now, hiding the rest to reduce anxiety.Calm UI: A distraction-free interface built with natural color palettes and smooth, fluid animations.AI-Powered Breakdown: Users can input a vague goal (e.g., "Plan a trip to Kyoto"), and the integrated AI agent breaks it down into actionable sub-tasks automatically.How we built itWe utilized a modern, performance-focused stack:Frontend: Built with Vue.js (using TSX for better type safety) and Tailwind CSS for rapid styling.AI Integration (Kiro): This was the core of our development speed. We used Vibe Coding to iteratively design the UI. Instead of writing CSS from scratch, I described the feeling I wanted ("soft shadows, paper-like texture"), and Kiro generated the Tailwind classes perfectly.Backend Logic: We used Supabase for real-time data syncing, ensuring that the "state of zen" is maintained across devices.Tooling: We leveraged Agent Hooks to enforce code quality. A custom hook ran eslint --fix on every save, allowing us to focus on logic rather than formatting.The core productivity algorithm can be described simply as:$$P_{score} = \frac{Importance \times Urgency}{Complexity}$$This ensures that high-impact, low-complexity tasks bubble to the top.Challenges we ran intoThe biggest challenge was restraint. In software development, the temptation is always to add more.Feature Creep: We constantly had to fight the urge to add "just one more button." We solved this by strictly adhering to a "One Click Rule"—if an action takes more than one click, it needs to be rethought.AI Hallucinations: When using MCP to connect to our database, the AI initially struggled with some complex foreign key relationships. We overcame this by creating a robust steering.md document that clearly defined our schema constraints.Accomplishments that we're proud ofThe Velocity: We went from a blank canvas to a working MVP in under 48 hours, largely thanks to the pair-programming capabilities of Kiro.The Design: Achieving a UI that feels "native" and responsive on the web was a huge win. The drag-and-drop interactions feel incredibly physical and satisfying.What we learnedBuilding ZenSync taught us that AI is not just a code generator, but a design partner. By communicating our vision clearly through natural language, we could iterate on design concepts much faster than moving pixels in Figma. We also learned the importance of Spec-Driven Development—writing a clear specification file first made the AI's output exponentially more accurate.What's next for ZenSyncWe plan to introduce "Zen Mode," a full-screen focus timer that blocks other browser tabs, and we are looking into porting the application to Rust/Tauri to create a lightweight, native desktop experience with an even smaller memory footprint.

Built With

• javasrcipt
• node.js
• rust