Taskify is a sleek, modern task management application built with React and TypeScript. It features a beautiful UI with drag-and-drop functionality, allowing users to efficiently manage their tasks.
- Create, edit, and delete tasks
- Mark tasks as complete/incomplete
- Drag and drop tasks between active and completed sections
- Clear all tasks in a section with one click
- Keyboard shortcuts for efficient task editing
- Modern, responsive design
- Beautiful glassmorphism effect
- Smooth animations and transitions
- Intuitive drag-and-drop interface
- Mobile-friendly layout
- Built with React and TypeScript
- Drag and drop functionality using react-beautiful-dnd
- Responsive design with CSS media queries
- Font Awesome icons for visual elements
- Custom favicon and styling
- Node.js (v14.0.0 or higher)
- npm (v6.0.0 or higher)
- Clone the repository:
git clone https://github.com/yourusername/taskify.git
cd taskify- Install dependencies:
npm install- Start the development server:
npm startThe application will be available at http://localhost:3000.
- Type your task in the input field at the top
- Press Enter or click the add button to create the task
- Complete a Task:
- Drag the task to the completed section, or
- Click the checkmark button on the task
- Edit a Task:
- Click the edit button (pencil icon)
- Make your changes
- Press Enter or click the checkmark to save
- Press Escape to cancel
- Delete a Task:
- Click the trash button on the task
- Clear All Tasks:
- Click the trash icon in the section header
- Click and hold any task to start dragging
- Drag to the desired position or section
- Release to drop the task
- Frontend Framework: React
- Language: TypeScript
- Styling: CSS3 with modern features
- Drag and Drop: react-beautiful-dnd
- Icons: Font Awesome
- Font: Neucha (Google Fonts)
Taskify is fully responsive and works on:
- Desktop computers
- Tablets
- Mobile phones
The layout automatically adjusts based on screen size:
- Desktop: Two-column layout
- Mobile: Single-column layout with stacked sections
The application uses a modern color scheme:
- Primary Blue: #2f74c0
- Success Green: #4CAF50
- Danger Red: #ff6b6b
- Background: Linear gradient from #2f74c0 to #1a4b8c
- Glassmorphism effect for containers
- Smooth transitions and animations
- Custom hover effects
- Shadow effects for depth
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.