A modern, responsive task management web application built with React and TypeScript.

• Task Management: Create, read, update, and delete tasks
• Priority Levels: Assign Low, Medium, or High priority to tasks
• Due Dates: Set optional due dates for tasks
• Task Descriptions: Add detailed descriptions to tasks
• Task Completion: Mark tasks as complete/incomplete
• Statistics: View task completion statistics
• Local Storage: All data persists in browser (no server required)
• Responsive Design: Works on desktop, tablet, and mobile
• Dark Mode Ready: Tailwind CSS supports light and dark themes

• Node.js 18+ installed
• npm or yarn package manager

# Clone the repository
git clone https://github.com/YOUR_USERNAME/taskflow-web.git
cd taskflow-web

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 in your browser.

npm run build

The optimized files will be in the dist/ directory.

1. Push to GitHub
2. Connect repository to netlify.com
3. Build command: npm run build
4. Publish directory: dist
5. Deploy!

See DEPLOYMENT.md for detailed deployment instructions.

src/
├── components/          # React components
│   ├── CreateTaskModal.tsx
│   ├── TaskDetailModal.tsx
│   ├── TaskListItem.tsx
│   └── PriorityBadge.tsx
├── context/            # React context for state management
│   └── TaskContext.tsx
├── lib/               # Utilities and types
│   ├── types.ts
│   └── storage.ts
├── App.tsx            # Main app component
├── main.tsx           # Entry point
└── index.css          # Tailwind CSS

# Development
npm run dev              # Start dev server
npm run preview          # Preview production build

# Production
npm run build            # Build for production
npm run build:watch      # Build with watch mode

# Code Quality
npm run lint             # Run ESLint
npm run type-check       # TypeScript type checking

# Testing
npm run test             # Run tests

TaskFlow stores all data in the browser's localStorage. This means:

• ✅ No backend server required
• ✅ All data stays on your device
• ✅ Works offline
• ✅ Instant data persistence

Data is stored under the key taskflow_tasks in localStorage.

Edit tailwind.config.js to customize colors:

theme: {
  extend: {
    colors: {
      primary: '#0a7ea4',
      success: '#22C55E',
      warning: '#F59E0B',
      error: '#EF4444',
    },
  },
}

All components use Tailwind CSS classes. Edit component files to customize styles.

• ✅ All data stored locally in your browser
• ✅ No data sent to external servers
• ✅ No tracking or analytics
• ✅ No user authentication required
• ✅ GDPR and CCPA compliant

• React 19 - UI framework
• TypeScript 5 - Type safety
• Vite 7 - Build tool and dev server
• Tailwind CSS 4 - Utility-first CSS
• Lucide React - Icon library
• localStorage API - Client-side data persistence

• Ensure browser's localStorage is enabled
• Check browser console for errors
• Try clearing cache and reloading

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
npm run build

npm run dev -- --port 3000

This project is open source and available under the MIT License.

Contributions are welcome! Please feel free to submit a Pull Request.

For issues or questions, please create an issue on the GitHub repository.

Built with ❤️ using React and TypeScript

Live Demo: [Add your deployment URL here]