KaryaLog is more than just a to-do app—it's your daily sanctuary for productivity and peace. Built with a dreamy pixel-art aesthetic in soft pink gradients, it helps you organize your day while taking care of your mental wellbeing.

Karya (कार्य) means "work" or "task" in Hindi/Sanskrit, reflecting the app's purpose as your personal work companion.

• ✅ Add, complete, and delete tasks with ease
• 💾 Persistent storage—your tasks stay even after refresh
• 🎯 Clean, distraction-free interface
• 📊 Real-time task completion tracking

• 🎧 8 curated calm music tracks (Lofi, Piano, Jazz, Nature Sounds)
• ▶️ Real YouTube music integration
• 🎚️ Animated equalizer bars
• ⏯️ Play/Pause controls with auto-advance
• 🖼️ Dynamic album covers that change with songs

• 😀 Track your daily mood with emoji selector
• 📅 Daily mood logging
• 🎨 Visual representation of how you're feeling

• 📬 One inspiring message per day
• ✨ Beautiful envelope animation
• 📆 7 unique messages (one for each day of the week)
• 💖 Motivational and uplifting content
• 🌟 Modal with blur effect

• 📝 Quick note-taking area
• 💾 Auto-saves as you type
• 💭 Perfect for thoughts, reminders, or journaling

• 🕹️ Retro pixel font (Press Start 2P)
• 🌸 Soft pink gradient theme (#E3BFC3 & #DD7A83)
• ⭐ Floating pixel decorations (stars, hearts, clouds, diamonds)
• ✨ Smooth animations and transitions
• 📱 Fully responsive design

Beautiful pixel-art interface with smooth pink gradients

┌─────────────────────────────────────────────────────────┐
│  📝 Tasks          │  😊 Mood    │  🎵 Music           │
│  ┌──────────────┐  │  ┌────────┐ │  ┌───────────────┐ │
│  │              │  │  │ 😊😌😐 │ │  │   🎹          │ │
│  │  Your Tasks  │  │  │        │ │  │               │ │
│  │              │  │  │ 😔😴   │ │  │   ▶️ ⏸️       │ │
│  └──────────────┘  │  └────────┘ │  └───────────────┘ │
│                    │              │                     │
│                    │  💌 Daily Message                  │
│                    │  ┌──────────────────────────────┐ │
│                    │  │    Click for inspiration!    │ │
│                    │  └──────────────────────────────┘ │
│                    │                                    │
│                    │  📓 Notes for the Day              │
│                    │  ┌──────────────────────────────┐ │
│                    │  │  Write your thoughts...      │ │
│                    │  └──────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

• Node.js 16+
• npm or yarn

# Clone the repository
git clone https://github.com/yourusername/karyalog.git

# Navigate to project directory
cd karyalog

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 in your browser 🎉

npm run build
npm run preview

React 19

Vite

JavaScript

CSS3

Key Libraries:

• react-youtube - YouTube IFrame API integration
• localStorage - Client-side data persistence
• Google Fonts (Press Start 2P) - Pixel font

karyalog/
├── 📁 public/
│   └── favicon.svg              # Custom pixel checkmark favicon
├── 📁 src/
│   ├── 📁 components/
│   │   ├── MusicPlayer.jsx      # 🎵 YouTube music integration
│   │   ├── MusicPlayer.css
│   │   ├── MoodTracker.jsx      # 😊 Daily mood selection
│   │   ├── MoodTracker.css
│   │   ├── DailyMessage.jsx     # 💌 Inspirational messages
│   │   ├── DailyMessage.css
│   │   ├── Notes.jsx            # 📓 Note-taking component
│   │   └── Notes.css
│   ├── App.jsx                  # Main app component
│   ├── App.css                  # Global styles & layout
│   ├── index.css                # Base styles
│   └── main.jsx                 # Entry point
├── index.html                   # HTML template
├── package.json                 # Dependencies
├── vite.config.js              # Vite configuration
├── DEPLOYMENT.md               # Deployment guide
└── README.md                   # You are here!

/* 🌸 Primary Pink Gradient */
Light Pink:  #E3BFC3  /* Background, soft accents */
Dark Pink:   #DD7A83  /* Borders, text, buttons */

/* 🎯 Accents */
White:       #FFFFFF  /* Cards, input fields */
Beige:       #F5F5DC  /* Alternative background */

KaryaLog features real music playback using the YouTube IFrame API:

All music plays in the background with a hidden player for a seamless experience.

KaryaLog adapts beautifully to any screen size:

All your data stays private and local:

• ✅ Tasks stored in browser localStorage
• 📝 Notes auto-saved locally
• 😊 Mood tracking per day
• 💌 Message open state tracked daily
• 🔐 No server, no tracking, no accounts needed

npm install -g vercel
vercel

npm install -g netlify-cli
netlify deploy --prod

npm install --save-dev gh-pages

Add to package.json:

"homepage": "https://yourusername.github.io/karyalog",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

Then run: npm run deploy

See DEPLOYMENT.md for detailed instructions.

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your 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

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

• 🎮 Pixel art inspiration from retro gaming aesthetics
• 🎵 Music provided via YouTube
• 🔤 Press Start 2P font by Google Fonts
• ⚛️ React community for amazing tools
• 🌸 All the productivity apps that inspired this project

• 🌙 Dark mode toggle
• 🏷️ Custom task categories with colors
• 📊 Weekly mood statistics & charts
• ⏱️ Pomodoro timer integration
• 🎯 Task priority levels (High/Med/Low)
• 📄 Export tasks as PDF/CSV
• 🎶 Custom music playlist support
• 🌍 Multi-language support (Hindi, Spanish, French)
• 📱 Progressive Web App (PWA)
• ☁️ Optional cloud sync
• 🎨 Theme customization
• 📅 Calendar view for tasks

• YouTube music may be blocked in some countries
• Ad blockers might interfere with music playback
• Requires internet connection for music

Having issues? Questions?

• 📧 Email: your.email@example.com
• 🐛 Report Bug
• 💡 Request Feature