Skip to content

HuringdaCat/deadline-bloom

Repository files navigation

Deadline Bloom ๐ŸŒธ

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/

Project Dashboard License

โœจ Features

๐Ÿ“Š Project Management

  • 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

โฑ๏ธ Time Tracking

  • 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

๐Ÿ“… Timeline & Planning

  • 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

๐Ÿ“ˆ Analytics & Insights

  • 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

๐Ÿ’พ Data Management

  • 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

๐Ÿš€ Getting Started

Prerequisites

  • Node.js (version 16 or higher)
  • npm or bun package manager
  • Modern web browser (Chrome, Firefox, Safari, Edge)

Installation

  1. Clone the repository

    git clone https://github.com/HuringdaCat/deadline-bloom.git
    cd deadline-bloom
  2. Install dependencies

    npm install
    # or
    bun install
  3. Start the development server

    npm run dev
    # or
    bun dev
  4. 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.

๐Ÿ“– How to Use

Creating Your First Project

  1. Click the "Create New Project" button on the homepage
  2. 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
  3. Click "Create Project" to save

Managing Tasks

  1. Click on any project card to view details
  2. Navigate to the "Tasks" tab
  3. Click "Add Task" to create a new task
  4. Set task priority (Low, Medium, High) and due date
  5. Check tasks off as you complete them
  6. Edit or delete tasks using the menu (โ‹ฎ) button

Using the Pomodoro Timer

  1. Go to the "Timer" tab in the main navigation
  2. Select a project and optionally a specific task
  3. Customize your session length (default: 25 minutes)
  4. Click "Start" to begin your focus session
  5. Take breaks between sessions as prompted
  6. All sessions are automatically logged to your timeline

Viewing Your Timeline

  1. Click the "Timeline" tab to see all events
  2. View past focus sessions, milestones, and deadlines
  3. Filter by event type or project
  4. Track your progress over time

Backing Up Your Data

  1. Navigate to the "Settings" tab
  2. Click "Export Data" to download a JSON backup file
  3. Store this file safely (cloud storage, external drive, etc.)
  4. Use "Import Data" to restore from a backup

Optional: Cloud Sync with Firebase

Want to access your projects from multiple devices? Set up cloud sync:

  1. Follow the Firebase Setup Guide to configure authentication
  2. Go to Settings โ†’ Account & Sync
  3. Click "Sign In / Sign Up"
  4. Create an account or log in
  5. Your data will automatically sync across all signed-in devices

๐ŸŽจ Key Features Explained

Dashboard View

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

Project Details Page

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

Time Tracking Intelligence

  • 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

โš™๏ธ Configuration

Local Storage Only

No configuration needed! Just start using the app.

Firebase Cloud Sync (Optional)

See the detailed SETUP.md file for:

  • Creating a Firebase project
  • Configuring authentication
  • Setting up Firestore database
  • Environment variables setup
  • Security rules

๐Ÿ› ๏ธ Built With

  • 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

๐Ÿ’ก Tips & Best Practices

  1. Set Realistic Deadlines: Give yourself buffer time for unexpected challenges
  2. Break Down Large Projects: Create detailed tasks for better progress tracking
  3. Use Priority Levels: Focus on high-priority tasks first
  4. Regular Backups: Export your data weekly to avoid data loss
  5. Pomodoro Technique: Use 25-minute focus sessions for optimal productivity
  6. Review Timeline Weekly: Check your progress and adjust plans as needed

โ“ FAQ

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.

๐Ÿ“ License

This project is built with Lovable and is available for personal and commercial use.

๐Ÿค Support

If you encounter any issues or have questions:

  1. Check the SETUP.md file for configuration help
  2. Review this README for usage guidance
  3. Open an issue on GitHub for bugs or feature requests

๐ŸŒŸ Acknowledgments


Happy Planning! ๐ŸŽฏ Start tracking your projects and hitting your deadlines today!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages