Track Flow | Mobile-Responsive HTML5 Management Tool

Overview

Track Flow- Freelance Dashboard With Client Management is a modern, lightweight, and professional browser-based management tool. It is specifically designed for freelancers, agencies, and small teams to organize clients, projects, and payments in one central place. Built with Pure HTML5, CSS3, and Vanilla JavaScript, it works entirely on the client side using LocalStorage—meaning no database or complex backend setup is required.

The tool provides a clean, structured workflow. You can manage client relationships, track project lifecycles, visualize progress through a Drag & Drop Pipeline, and monitor finances with ease. With built-in analytics and data portability (Import/Export), it’s a complete productivity system ready to go.

✨ Key Features

1. Client Management: Easily add, edit, and manage your client database.
2. Project Tracking: Organize multiple projects with status control and budget tracking.
3. Drag & Drop Pipeline: A visual Kanban-style board to move projects across stages.
4. Payments Tracking: Record and monitor payments for every project.
5. Dashboard Analytics: View recent activity and business insights at a glance.
6. Import & Export: Backup your data as a JSON file or move it to another device.
7. Dark & Light Mode: Toggle themes for a personalized user experience.
8. No Backend Required: Runs 100% in the browser using LocalStorage.
9. Clean Folder Structure: Organized assets for easy customization.

Project Structure

The project follows a clean and professional directory layout:

1. index.html, clients.html, projects.html, pipeline.html, payments.html (Root Files).
2. assets/style.css (Core Design)
3. assets/common.js (Main Logic & Initial Data)
4. assets/sidebar.js (Navigation Logic)

⚙️ Installation & Usage

1. 1. Download and extract the package.
2. 2. Upload all files (including the assets folder) to your hosting.
3. 3. Open index.html in your browser to start.
4. 4. Use the Export feature frequently to keep backups of your data.

⚠️ Important Note

This tool uses Browser Local Storage. It is designed for lightweight usage and frontend-heavy workflows. It can be easily extended with a backend system by a developer if needed.