ZenTodo is a premium, high-performance task management application built with React, TypeScript, and a custom Vanilla CSS design system. Inspired by the simplicity of Microsoft To Do and the organization of Trello boards.
- Glassmorphism: Sophisticated blurs and semi-transparent surfaces using RGB color tokens.
- Comfort Dark Mode: A softer slate-grey palette (
#141415) designed for reduced eye strain and a premium aesthetic. - Advanced Motion: Physics-based animations via Framer Motion, including fluid list reordering and staggered entrance effects.
- Typography: Integrated Inter for UI clarity and Outfit for elegant display headings.
- Dual View Modes: Seamlessly toggle between a clean List View and a horizontal Board View (Kanban).
- Subtask Management: Break down complex tasks into nested checklists with real-time progress tracking.
- Persistence: Local-first architecture using Zustand with automatic LocalStorage synchronization.
- PWA Ready: Offline support with service workers and manifest configuration for a native app feel.
- Responsive & Accessible: Fully optimized for mobile, tablet, and desktop with a native-style mobile drawer.
- React 19
- TypeScript
- Vite (Build Tool)
- Zustand (State Management)
- Framer Motion (Animations)
- Lucide React (Icons)
- vite-plugin-pwa (Progressive Web App)
-
Clone the repo
git clone https://github.com/simplearyan/zen-todo.git
-
Install dependencies
npm install
-
Run development server
npm run dev
-
Build for production
npm run build
Made with ❤️ by simplearyan