Skip to content

noumanic/Trackify

BranchesTags

Repository files navigation

🎯 Trackify - Enterprise-Grade Time Tracking Solution

Version PHP MySQL License

Professional time tracking application with modern UI/UX, real-time analytics, and enterprise-grade features. Built for Feys Media demonstration.

Trackify Hero

📸 Screenshots

Landing Projects & Tasks Time Tracking
Trackify Landing Project & Task Management Time Tracking
Dashboard & Reports About Trackify
Dashboard & Reports About Trackify

✨ Key Features

🚀 Core Functionality

  • ⏱️ Real-Time Timer - Precision time tracking with live updates
  • 📊 Advanced Dashboard - Comprehensive analytics and reporting
  • 📁 Project Management - Unlimited projects and task organization
  • 📝 Manual Time Entry - Flexible time logging with date/time controls
  • 🎯 Smart Filtering - Daily, weekly, monthly, yearly, and custom date ranges

🎨 Premium UI/UX

  • 🌙 Dark/Light Theme - Professional theme switching with smooth transitions
  • 📱 Responsive Design - Perfect on desktop, tablet, and mobile devices
  • ⚡ Loading Animations - Beautiful animated loading screen with progress indicators
  • ✨ Modern Interface - Elegant gradients, shadows, and micro-interactions
  • 🎭 Button Effects - Premium hover effects with shine animations

🏗️ Technical Excellence

  • 🗄️ RESTful API - Complete PHP backend with CRUD operations
  • 🔐 Secure Database - MySQL with proper relationships and indexing
  • 📈 Performance Optimized - Fast loading and smooth animations
  • 🔧 Modular Architecture - Clean, maintainable code structure

🛠️ Technology Stack

Component Technology Version
Frontend Vanilla JavaScript ES6+
Styling Modern CSS3 Latest
Backend PHP 8.0+
Database MySQL 8.0+
Architecture RESTful API -

📐 Architecture & Flow Diagrams

Diagrams use a dark theme for clarity. Rendered by GitHub from Mermaid.

User Workflow

%%{init: {'theme':'dark', 'themeVariables': { 'primaryColor':'#1e293b','primaryTextColor':'#f1f5f9','primaryBorderColor':'#475569','lineColor':'#64748b','secondaryColor':'#0f172a','tertiaryColor':'#334155'}}}%%
flowchart LR
    subgraph Entry[" "]
        A[🏠 Landing]
    end
    subgraph Setup[" "]
        B[📁 Select Project]
        C[📋 Select Task]
    end
    subgraph Track[" "]
        D[⏱️ Start Timer]
        E[📝 Manual Entry]
    end
    subgraph Report[" "]
        F[📊 Dashboard & Reports]
    end
    A --> B --> C --> D --> F
    C --> E --> F
    D --> F
Loading

System Architecture

%%{init: {'theme':'dark', 'themeVariables': { 'primaryColor':'#1e293b','primaryTextColor':'#f1f5f9','primaryBorderColor':'#475569','lineColor':'#64748b','secondaryColor':'#0f172a','tertiaryColor':'#334155'}}}%%
flowchart TB
    subgraph Client["Frontend"]
        UI[HTML / CSS / JS]
        UI --> |fetch| API
    end
    subgraph Server["Backend"]
        API[REST API<br/>PHP]
        API --> P[projects.php]
        API --> T[tasks.php]
        API --> TE[time_entries.php]
        API --> R[report.php]
    end
    subgraph Data["Data Layer"]
        DB[(MySQL)]
    end
    P --> DB
    T --> DB
    TE --> DB
    R --> DB
Loading

Database Entity Relationship

%%{init: {'theme':'dark', 'themeVariables': { 'primaryColor':'#1e293b','primaryTextColor':'#f1f5f9','primaryBorderColor':'#475569','lineColor':'#64748b','secondaryColor':'#0f172a','tertiaryColor':'#334155'}}}%%
erDiagram
    PROJECTS ||--o{ TASKS : "has"
    PROJECTS ||--o{ TIME_ENTRIES : "tracks"
    TASKS ||--o{ TIME_ENTRIES : "tracks"
    PROJECTS {
        int id PK
        string name
        datetime created_at
    }
    TASKS {
        int id PK
        int project_id FK
        string name
        datetime created_at
    }
    TIME_ENTRIES {
        int id PK
        int project_id FK
        int task_id FK
        datetime start_time
        datetime end_time
        int duration
        datetime created_at
    }
Loading

API Request Flow

%%{init: {'theme':'dark', 'themeVariables': { 'primaryColor':'#1e293b','primaryTextColor':'#f1f5f9','primaryBorderColor':'#475569','lineColor':'#64748b','secondaryColor':'#0f172a','tertiaryColor':'#334155'}}}%%
sequenceDiagram
    participant U as User / Browser
    participant F as Frontend (app.js)
    participant A as API (PHP)
    participant D as MySQL
    U->>F: Create project / Start timer / Filter report
    F->>A: GET/POST /api/projects.php, tasks.php, time_entries.php, report.php
    A->>D: Prepared SQL
    D-->>A: Result set
    A-->>F: JSON response
    F-->>U: Update UI / Show message
Loading

📁 Project Structure

Trackify/
│
├── 📄 index.html              # Main application entry point
├── 🗄️ database.sql           # Complete database setup & sample data
├── 🔍 check_database.php     # Database verification utility
├── ⚙️ setup_database.bat     # Windows automated setup script
├── 📚 README.md              # Comprehensive documentation (this file)
├── 📋 SETUP_GUIDE.md          # Quick setup instructions
├── 📸 *.png                   # Screenshots (landing, dashboard, etc.)
│
├── 🎨 css/
│   └── style.css             # Complete styling system with themes
│
├── ⚡ js/
│   └── app.js                # TrackifyApp class with full functionality
│
├── 🔧 api/                   # PHP REST API Backend
│   ├── db.php                # Database connection & configuration
│   ├── config.example.php    # Example config (copy to config.php)
│   ├── projects.php          # Project CRUD operations
│   ├── tasks.php             # Task management
│   ├── time_entries.php      # Time tracking operations
│   ├── report.php            # Dashboard analytics & filtering
│   └── export_to_json.php    # Export DB to data/*.json
│
└── 🖼️ assets/images/         # Application assets
    ├── trackify-favicon.png  # Favicon
    └── trackify.png          # Main logo/hero image

🚀 Quick Start

Prerequisites

  • PHP 8.0+ with MySQL extension
  • MySQL 8.0+ or MariaDB
  • Web Server (Apache/Nginx) or PHP built-in server

Installation

1. Clone & Setup Database

# Import complete database setup
mysql -u root -p < database.sql

2. Start Application

# Using PHP built-in server
php -S localhost:8000

# Open in browser
open http://localhost:8000

3. Ready to Use! 🎉

📊 Feature Deep Dive

⏱️ Time Tracking System

  • Real-Time Timer: Start/stop functionality with live display (HH:MM:SS)
  • Manual Entry: Flexible time logging with start/end times or duration
  • Smart Validation: Prevents invalid time entries and overlaps
  • Auto-Save: Immediate database persistence

📁 Project & Task Management

  • Unlimited Projects: Create and organize multiple projects
  • Task Hierarchies: Associate tasks with specific projects
  • Dynamic Loading: Real-time updates without page refresh
  • Data Relationships: Proper foreign key constraints and cascading

📊 Advanced Dashboard & Analytics

  • Multiple Time Periods:
    • 📅 Today's activity
    • 📅 This week's summary
    • 📅 Monthly reports
    • 📅 Yearly overview
    • 📅 Custom date ranges
  • Real-Time Filtering: Instant results without page reload
  • Total Hours Display: Automatic calculation and formatting
  • Detailed Tables: Project, task, start/end times, and duration

🎨 Premium UI Features

  • Theme System: Professional dark/light mode with persistence
  • Loading Screen: Animated clock with progress indicators and floating elements
  • Button Effects: Enhanced hover states with:
    • Lift animations (translateY)
    • Scale effects (scale)
    • Shine animations (diagonal sweep)
    • Color transitions
    • Shadow enhancements
  • Responsive Grid: Adaptive layouts for all screen sizes

🔧 API Documentation

Projects API (/api/projects.php)

// GET - Fetch all projects
GET /api/projects.php

// POST - Create new project
POST /api/projects.php
Content-Type: application/json
{ "name": "Project Name" }

// PUT - Update project
PUT /api/projects.php
{ "id": 1, "name": "Updated Name" }

// DELETE - Remove project
DELETE /api/projects.php
{ "id": 1 }

Tasks API (/api/tasks.php)

// GET - Fetch tasks by project
GET /api/tasks.php?project_id=1

// POST - Create new task
POST /api/tasks.php
{ "project_id": 1, "name": "Task Name" }

Time Entries API (/api/time_entries.php)

// GET - Fetch time entries with filters
GET /api/time_entries.php?project_id=1&from=2025-01-01&to=2025-01-31

// POST - Create time entry
POST /api/time_entries.php
{
  "project_id": 1,
  "task_id": 1,
  "start_time": "2025-01-15 09:00:00",
  "end_time": "2025-01-15 17:00:00",
  "duration": 28800
}

🗄️ Database Schema

Tables Structure

-- Projects: Store project information
projects (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)

-- Tasks: Project-associated tasks
tasks (
  id INT PRIMARY KEY AUTO_INCREMENT,
  project_id INT FOREIGN KEY REFERENCES projects(id),
  name VARCHAR(255) NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)

-- Time Entries: Time tracking records
time_entries (
  id INT PRIMARY KEY AUTO_INCREMENT,
  project_id INT FOREIGN KEY REFERENCES projects(id),
  task_id INT FOREIGN KEY REFERENCES tasks(id),
  start_time DATETIME NOT NULL,
  end_time DATETIME,
  duration INT, -- seconds
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)

🎯 Database Configuration

Credentials are not hardcoded. Use one of:

  1. Config file – Copy api/config.example.php to api/config.php and set your MySQL credentials.
  2. Environment variables – TRACKIFY_DB_HOST, TRACKIFY_DB_NAME, TRACKIFY_DB_USER, TRACKIFY_DB_PASS.

Example (do not commit real passwords to the repo):

// api/config.php (copy from config.example.php)
return [
    'host' => 'localhost',
    'db'   => 'trackify',
    'user' => 'root',
    'pass' => 'your_mysql_password_here',
];

🎨 Theme System

The application features a sophisticated theme system:

  • Light Theme: Clean, professional appearance with subtle gradients
  • Dark Theme: Modern dark interface with enhanced contrast
  • Smooth Transitions: 0.15s cubic-bezier animations
  • Persistent Settings: Theme choice saved in localStorage
  • Component Coverage: All UI elements adapt seamlessly

📱 Responsive Design

Breakpoints

  • Desktop: 1024px and above (full feature layout)
  • Tablet: 768px - 1023px (optimized spacing)
  • Mobile: 320px - 767px (stacked layout, touch-friendly)

Mobile Optimizations

  • Larger touch targets (buttons, inputs)
  • Simplified navigation
  • Optimized font sizes
  • Adjusted spacing and padding

⚡ Performance Features

  • Fast Loading: Optimized assets and minimal dependencies
  • Efficient Animations: GPU-accelerated CSS transforms
  • Smart Loading: Progressive content loading
  • Database Optimization: Indexed queries and efficient joins
  • Memory Management: Proper cleanup of timers and events

🧪 Testing & Quality

Built-in Features

  • Database Health Check: check_database.php utility
  • Error Handling: Comprehensive try-catch blocks
  • Validation: Client and server-side input validation
  • SQL Injection Protection: Prepared statements throughout
  • XSS Prevention: Proper data sanitization

🎓 Educational Value

This project demonstrates:

Frontend Skills

  • Modern JavaScript ES6+ features
  • Advanced CSS animations and transitions
  • Responsive design principles
  • Event handling and DOM manipulation
  • Local storage management

Backend Skills

  • RESTful API design
  • PHP 8+ features and best practices
  • Database design and optimization
  • Security considerations
  • Error handling and logging

Full-Stack Integration

  • Frontend-backend communication
  • Data flow architecture
  • Real-time updates
  • State management

🚀 Development Highlights

Code Quality

  • Clean Architecture: Modular, maintainable code structure
  • Consistent Naming: Clear, descriptive variable and function names
  • Documentation: Comprehensive comments and documentation
  • Error Handling: Robust error management throughout

Modern Practices

  • API-First Design: Clean separation of concerns
  • Progressive Enhancement: Works without JavaScript (basic functionality)
  • Accessibility: Semantic HTML and keyboard navigation
  • Performance: Optimized loading and smooth animations

🎯 Use Cases

Professional Time Tracking

  • Freelancers tracking client work
  • Agencies managing multiple projects
  • Teams monitoring productivity
  • Personal productivity analysis

Business Applications

  • Project billing and invoicing
  • Resource allocation planning
  • Performance analytics
  • Time-based reporting

🛡️ Security Features

  • SQL Injection Protection: Parameterized queries
  • XSS Prevention: Input sanitization
  • CSRF Protection: Proper form handling
  • Input Validation: Client and server-side checks
  • Error Handling: Secure error messages

🔮 Future Enhancements

Potential Features

  • User Authentication: Multi-user support with roles
  • Export Functionality: PDF/CSV report generation
  • Time Goals: Project-based time targets
  • Notifications: Browser notifications for reminders
  • API Integration: Third-party service connections
  • Mobile App: Native iOS/Android applications

👨‍💻 Developer Information

Developed for: Feys Media
Purpose: Technical demonstration of full-stack development capabilities
Year: 2025
License: MIT

Key Achievements

✅ Enterprise-Grade UI/UX - Professional design with premium animations
✅ Complete Full-Stack Solution - Frontend, backend, and database
✅ Modern Technology Stack - Latest web development practices
✅ Responsive Design - Perfect on all devices
✅ Performance Optimized - Fast loading and smooth interactions

📞 Support & Contact

For technical questions or demonstration requests:

Project: Trackify Time Tracking Solution
Client: Feys Media
Status: ✅ Production Ready

Built with ❤️ and attention to detail. Showcasing modern web development excellence.

About

Time tracking app: projects, tasks, timer, manual entry, and reports. PHP + MySQL + vanilla JS.

Topics

mysql productivity php dashboard rest-api projects vanilla-javascript tasks time-tracking

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages