131 lines
4.4 KiB
Markdown
131 lines
4.4 KiB
Markdown
# 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**
|
||
```bash
|
||
git clone <repository-url>
|
||
cd mood_tracker
|
||
npm install
|
||
```
|
||
|
||
2. **Start Development Server**
|
||
```bash
|
||
npm run dev
|
||
```
|
||
Open [http://localhost:5173](http://localhost:5173) in your browser.
|
||
|
||
3. **Build for Production**
|
||
```bash
|
||
npm run build
|
||
npm run preview
|
||
```
|
||
|
||
### Docker Deployment
|
||
|
||
**Using Docker Compose (Recommended)**
|
||
```bash
|
||
docker-compose up -d
|
||
```
|
||
Access the app at [http://localhost:8080](http://localhost:8080)
|
||
|
||
**Using Docker directly**
|
||
```bash
|
||
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](LICENSE). |