Projects using Visual Studio Code in KarachiProjects using Visual Studio Code in Karachi
Projects
People
Cover image for SalesTrack: A Modern Sales Tracking
SalesTrack: A Modern Sales Tracking and Client Management App I designed SalesTrack to give sales professionals a clear view of their performance without turning the experience into a spreadsheet on a phone. Instead of overwhelming users with dense CRM tables, long reports, and scattered client records, I structured the product around the questions sales teams check every day: how much have I sold, how healthy is my pipeline, which deals are moving, and which clients need attention next? The visual identity combines a deep navy interface with electric blue accents, supported by green, purple, and amber indicators for performance states. The dark background keeps the interface focused, while blue is used consistently for primary actions, navigation, charts, progress bars, and active states. Cards are flat, spacious, and highly legible, creating a professional dashboard aesthetic without relying on illustrations or decorative imagery. The onboarding screen introduces the product with a simple promise: “Track Your Sales. Grow Further.” Instead of explaining every feature through lengthy copy, it highlights the three core functions of the platform: tracking sales, managing clients, and reaching revenue goals. A single Get Started action keeps the entry experience focused and mobile-first. The main dashboard opens with a personalized greeting and immediately surfaces the most important sales metrics. Total Sales sits at the top of the hierarchy alongside month-over-month growth and a compact performance chart. Supporting KPI cards show Deals, Clients, Pipeline Value, and Conversion Rate, allowing users to understand the state of their business within seconds. Sales performance is presented visually rather than through lengthy reports. The dashboard combines bar charts, percentage movements, status indicators, and compact cards to show trends at a glance. Metrics such as $24,680 in total sales, 18 active deals, 24 clients, a $56,200 pipeline, and a 32% conversion rate are organized in a consistent grid so users can compare performance without leaving the screen. The Recent Activity section turns the dashboard into an operational workspace rather than a static analytics page. New deals, client meetings, proposals, and other sales events are shown chronologically with clear timestamps. This gives users a quick understanding of what has happened recently and where follow-up may be required. The client detail experience is designed as a lightweight CRM. A client such as Apex Industries opens into a dedicated profile containing account status, communication shortcuts, deal information, activity, documents, and follow-up details. Quick actions for calling, emailing, scheduling meetings, and adding notes are positioned near the top so the screen supports action as much as information. Client performance is summarized through compact metrics including total account value, number of deals, last contact date, and next follow-up. A sales progress module visually compares the current value against the target, while the activity timeline records milestones such as meetings completed, proposals sent, client responses, and negotiation progress. Rather than forcing users through separate modules for every task, the interface keeps sales context connected. A representative can move from overall revenue performance to a specific account, review the relationship history, add a note, or schedule the next interaction without breaking the workflow. Across the product, a five-tab bottom navigation structure; Home, Deals, Clients, Reports, and More, keeps the information architecture predictable. Components, spacing, card dimensions, iconography, and typography remain consistent across screens, making the experience feel like one connected mobile product rather than several dashboards placed together. Frontend I built the client as a cross-platform mobile application using React Native and TypeScript. React Navigation manages the bottom-tab structure and stack navigation between dashboards, deal records, client profiles, reports, and activity screens. TanStack Query handles API data fetching, caching, background refreshing, and loading states, while Zustand manages lightweight client-side state such as active date ranges, dashboard filters, selected pipeline stages, and temporary UI preferences. The dashboard is built from reusable components including Metric Cards, Sales Charts, Pipeline Cards, Activity Rows, Client Cards, Progress Indicators, and Quick Action controls. A centralized design-token system manages spacing, typography, border radii, dark surfaces, and accent colors to maintain visual consistency across every screen. Chart components use lightweight mobile visualization libraries to display revenue trends, deal progression, conversion rates, and pipeline performance without overcrowding smaller screens. Responsive layouts ensure every dashboard element maintains proper mobile proportions rather than shrinking desktop-style panels into a phone interface. Backend The backend is a Node.js REST API built with NestJS and PostgreSQL through Prisma ORM. The primary data model covers Users, Clients, Contacts, Deals, Pipelines, Sales Activities, Notes, Meetings, Tasks, Sales Targets, and Reports. Each deal stores its value, pipeline stage, probability, assigned salesperson, expected close date, client relationship, status, and activity history. Client records contain contact details, account value, associated deals, last interaction, upcoming follow-ups, notes, and relationship status. Sales calculations are generated from transactional deal data rather than manually stored dashboard totals. This allows metrics such as total sales, pipeline value, conversion rate, closed deals, average deal size, and target achievement to update automatically as opportunities progress through the pipeline. Endpoints support dashboard analytics, client search, deal filtering, pipeline management, activity logging, follow-up scheduling, and reporting. For example, dashboard requests can be filtered by salesperson, period, team, or deal stage so the same architecture can support both individual representatives and sales managers. Authentication uses JWT access and refresh tokens with role-based permissions for sales representatives, managers, and administrators. PostgreSQL stores transactional CRM data, Redis can be used for frequently accessed dashboard aggregates, and WebSockets can optionally provide live updates when deals, activities, or team metrics change. The result is a mobile-first sales management experience that combines CRM functionality with meaningful sales analytics. SalesTrack gives users a fast, visually clear way to understand performance, manage clients, track opportunities, and decide what action needs to happen next — without the complexity normally associated with traditional CRM platforms.
1
214
Cover image for HeatPro UK Lead Generation Engine
Developed the final lead-generation engine for 'HeatPro UK,' focusing on a seamless user conversion funnel. This section is the core of the business, designed to turn visitors into active service requests. Custom Lead Generation Form: Designed a multi-field contact form with customized drop-downs for service selection (Boiler Repair, Leak Detection, etc.) to ensure accurate lead data. Strategic Information Layout: Integrated clear business contact details, including WhatsApp, email, and localized service areas, to provide multiple points of contact. Trust & Availability: Highlighted 'Emergency 24/7' status and 'Gas Safe' registration to reassure users of professional standards. Interactive Visuals: Implemented custom JavaScript-driven animations (like the 3D pipes in the background) to maintain engagement while users provide their details. Focused on delivering a high-performance frontend that is not just a design, but a functional tool for business growth.
0
45