📋 Task Tracker

A beautiful, feature-rich task tracking application with notebook-style design, weekly planning view, and time-of-day organization.

✨ Features

📊 Weekly Summary

• 7-day week view in a clean columnar layout
• All days visible at once - no scrolling needed
• Color-coded day headers (Today, Tomorrow, Future)
• Real-time task completion from summary
• Quick progress tracking

📝 Notebook-Style Design

• Lined paper aesthetic with authentic notebook feel
• Handwritten "Kalam" font for a personal touch
• Blue horizontal lines and red margin
• Classic cream paper color
• Each task on its own line

⏰ Time-of-Day Organization

Organize tasks by when you'll do them:

• 🌅 Morning - Early tasks and routines
• ☀️ Afternoon - Midday activities
• 🌙 Evening - Night tasks and wind-down

📅 Day & Category Management

• Multiple categories (Work, Personal, Shopping, etc.)
• Date selection for any day
• Automatic grouping by day and time
• Task counts per category, day, and time slot

🎨 Beautiful UI

• Built with shadcn/ui components
• Modern gradient designs
• Smooth animations and transitions
• Fully responsive layout
• Dark mode ready (CSS variables included)

💾 Data Persistence

• LocalStorage - All tasks save automatically
• Works offline
• No backend required
• Privacy-first approach

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/Heather-testux/task-tracker.git
cd task-tracker

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser: Navigate to http://localhost:3000

📖 How to Use

Getting Started

1. Switch to "My Tasks" tab to create categories
2. Add a category (e.g., "Work", "Personal")
3. Select a date and time for your task
4. Add tasks to your categories
5. Switch to "Weekly Summary" tab to see your week

Weekly Summary Tab

• View all 7 days side by side
• See tasks organized by morning, afternoon, evening
• Check off completed tasks directly
• Review your week at a glance

My Tasks Tab

• Create and manage categories
• Add tasks with specific dates and times
• Edit or delete tasks
• Organize with notebook-style interface

🎯 Key Concepts

Three-Level Organization

1. Category - What area of life (Work, Personal, etc.)
2. Day - When to do it (Today, Tomorrow, specific date)
3. Time - What part of day (Morning, Afternoon, Evening)

Example Workflow

Morning Planning:

1. Open app → Weekly Summary shows automatically
2. Review today's tasks across all categories
3. Check off items as you complete them

Adding New Tasks:

1. Switch to "My Tasks" tab
2. Pick category, date, and time of day
3. Add your task
4. Return to Weekly Summary to see it in the week view

🛠️ Tech Stack

• React 18 - UI library
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first styling
• shadcn/ui - Beautiful, accessible UI components
• LocalStorage API - Data persistence
• Kalam Font - Handwritten typography

📂 Project Structure

task-tracker/
├── src/
│   ├── components/
│   │   ├── ui/              # shadcn/ui components
│   │   ├── Category.jsx     # Category card with tasks
│   │   ├── DailySummary.jsx # Weekly summary view
│   │   └── TaskItem.jsx     # Individual task component
│   ├── hooks/
│   │   └── useLocalStorage.js # Persistence hook
│   ├── lib/
│   │   └── utils.js         # Utility functions
│   ├── App.jsx              # Main app with tabs
│   ├── main.jsx             # Entry point
│   └── index.css            # Global styles + notebook styling
├── public/
├── package.json
├── vite.config.js
├── tailwind.config.js
└── README.md

🎨 Customization

Change Paper Color

Edit src/index.css:

.notebook-paper {
  background-color: #fffef7; /* Change this color */
}

Change Line Color

Edit src/index.css:

background-image: 
  linear-gradient(transparent, transparent 39px, #d1e3f8 39px, ...);
  /* Change #d1e3f8 to your preferred line color */

Add New Category Colors

Edit src/components/DailySummary.jsx in the getCategoryColor() function.

📚 Documentation

Detailed documentation available in the repo:

• ARCHITECTURE.md - Technical architecture
• NOTEBOOK-STYLING.md - Notebook paper design
• DAY-ORGANIZATION.md - Day-based organization
• TIME-OF-DAY.md - Time slot features
• DAILY-SUMMARY.md - Weekly summary details
• SHADCN-INTEGRATION.md - UI components
• QUICKSTART.md - Quick reference guide

🌟 Features Showcase

Notebook Paper Design

Tasks appear on authentic-looking lined paper with:

• Horizontal blue lines (40px spacing)
• Red vertical margin line
• Cream paper background
• Handwritten font

Weekly Summary

7-column layout showing:

• Day headers with color coding
• Time-of-day sections in each column
• Task completion checkboxes
• Category badges

Time Organization

Three time slots per day:

• Morning (🌅) - 6am-12pm typical
• Afternoon (☀️) - 12pm-6pm typical
• Evening (🌙) - 6pm-12am typical

🤝 Contributing

This is a personal project, but suggestions are welcome! Feel free to:

• Open issues for bugs or feature requests
• Fork and experiment
• Share your customizations

📝 License

MIT License - Feel free to use this project for your own task tracking needs!

🙏 Acknowledgments

• shadcn/ui - Beautiful component library
• Radix UI - Accessible primitives
• Tailwind CSS - Utility-first CSS framework
• Google Fonts (Kalam) - Handwritten typography

📧 Contact

Created by @Heather-testux

🎉 About This Project

Built as a learning project to explore:

• React state management
• Component composition
• Local storage patterns
• UI/UX design
• Responsive layouts
• shadcn/ui integration

Perfect for:

• Daily task planning
• Weekly organization
• Time blocking
• Personal productivity
• Project management

---

Start organizing your tasks beautifully! 📓✨