HubTrack CRM

A responsive CRM app designed for managing sales pipelines, client interactions, tasks, and performance metrics. Built to help sales teams streamline workflows and make data-driven decisions with ease.

Users should be able to manage clients, pipelines, tasks, and view sales metrics.

Include the following pages:

• Dashboard with KPIs (deals, revenue, conversion), activity feed, and upcoming tasks

• Pipelines View with drag-and-drop stages

• Clients/Contacts with searchable list and detailed view

• Tasks section with due dates, priorities, client links

• Reports page with bar, line, and pie charts

Light UI (white, #f5f8fa grays, #2e7be5 blue, #ff7a59 orange), Inter font, sidebar + topbar navigation, card-based layout, tabbed content

Tech: React + router, TailwindCSS, context or mock data, organized in /components, /pages, /data, mobile responsive

Dashboard KPIs: Real-time stats for deals, revenue, and conversion rates.

Pipeline Management: Drag-and-drop interface to track leads through sales stages.

Client Directory: Searchable contact list with profile pages.

Task Tracking: Tasks with due dates, priorities, and client associations.

Reports Dashboard: Bar, pie, and line charts summarizing sales performance.

UI/UX: Clean, mobile-friendly layout with sidebar/topbar navigation and card components.

Inspired by HubSpot’s clean and modern UI.

Color palette uses subtle light grays with vibrant blue and orange highlights.

Typography: Inter for a clear and modern look.

Mobile-first layout with collapsible sidebar and sticky headers.

Components designed with accessibility and readability in mind.

Drag-and-Drop Bugs: Resolved inconsistent stage updates by simplifying pipeline state structure.

Mobile Sidebar Collapsing: Used useMediaQuery to conditionally render sidebar behavior based on screen size.

Chart Rendering Delays: Optimized rendering by memoizing chart data in the Reports page.