A powerful project planning and time tracking application to help you manage your projects, track time spent on tasks, and meet your deadlines with confidence.
Live Demo: https://smart-project-board.netlify.app/
- Create & Organize Projects: Set up projects with descriptions, deadlines, and status tracking
- Task Management: Break down projects into manageable tasks with priorities and due dates
- Progress Tracking: Visual progress bars and status indicators for projects and tasks
- Status Management: Track projects as Active, Paused, Completed, or Overdue
- Pomodoro Timer: Built-in focus timer with customizable work/break intervals
- Time Logging: Automatically track time spent on projects and tasks
- Session History: View all your focus sessions in the timeline
- Project Time Analytics: See total time invested in each project
- Visual Timeline: See all your project milestones and deadlines at a glance
- Event Types: Track milestones, deadlines, meetings, reviews, and presentations
- Status Indicators: Quickly identify upcoming, overdue, and completed events
- Chronological View: Timeline sorted by date for easy planning
- Dashboard Overview: See active projects, completion rates, and time statistics
- Weekly Time Tracking: Monitor your time investment week by week
- Project Statistics: View detailed metrics for each project
- Task Completion Rates: Track your productivity over time
- Local Storage: All data automatically saved to your browser
- Export/Import: Backup your data as JSON files
- Cloud Sync (Optional): Sign in to sync data across devices with Firebase
- Data Privacy: Your data stays local unless you choose to sync
- Node.js (version 16 or higher)
- npm or bun package manager
- Modern web browser (Chrome, Firefox, Safari, Edge)
-
Clone the repository
git clone https://github.com/HuringdaCat/deadline-bloom.git cd deadline-bloom -
Install dependencies
npm install # or bun install -
Start the development server
npm run dev # or bun dev -
Open your browser Navigate to
http://localhost:5173(or the port shown in your terminal)
That's it! The app will work with local storage immediately. No additional setup required.
- Click the "Create New Project" button on the homepage
- Fill in the project details:
- Title: Give your project a clear name
- Description: Describe what the project is about
- Deadline: Set a target completion date
- Status: Choose Active, Paused, or Completed
- Click "Create Project" to save
- Click on any project card to view details
- Navigate to the "Tasks" tab
- Click "Add Task" to create a new task
- Set task priority (Low, Medium, High) and due date
- Check tasks off as you complete them
- Edit or delete tasks using the menu (โฎ) button
- Go to the "Timer" tab in the main navigation
- Select a project and optionally a specific task
- Customize your session length (default: 25 minutes)
- Click "Start" to begin your focus session
- Take breaks between sessions as prompted
- All sessions are automatically logged to your timeline
- Click the "Timeline" tab to see all events
- View past focus sessions, milestones, and deadlines
- Filter by event type or project
- Track your progress over time
- Navigate to the "Settings" tab
- Click "Export Data" to download a JSON backup file
- Store this file safely (cloud storage, external drive, etc.)
- Use "Import Data" to restore from a backup
Want to access your projects from multiple devices? Set up cloud sync:
- Follow the Firebase Setup Guide to configure authentication
- Go to Settings โ Account & Sync
- Click "Sign In / Sign Up"
- Create an account or log in
- Your data will automatically sync across all signed-in devices
The main dashboard shows:
- All your active and paused projects
- Quick stats: total projects, active projects, completed projects
- Total time spent and weekly time tracking
- Quick access to start timers for any project
Each project has its own page with:
- Detailed task list with status and priority
- Project-specific timeline events
- Quick timer for focused work sessions
- Progress visualization and metrics
- Sessions are automatically recorded when you complete a Pomodoro timer
- Time is attributed to both the project and specific task (if selected)
- View your total investment in each project
- Track your productivity patterns
No configuration needed! Just start using the app.
See the detailed SETUP.md file for:
- Creating a Firebase project
- Configuring authentication
- Setting up Firestore database
- Environment variables setup
- Security rules
- React - UI framework
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Styling
- shadcn/ui - UI component library
- Firebase - Authentication and cloud sync (optional)
- date-fns - Date manipulation
- Recharts - Data visualization
- React Router - Navigation
- Set Realistic Deadlines: Give yourself buffer time for unexpected challenges
- Break Down Large Projects: Create detailed tasks for better progress tracking
- Use Priority Levels: Focus on high-priority tasks first
- Regular Backups: Export your data weekly to avoid data loss
- Pomodoro Technique: Use 25-minute focus sessions for optimal productivity
- Review Timeline Weekly: Check your progress and adjust plans as needed
Q: Where is my data stored?
A: By default, all data is stored in your browser's local storage. If you enable cloud sync, it's also backed up to Firebase.
Q: Can I use this without an internet connection?
A: Yes! The app works completely offline with local storage. Cloud sync requires internet.
Q: What happens if I clear my browser data?
A: You'll lose your local data unless you've exported a backup or enabled cloud sync.
Q: Can I access my projects on multiple devices?
A: Yes, if you set up Firebase cloud sync and sign in on each device.
Q: Is my data private?
A: Yes. Local data never leaves your device. Cloud sync data is only accessible to your authenticated account.
Q: Can I export my data?
A: Absolutely! Go to Settings โ Export Data to download a JSON backup file.
Q: What's the maximum number of projects I can create?
A: There's no hard limit, but performance may vary based on browser storage capacity.
This project is built with Lovable and is available for personal and commercial use.
If you encounter any issues or have questions:
- Check the SETUP.md file for configuration help
- Review this README for usage guidance
- Open an issue on GitHub for bugs or feature requests
Happy Planning! ๐ฏ Start tracking your projects and hitting your deadlines today!