🚀 Productivity MVP

A comprehensive productivity application built with Next.js, featuring an integrated agenda, Kanban board, Pomodoro timer, and personal diary system. Designed to help you organize your day, track your tasks, and maintain personal well-being.

✨ Features

📅 Agenda Tab

• Dual Calendar View: Monthly and daily Google Calendar integration
• Resizable Panels: Customize your workspace with draggable dividers
• Easy Setup: Simple iframe configuration for Google Calendar
• Responsive Design: Optimized for all screen sizes

⚡ Productivity Tab

• Time Box System: Organize your day with structured time blocks
• Top Priorities: Focus on what matters most with priority management
• Brain Dump: Capture thoughts and ideas quickly
• Kanban Board: Visual task management with drag-and-drop functionality
• Pomodoro Timer: Built-in focus sessions with break reminders
• Analytics Dashboard: Track your productivity patterns over time

📖 Diary Tab

• Daily Journaling: Capture thoughts, feelings, and experiences
• Mood & Energy Tracking: Monitor your well-being with 5-point scales
• Smart Suggestions: AI-powered recommendations based on your mood and energy
• Historical Analysis: View trends and patterns in your entries
• Export Functionality: Save your diary entries for backup

🎨 Additional Features

• Dark/Light Theme: Toggle between themes for comfortable viewing
• Motivational Bar: Daily inspiration and motivation
• Global Timer: Keep track of active Pomodoro sessions
• Notification Settings: Customize alerts and reminders
• Local Storage: All data persists locally in your browser

🛠️ Tech Stack

• Framework: Next.js 14.2.25 with App Router
• Language: TypeScript 5
• Styling: Tailwind CSS 4.1.9
• UI Components: Radix UI primitives
• Icons: Lucide React
• Charts: Recharts for analytics
• Drag & Drop: React Beautiful DnD
• State Management: Zustand
• Form Handling: React Hook Form with Zod validation
• Date Handling: date-fns

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository ```bash git clone https://github.com/yourusername/productivity-mvp.git cd productivity-mvp ```

2. Install dependencies ```bash npm install

   or

   yarn install

   or

   pnpm install ```

3. Run the development server ```bash npm run dev

   or

   yarn dev

   or

   pnpm dev ```

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

📖 Usage Guide

Setting up Google Calendar Integration

1. Go to your Google Calendar
2. Click on Settings → Settings for my calendars
3. Select your calendar → Integrate calendar
4. Copy the iframe embed code
5. In the app, click the settings icon and paste the iframe URL
6. Save your configuration

Using the Kanban Board

1. Add tasks using the input field in the Productivity tab
2. Drag tasks between columns: Backlog → To Do → In Progress → Done
3. Use the Brain Dump section to quickly capture ideas
4. Convert priorities to Kanban cards with one click

Pomodoro Timer

1. Navigate to the Pomodoro tab in Productivity
2. Click Start to begin a 25-minute focus session
3. Take a 5-minute break when the timer ends
4. After 4 cycles, take a longer 15-30 minute break

Personal Diary

1. Go to the Diary tab
2. Rate your mood and energy levels (1-5 scale)
3. Write about your day, thoughts, or experiences
4. View analytics and insights about your well-being trends

🎨 Customization

The app uses a comprehensive design system with:

• Semantic color tokens for consistent theming
• Responsive breakpoints for all screen sizes
• Accessible components with proper ARIA labels
• Smooth animations and transitions

📱 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Radix UI for accessible component primitives
• Lucide for beautiful icons
• Tailwind CSS for utility-first styling
• Vercel for deployment platform

📞 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Check the documentation
• Join our community discussions

---

Built with ❤️ using Next.js and modern web technologies