TaskTiles is a minimalist, bento box-style todo application that helps you prioritize your day through visual task management. Instead of endless task lists, TaskTiles limits you to three key tasks - small, medium, and large - helping you focus on what truly matters.
- Visual Priority Management: Organize tasks in a beautiful bento grid layout
- Size-Based Prioritization: Three task sizes for different priority levels
- 🟨 Small: Quick wins and minor tasks
- 🟧 Medium: Standard priority tasks
- 🟦 Large: Major focus areas and important projects
- Persistent Storage: Tasks automatically save to localStorage
- Responsive Design: Works seamlessly on desktop and mobile devices
- Minimalist Interface: Clean, distraction-free UI focused on your priorities
- Quick Editing: Easy to add, edit, and mark tasks as complete
- Node.js 18+ installed on your machine
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/yourusername/tasktiles.git
cd tasktiles- Install dependencies:
npm install
# or
yarn install- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser
- Next.js 14 - React Framework
- TypeScript - Type Safety
- Tailwind CSS - Styling
- Lucide React - Icons
- Local Storage - Data Persistence
TaskTiles uses a carefully selected color palette that's both aesthetically pleasing and functional:
- Small Tasks:
#F4A261(Warm Salmon) - Medium Tasks:
#e9c46a(Mellow Yellow) - Large Tasks:
#94d1ee(Soft Blue) - Accent:
#2A9D8F(Teal)
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a 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
- Focus on Priority: Use the large tile for your most important task of the day
- Time Management: Consider using small tiles for tasks under 30 minutes
- Daily Reset: Start each day fresh by marking completed tasks and setting new ones
- Progressive Flow: Try completing the small task first to build momentum
- Dark mode support
- Task categories/tags
- Task completion statistics
- Export/import tasks
- Multiple task boards
- Custom color themes
- Task reminders
TaskTiles is fully responsive and works great on mobile devices. The layout automatically adjusts to provide the best experience across all screen sizes:
- Mobile: Single column layout
- Tablet: Two-column grid
- Desktop: Full three-column bento grid
This project is licensed under the MIT License - see the LICENSE.md file for details.
Made with ❤️ by Rohit Purkait