https://github.com/simplearyan/zen-todo
🍃 ZenTodo
https://github.com/simplearyan/zen-todo
react-typescript vite-app
Last synced: 5 days ago
JSON representation
🍃 ZenTodo
- Host: GitHub
- URL: https://github.com/simplearyan/zen-todo
- Owner: simplearyan
- Created: 2026-02-13T06:04:31.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-13T06:17:01.000Z (5 months ago)
- Last Synced: 2026-02-13T13:48:41.713Z (5 months ago)
- Topics: react-typescript, vite-app
- Language: TypeScript
- Homepage: https://simplearyan.github.io/zen-todo/
- Size: 139 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍃 ZenTodo
[](https://github.com/simplearyan/zen-todo/actions/workflows/deploy.yml)
[](https://simplearyan.github.io/zen-todo/)
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.
[✨ Live Demo](https://simplearyan.github.io/zen-todo/)
---
## 🎨 Premium Design System
- **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.
## 🚀 Key Features
- **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.
## 🛠️ Built With
- **React 19**
- **TypeScript**
- **Vite** (Build Tool)
- **Zustand** (State Management)
- **Framer Motion** (Animations)
- **Lucide React** (Icons)
- **vite-plugin-pwa** (Progressive Web App)
## 📦 Getting Started
1. **Clone the repo**
```bash
git clone https://github.com/simplearyan/zen-todo.git
```
2. **Install dependencies**
```bash
npm install
```
3. **Run development server**
```bash
npm run dev
```
4. **Build for production**
```bash
npm run build
```
---
*Made with ❤️ by [simplearyan](https://github.com/simplearyan)*