Waleed Akhtar

Case Study Keyhole

Revamping a social media analytics dashboard to make real-time metrics clear and actionable.

Keyhole helps brands, agencies, and institutions monitor their online presence, stream social media management, and leap beyond basic engagement metrics.

Client / Project

Keyhole

Role

Full Stack Developer

Team Size

11 - 50

Keyhole social media analytics dashboard preview showing metrics, trends, and charts

Overview

Streamlining data presentation for live social media monitoring at scale.

At Keyhole, I worked on a social media analytics and management platform designed to help brands, agencies, and institutions monitor their online presence and go beyond basic engagement metrics.

My primary focus was on the frontend, where I led a full revamp of the dashboard using React and TypeScript. Since the platform handled live social media data and user activity, reliability and usability were critical. A significant part of my work involved making sure the interface handled different states smoothly and presented insights clearly.

Technologies Used:
TypeScriptReact.jsNext.jsPHPNode.jsPythonExpress.jsCakePHPNestJSWordPress Headless CMSMySQL

Working Style & Collaboration

We operated in an Agile environment where tasks were handled step by step. Usually, the Tech Lead created tickets in Linear, though we would create them ourselves when we identified technical needs or improvements.

My workflow involved picking a ticket, building the feature end-to-end, and ensuring the code was clean, complete, and thoroughly manual-tested. Once completed, the Tech Lead conducted a detailed code review to maintain quality. Following code approval, the feature moved to staging for manual QA validation before being deployed to production.

Responsibilities & Impact

  • Revamped the entire dashboard UI/UX using React JS, elevating user engagement and interactivity.
  • Improved user-centric interfaces, ensuring 100% responsiveness across all modern devices and screens.
  • Improved backend services powered by Nest JS, Express, and CakePHP for enhanced scalability.
  • Implemented global automated payment support with ACH, iDEAL, and 3DS verification using Stripe.

Key Challenges

One of the main challenges during the project was the initial lack of automated testing and limited documentation, especially surrounding backend APIs. This lack of clear API specifications made onboarding and maintaining frontend-backend consistency a challenge.

To address this, we focused on writing clean, self-documenting code, collaborating closely with the backend team, and performing strict manual testing at every stage to ensure a zero-regression deployment.