A modern, offline-first Progressive Web App for managing your daily tasks with smart reminders and beautiful UI.
- ✅ Install on mobile (Android/iOS) and desktop
- ✅ Works completely offline
- ✅ App-like experience with no browser UI
- ✅ Add to home screen functionality
- ✅ Auto-updates in the background
- ⏰ Customizable task reminders
⚠️ Overdue task alerts (30 min after due time)- 🔕 Configurable notification settings
- 📳 Sound and vibration support
- 🌐 Works on Android and iOS
- ✏️ Create tasks with title, description, and due dates
- 🎯 Set priority levels (Low, Medium, High)
- 🏷️ Organize by categories (Work, Personal, Health, etc.)
- ⏰ Smart reminder suggestions based on priority
- ✅ Mark tasks as complete or postpone
- 🗑️ Delete tasks easily
- 📊 Weekly progress chart
- 📈 Completion rate tracking
- 🎯 Task statistics
- 📅 Task history view
- 🎉 Motivational feedback
- 💿 All data stored locally
- 🔄 No internet required after installation
- ⚡ Instant loading
- 🔒 Your data stays on your device
- 🌐 Works everywhere, even on planes
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview- Open in Chrome/Edge
- Tap "Install App" button or browser menu
- Confirm installation
- Find on home screen
- Open in Safari (required)
- Tap Share → Add to Home Screen
- Name the app
- Tap Add
- Open from home screen
📖 See INSTALL.md for detailed installation instructions
- Tap the + button
- Enter task title and optional description
- Set due date and time
- Choose priority (High/Medium/Low)
- Select category
- Enable Smart Reminder for automatic reminder time
- Edit reminder time if needed
- Tap Create Task
- Complete: Tap the circle icon
- Postpone: Tap the clock icon
- Delete: Tap the trash icon
- Tasks are grouped into: Overdue, Today, Upcoming, Backlog
- Analytics: Tap pie chart icon for stats
- History: Tap calendar icon to see completed tasks
- Settings: Tap gear icon to configure notifications
- React 18 with TypeScript
- Vite for blazing fast builds
- Framer Motion for smooth animations
- React Router for navigation
- date-fns for date handling
- Lucide React for beautiful icons
- vite-plugin-pwa with Workbox
- Service Worker for offline support
- Web App Manifest for installation
- Local Storage for data persistence
- Notification API for push notifications
- CSS Variables for theming
- Glassmorphism design pattern
- Dark Mode native support
- Mobile-first responsive design
src/
├── components/ # Reusable UI components
│ ├── BottomNav.tsx # Bottom navigation bar
│ ├── TaskCard.tsx # Individual task display
│ ├── CreateTaskModal.tsx # Task creation modal
│ ├── InstallPWA.tsx # PWA install prompt
│ └── Layout.tsx # App layout wrapper
├── pages/ # Route pages
│ ├── Home.tsx # Main dashboard
│ ├── Stats.tsx # Analytics page
│ ├── History.tsx # Completed tasks
│ └── Settings.tsx # App settings
├── hooks/ # Custom React hooks
│ ├── useTasks.ts # Task CRUD operations
│ └── useNotificationSettings.ts # Notification config
├── services/ # Business logic
│ └── notificationService.ts # Notification handling
├── types/ # TypeScript types
│ └── index.ts # Shared types
├── App.tsx # Root component
├── main.tsx # Entry point
└── index.css # Global styles
public/
├── icon.svg # App icon (SVG)
├── pwa-192x192.png # PWA icon (small)
├── pwa-512x512.png # PWA icon (large)
└── apple-touch-icon.png # iOS icon
All data is stored locally on your device:
- Tasks: localStorage (
taskflow_tasks) - Notification Settings: localStorage (
taskflow_notification_settings) - No external servers: Complete privacy
- No tracking: Your data stays with you
- Export/Import: Future feature planned
- Checks for reminders every 10 seconds
- Sends notification at scheduled time
- Sends overdue alert 30 min after due time
- Uses Service Worker for reliability
- Works even when app is in background (on Android)
Access via Settings page:
- ✅ Enable/disable all notifications
- ✅ Toggle task reminders
- ✅ Toggle overdue alerts
- ✅ Control sound & vibration
📖 See NOTIFICATIONS.md for detailed notification guide
- ✅ Chrome (Android, Desktop)
- ✅ Edge (Android, Desktop)
- ✅ Safari (iOS, macOS)
- ✅ Brave (Android, Desktop)
⚠️ Firefox (PWA features limited)- ❌ Internet Explorer (not supported)
- Node.js 18+ and npm
- Modern browser
No environment variables needed - works out of the box!
# Development (with hot reload)
npm run dev
# Production build
npm run build
# Preview production
npm run preview
# Type check
npx tsc --noEmit- Service Worker caches all assets
- App works without internet
- Data persists locally
- Fast loading times
- Add to home screen on mobile
- Desktop installation support
- Native app-like experience
- No app store required
- Service Worker checks for updates
- Installs in background
- Activate on next launch
- No manual updates needed
- Mobile-first: Optimized for phone usage
- Dark Mode: Easy on the eyes
- Glassmorphism: Modern, premium feel
- Animations: Smooth, delightful interactions
- Accessibility: Clear hierarchy and contrast
- ✅ No data collection
- ✅ No analytics
- ✅ No external requests
- ✅ Everything stored locally
- ✅ Open source (you can verify)
Future features planned:
- Task categories customization
- Recurring tasks
- Task templates
- Data export/import
- Multiple themes
- Widget support (Android)
- Siri shortcuts (iOS)
- Desktop notifications
- Task sharing
MIT License - feel free to use and modify!
Contributions welcome! Please:
- Fork the repository
- Create feature branch
- Make your changes
- Test thoroughly
- Submit pull request
Having issues? Check:
- INSTALL.md - Installation guide
- NOTIFICATIONS.md - Notification setup
Built with ❤️ using React, TypeScript, and PWA technologies
Stay organized. Stay productive. TaskFlow.