ProjectTracker Web-App

A modern, responsive time-tracking application built with React, Vite, and Firebase, using an AI-accelerated workflow. This application allows users to log time entries for different projects, visualize their time distribution, and manage project colors.

->Try it out: https://projecttracker-a2365.web.app/

Screenshot

Features

Time Tracking

• Log Time: Add time entries with a project name, duration, and description.
• History: View a list of all pastime entries, sorted by date.
• Delete: Remove incorrect entries with a double-click confirmation safety mechanism.

Visualization & Analytics

• Interactive Pie Chart: Visualize how your time is distributed across different projects.
• Filtering: Click on a project in the chart or list to filter the view to only that project.
• Total Time: Automatic calculation of total hours worked (overall or per project).

Customization

• Dynamic Colors: Projects are automatically assigned distinct, consistent colors using a Golden Angle algorithm.
• Manual Color Assignment: Users can manually override any project's color using the built-in color picker. Preferences are saved to the database.

Architecture

• Scalable Codebase: Built with a component-based architecture and Context API for global state management.
• Real-time Database: Uses Firebase Firestore for real-time data synchronization.
• Authentication: Anonymous authentication via Firebase Auth.

Tech Stack

• Frontend: React 19, Vite
• Styling: Tailwind CSS, Lucide React (Icons)
• Backend: Firebase (Firestore, Auth)
• State Management: React Context API

Installation & Setup

1. Prerequisites:

   • Node.js (v18 or higher)
   • npm
   • A Firebase project

2. Clone the Repository:

   git clone <repository_url>
   cd ProjectTracker

3. Install Dependencies:

   npm install

4. Firebase Setup:

   • Create a new project in the Firebase Console.
   • Enable Firestore Database and Authentication (enable "Anonymous" provider).
   • Register a new Web App in your Firebase project.
   • Copy the Firebase configuration object.

5. Environment Variables:

   • Create a .env file in the root directory based on .env.example:

     cp .env.example .env

   • Fill in your Firebase credentials in the .env file.

6. Run Locally:

   npm run dev

   The app will be available at http://localhost:5173.

7. Run Tests (Optional):

   npm run test:clumping

   This verifies the project color generation algorithm.

Future Expansions

Here are some ideas for scaling and upgrading the project in the future:

1. User Accounts & Teams

• Email/Password Login: Upgrade from anonymous auth to full user accounts so data persists across devices.
• Team Features: Allow multiple users to join a "Team" and view shared project stats.

2. Advanced Reporting

• Export Data: Add functionality to export time logs as CSV or PDF for invoicing.
• Weekly/Monthly Views: Add a calendar view or bar charts to show progress over time (not just total distribution).

3. Project Management

• Project Budgets: Set a maximum hour budget for a project and show warnings when approaching the limit.
• Hourly Rates: Assign an hourly rate to projects to calculate earnings.

4. Mobile App

• PWA Support: Turn the web app into a Progressive Web App (PWA) for better mobile experience.
• React Native: Port the codebase to React Native for a native iOS/Android app.

Deployment

The project is configured for easy deployment via Firebase Hosting.

1. Build the project:

   npm run build

2. Deploy:

   firebase deploy

   (Note: You need the Firebase CLI installed and logged in)

License

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