Built with Electron, React 19, TypeScript, and Tailwind CSS
Clean, modern interface with dark mode support
- Create, Edit & Delete - Full CRUD operations with intuitive UI
- Task Completion - Mark tasks as done with smooth animations
- Bulk Operations - Delete multiple tasks at once
- Smart Sorting - Auto-sort by priority, due date, and overdue status
- Custom Categories - Color-coded categories with visual indicators
- Priority Levels - High, Medium, Low priority with visual cues
- Due Dates - Calendar picker with overdue notifications
- Extra Details - Rich text details with popover display
- Drag & Drop - Reorder active tasks effortlessly
- Dark Mode - System-aware theme switching
- Keyboard Shortcuts - Full productivity shortcuts support
- Animations - Smooth transitions and micro-interactions
- Responsive Design - Adaptive layout for different window sizes
- Persistent Storage - Local file-based storage
- Export Options - JSON (full backup) and CSV (analysis)
- Import Support - Restore from previous exports
- Data Validation - Robust error handling and data integrity
- Multi-language Support - 10 languages included
- Dynamic Language Switching - Change language without restart
- Localized Date Formats - Region-appropriate date displays
- React 19 - Latest React with concurrent features
- TypeScript - Full type safety and IntelliSense
- Tailwind CSS v4 - Utility-first styling with custom design system
- Radix UI - Accessible component primitives
- React Icons - Comprehensive icon library
- Electron 36 - Cross-platform desktop framework
- electron-vite - Fast Vite-powered build system
- electron-builder - Multi-platform packaging
- ESLint - Code quality and consistency
- Prettier - Code formatting
- TypeScript strict mode - Enhanced type checking
- Node.js v18 or higher
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/chiefpansancolt/todo-list-app.git
cd todo-list-app
# Install dependencies
npm install# Start development server with hot reload
npm run dev
# The app will open automatically with:
# - Hot reload for renderer process
# - Automatic restart for main process
# - DevTools enabled# Build for current platform
npm run build:unpack
# Platform-specific builds
npm run build:win # Windows (NSIS installer)
npm run build:mac # macOS (DMG)
npm run build:linux # Linux (AppImage, Snap, Deb)├── app/ # Renderer Process (React App)
│ ├── components/ # React Components
│ │ ├── ui/ # Reusable UI Components (shadcn/ui)
│ │ ├── TodoApp.tsx # Main Application
│ │ ├── TaskItem.tsx # Task Component
│ │ └── TaskModal.tsx # Task Form Modal
│ ├── hooks/ # Custom React Hooks
│ │ └── useTodoStore.ts # State Management
│ ├── styles/ # Styling
│ │ ├── globals.css # Global Styles & Variables
│ │ └── todo.css # Component-specific Styles
│ └── types/ # TypeScript Definitions
│ ├── todo.d.ts # Core Data Types
│ └── props.d.ts # Component Props
├── lib/ # Electron Processes
│ ├── main/ # Main Process
│ │ ├── main.ts # App Entry Point
│ │ ├── app.ts # Window & Menu Management
│ │ └── todoHandlers.ts # IPC Data Handlers
│ └── preload/ # Preload Scripts
│ ├── preload.ts # Context Bridge Setup
│ └── api.ts # IPC API Wrapper
├── locales/ # Internationalization
│ ├── en/ # English Translations
│ └── [lang]/ # Other Languages
├── resources/ # App Resources
│ └── build/ # Build Assets
└── electron.vite.config.ts # Build Configuration
| Shortcut | Action |
|---|---|
Ctrl/Cmd + N |
New Task |
Ctrl/Cmd + T |
Manage Categories |
Ctrl/Cmd + D |
Toggle Dark Mode |
Ctrl/Cmd + Shift + D |
Toggle Delete Mode |
Ctrl/Cmd + I |
Import Data |
Ctrl/Cmd + Shift + E |
Export as JSON |
Escape |
Cancel/Close Modal |
Uses a custom hook pattern with useTodoStore:
- Local state with React hooks
- Persistent storage via IPC
- Optimistic updates with error handling
Secure communication between processes:
contextBridgefor security- Type-safe IPC channels
- Async/await pattern for data operations
React Components → useTodoStore → IPC → Main Process → File System
~/Library/Application Support/Todo List/ (macOS)
%APPDATA%/Todo List/ (Windows)
~/.config/Todo List/ (Linux)
├── tasks.json # Task data
├── categories.json # Category definitions
└── language.json # User preferences
- Create language file in
locales/[lang]/index.ts - Add language to
locales/index.ts - Update menu in
lib/main/app.ts
Modify CSS variables in app/styles/globals.css:
:root {
--primary: oklch(0.623 0.214 259.815);
--background: oklch(1 0 0);
/* ... other variables */
}Follow the established patterns:
- Use TypeScript for all components
- Implement proper accessibility
- Include proper error boundaries
- Add loading states where appropriate
- Windows:
.exeinstaller (NSIS) - macOS:
.dmgdisk image - Linux:
.AppImageand.debpackages
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript strict mode
- Use conventional commit messages
- Add tests for new features
- Update documentation
Data not saving:
- Check app permissions for file system access
- Verify user data directory is writable
For complete changelog, see CHANGELOG.md
If you find this project helpful, consider supporting its development:
Your support helps:
- 🚀 New Features - Continued development and improvements
- 🐛 Bug Fixes - Faster issue resolution and testing
- 📚 Documentation - Better guides and tutorials
- 🌍 Community - Maintaining Discord server and support
MIT License - see LICENSE for details.
- Electron - Cross-platform desktop apps
- React - UI library
- Tailwind CSS - Utility-first CSS
- Radix UI - Accessible components
- shadcn/ui - Component patterns
Built with ❤️ by chiefpansancolt