Year in Pixels - Mood Tracker

A React-based web application for tracking daily moods throughout the year using a visual "Year in Pixels" format. Track your mood with a simple Red-Amber-Green (RAG) system and visualize your year at a glance.

Features

🎨 Visual Mood Tracking

• Year in Pixels Grid: 12 columns (months) × 31 rows (days) visual layout
• RAG System: Simple 3-color mood tracking (Red, Amber, Green)
• Interactive Cells: Click to cycle through moods or use paint mode for bulk editing
• Today Highlight: Current date is highlighted when viewing the current year

✨ User Experience

• Drag Painting: Select a color and drag across multiple days for quick entry
• Responsive Design: Works on desktop, tablet, and mobile devices
• Dark Mode Support: Automatic dark/light theme adaptation
• Print Friendly: Built-in print functionality for physical copies

💾 Data Management

• Local Storage: All data persists locally in your browser
• Export Options: Download your data as JSON or CSV
• Import Support: Upload previously exported JSON files
• Year Navigation: Switch between different years with preserved data

⚙️ Customization

• Toggle Day Numbers: Show/hide day numbers in cells
• Compact Mode: Reduced spacing for smaller displays
• Show/Hide Legend: Toggle mood color legend display
• Year Reset: Clear all entries for the current year

Quick Start

Local Development

1. Clone and Install

   git clone <repository-url>
   cd mood_tracker
   npm install
   

2. Start Development Server

   npm run dev
   

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

3. Build for Production

   npm run build
   npm run preview
   

Docker Deployment

Using Docker Compose (Recommended)

docker-compose up -d

Access the app at http://localhost:8080

Using Docker directly

docker build -t mood-tracker .
docker run -p 8080:80 mood-tracker

How to Use

1. Set Your Year: Use the year selector to choose the year you want to track
2. Track Your Mood: Click on any day to cycle through moods (Empty → Green → Amber → Red → Empty)
3. Paint Mode: Select a color from the paint palette and drag across multiple days for quick entry
4. View Stats: See your mood summary (count of Green, Amber, Red days) at the top
5. Export Data: Save your progress as JSON or CSV files
6. Import Data: Upload previously exported JSON files to restore data

Mood Colors

• Green: Good/positive mood days
• Amber: Neutral/okay mood days
• Red: Difficult/negative mood days
• Gray: No entry/untracked days

Technology Stack

• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• Data Storage: Browser localStorage
• Deployment: Docker with Nginx

Browser Compatibility

• Modern browsers with ES2020+ support
• Chrome/Edge 80+, Firefox 72+, Safari 13.1+
• Mobile browsers (iOS Safari, Chrome Mobile)

Data Privacy

• 100% Local: All mood data is stored locally in your browser
• No Server: No data is sent to external servers
• Export Control: You control your data with export/import features
• No Analytics: No tracking or analytics included

File Structure

mood_tracker/
├── src/
│   ├── App.tsx                      # Main app component
│   ├── YearInPixelsMoodTracker.tsx  # Core mood tracker component
│   ├── main.tsx                     # React app entry point
│   └── index.css                    # Global styles
├── public/                          # Static assets
├── Dockerfile                       # Multi-stage Docker build
├── docker-compose.yml              # Docker Compose configuration
├── nginx.conf                      # Nginx configuration
├── package.json                    # Dependencies and scripts
└── vite.config.ts                  # Vite build configuration

Contributing

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

License

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