A beautiful, feature-rich task management and note-taking application built with React and Tailwind CSS, featuring a sophisticated wine-themed design system.

• Create & Organize Tasks - Full CRUD operations with categories and priorities
• Smart Filtering - Filter by status, priority, due date, category, and starred items
• Multiple Views - Switch between grid and list layouts
• Priority System - High, Medium, and Low priority with visual indicators
• Due Date Tracking - Calendar integration with overdue alerts
• Progress Tracking - Visual progress bars and completion statistics
• Search - Instant search across all tasks with keyboard shortcuts

• Rich Notes - Create detailed notes with titles and content
• Color Coding - 7 color themes for visual organization
• Categories - Organize notes by Work, Personal, Ideas, Journal, etc.
• Starred Items - Mark important notes for quick access
• Archive System - Keep your workspace clean without deleting
• Full-Text Search - Search through note titles and content

• Dark/Light Themes - Beautiful themes with automatic system detection
• Keyboard Shortcuts - Ctrl+K for search, Ctrl+N for new task, ESC to close
• Responsive Design - Optimized for desktop, tablet, and mobile
• Smooth Animations - Delightful micro-interactions throughout
• Toast Notifications - Elegant feedback for all actions
• Data Persistence - Auto-save to localStorage with cross-tab sync

• Today's Focus - See your tasks for today at a glance
• Progress Visualization - Track completion rates and statistics
• Quick Stats - Overview of pending, completed, and overdue items
• Recent Notes - Quick access to your latest thoughts
• Smart Alerts - Overdue task warnings and upcoming reminders

• React 18 - Modern React with hooks
• Vite - Lightning-fast build tool and dev server
• Tailwind CSS 3 - Utility-first CSS framework
• Lucide React - Beautiful icon library
• Context API - State management for themes
• LocalStorage - Client-side data persistence

• Node.js 16+ and npm/yarn
• Modern web browser

1. Clone the repository:

git clone https://github.com/Sagarika311/taskflow-app.git cd taskflow-app

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to http://localhost:5173

npm run build

The production-ready files will be in the dist folder.

npm run preview

taskflow-app/ ├── public/ # Static assets ├── src/ │ ├── components/ # React components │ │ ├── Dashboard.jsx │ │ ├── TasksView.jsx │ │ ├── NotesView.jsx │ │ ├── CalendarView.jsx │ │ ├── Sidebar.jsx │ │ ├── SearchBar.jsx │ │ ├── TaskModal.jsx │ │ ├── NoteModal.jsx │ │ └── Toast.jsx │ ├── contexts/ # React contexts │ │ └── ThemeContext.jsx │ ├── data/ # Static data │ │ └── categories.js │ ├── hooks/ # Custom hooks │ │ └── useLocalStorage.js │ ├── utils/ # Utility functions │ │ ├── colors.js │ │ └── helpers.js │ ├── styles/ # CSS files │ │ └── custom.css │ ├── App.jsx # Main app component │ └── main.jsx # Entry point ├── index.html ├── package.json ├── tailwind.config.js ├── vite.config.js └── README.md 

The wine color palette can be customized in tailwind.config.js:

colors: { wine: { 500: '#ec4899', // Base wine color 600: '#db2777', // Medium wine 700: '#be185d', // Darker wine // ... more shades } }

Add or modify categories in src/data/categories.js:

export const categories = [ { id: 1, name: 'Work', icon: Briefcase, color: 'from-red-900 to-red-800', description: 'Professional tasks' }, // Add more categories... ];

• Ctrl/Cmd + K - Focus search bar
• Ctrl/Cmd + N - Create new task
• ESC - Close modal/dialog
• Tab - Navigate between fields
• Enter - Submit form

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Check browser's localStorage is enabled
• Clear browser cache and reload
• Check browser console for errors

• Clear localStorage: localStorage.clear()
• Check system dark mode settings
• Try a hard refresh (Ctrl+Shift+R)

• Clear old archived tasks
• Limit number of active tasks
• Disable animations in browser settings

This project is licensed under the MIT License - see the LICENSE file for details.

• Design inspiration from Todoist, Notion, and Apple Notes
• Icons by Lucide
• Wine color palette inspired by modern minimalism
• Built with Vite and Tailwind CSS

• GitHub: @Sagarika311
• Email: sagarikabhagat311@gmail.com
• Portfolio: sagarika-portfoliowebsite.netlify.app

If you find this project helpful, consider:

• Starring the repository
• Sharing with others
• Contributing code or ideas
• Reporting bugs and issues

Built with ❤️ by Sagarika

Last updated: 2025 "# Modern-Task-Note-Management-App"