A modern, feature-rich todo application built with React, TypeScript, and Tailwind CSS. Features comprehensive user authentication, advanced todo management, dark/light themes, responsive design, and local data persistence using IndexedDB.
- User Registration & Login: Secure email/password authentication with validation
- Remember Me: Optional persistent login sessions
- Form Validation: Real-time email format and password strength validation
- Session Management: Automatic session restoration and secure logout
- Full CRUD Operations: Create, read, update, and delete todos
- Rich Todo Details:
- Title and description
- Due dates with overdue indicators
- Priority levels (High, Medium, Low) with visual indicators
- Multiple tags per todo
- Category assignment
- Smart Completion: Toggle completion status with smooth animations
- Inline Editing: Click-to-edit functionality for quick updates
- Default Categories: Work, Home, Fun categories included
- Custom Categories: Create, edit, and delete custom categories
- Color-Coded: 10 preset colors for visual organization
- Category Management: Full category CRUD with usage warnings
- Multiple Tags: Add unlimited tags to todos for flexible organization
- Multi-Filter System: Filter by category, priority, and completion status
- Full-Text Search: Search across titles, descriptions, and tags
- Smart Combinations: Combine multiple filters for precise results
- Clear Filters: One-click filter reset
- Real-Time Results: Instant filtering as you type
- Dark/Light Mode: Toggle between themes with system preference detection
- Responsive Design: Mobile-first approach with collapsible sidebar
- View Modes: Switch between list and card layouts
- Smooth Animations: Fade-in, slide-in, and bounce effects throughout
- Progress Tracking: Visual progress bar and completion statistics
- Mobile Optimized: Touch-friendly interface with hamburger menu
- Collapsible Sidebar: Automatic collapse on mobile with overlay
- Touch Gestures: Tap outside to close, swipe-friendly interactions
- Responsive Layout: Optimized for all screen sizes
- Mobile Menu: Hamburger menu for easy navigation
- IndexedDB Storage: Robust local database with full offline support
- User Isolation: Complete data separation between users
- Real-Time Updates: Instant synchronization across app components
- Data Integrity: Automatic error handling and recovery
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/KoldBrewEd/todo-app
cd todo-app- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildThe built files will be in the dist directory.
- Sign Up: Create a new account with your email and password
- Sign In: Log in to access your personal todo dashboard
- Theme Selection: Toggle between light/dark mode using the theme button
- Add Your First Todo: Click the "Add Todo" button to create your first task
- Create Todos: Click "Add Todo" and fill in details (title, description, category, priority, due date, tags)
- Edit Todos: Click the edit icon (✏️) on any todo to modify it
- Complete Todos: Click the checkbox to mark todos as complete/incomplete
- Delete Todos: Click the trash icon (🗑️) to remove todos
- Organize: Assign categories and add multiple tags for better organization
- Default Categories: Work, Home, and Fun categories are pre-created
- Add Categories: Click the "+" button next to "Categories" in the sidebar
- Edit Categories: Use the category manager to rename and recolor categories
- Delete Categories: Remove unused categories (with usage warnings)
- Smart Search: Use the search bar to find todos by title, description, or tags
- Multi-Filter: Combine category, priority, and status filters
- View Modes: Switch between list and card layouts
- Mobile Menu: Use the hamburger menu (☰) on mobile devices
- Progress Tracking: Monitor completion percentage with the progress bar
- Mobile Responsive: Optimized touch interface with collapsible sidebar
- Quick Actions: Tap outside modals to close, intuitive touch gestures
- Keyboard Friendly: Tab navigation and Enter key shortcuts in forms
- Frontend: React 18 with TypeScript for type safety and modern React features
- Styling: Tailwind CSS with custom animations and dark mode support
- Icons: Lucide React for beautiful, consistent iconography
- Database: IndexedDB for robust local storage and offline capability
- Build Tool: Vite for fast development and optimized builds
- Date Handling: date-fns for reliable date formatting and manipulation
- State Management: React Context API for global state management
- Routing: Single-page application with conditional rendering
src/
├── components/
│ ├── auth/ # Authentication components
│ ├── layout/ # Layout components (Sidebar)
│ ├── todos/ # Todo-related components
│ └── Dashboard.tsx # Main dashboard
├── contexts/ # React Context providers
├── types/ # TypeScript type definitions
├── utils/ # Utility functions (database)
└── App.tsx # Main application component
- Simple email/password authentication
- Password hashing for security
- Session persistence with "Remember Me"
- User isolation - each user sees only their data
- Users: Email, creation date
- Categories: Name, color, user association
- Todos: Title, description, priority, due date, tags, category, completion status
- Uses IndexedDB for robust local data storage
- Automatic database initialization and schema management
- Efficient querying with indexes
- Chrome/Edge: Full support
- Firefox: Full support
- Safari: Full support
- Mobile browsers: Responsive design works on all modern mobile browsers
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.