LinkedIn Head Hunt - Frontend Case Study
Our journey started with a simple but powerful idea: to make it easier for recruiters to find the perfect candidates on LinkedIn. My first task was to create an MVP, or Minimum Viable Product. Think of the MVP as the most basic version of a product that still delivers value.
For our MVP, I built a simple Python script. This wasn't a polished application with buttons and a user interface. It was a program that ran in the background. Users would give the script a few keywords—for example, "Frontend Developer," "5 years of experience," and "Delhi." The script would then use these keywords to create many different Google search URLs. It was like having an assistant who could type hundreds of unique search queries into Google for you.
Once the search results came back, the script would scrape the data. This means it automatically pulled information from the search result pages, specifically from LinkedIn profiles. After collecting all this data, the script used a system called Elasticsearch (AWS service) to rank the profiles. This system works like a highly sophisticated search engine, sorting the profiles based on how well they matched the user's keywords. The final output was a basic Excel file with a list of the ranked candidates.
Scaling Up: Building a User-Friendly SAAS Platform
When we showed this sample list of candidates to our clients, they were thrilled. They saw the potential and wanted more than just a spreadsheet—they wanted a full-fledged platform. This was our cue to turn our simple script into a SAAS (Software as a Service) application. A SAAS product is hosted online and accessible through a web browser, like Gmail or Slack.
We built this new platform using modern web technologies like Next.js (V13) for the core framework, JavaScript for the programming logic, and Material UI (MUI) for the look and feel. We had a clear, two-page design. The first page was a user-friendly form where recruiters could enter all their criteria—things like the role, skills, and industry. The second page was a data grid, a fancy term for a dynamic table, that displayed all the matched LinkedIn profiles. We used a library called React TanStack Table to make this grid powerful and easy to interact with.
Rapid Growth and New Features
As a SAAS company, we were constantly getting feedback. Our clients and our success team had great ideas for new features, and we built them quickly.
One of our most popular features was a custom Chrome extension. This allowed users to connect their own LinkedIn accounts directly to our platform, so they could send invites or messages to candidates without ever leaving our site.
We also created a highly customized filter component. This wasn't your average dropdown menu. It had advanced features like multi-select checkboxes and auto-complete suggestions. To make sure the data updated instantly as users applied filters, we used WebSockets, a technology that enables real-time communication between a user's browser and our server. We also used a technique called debouncing to make the app more efficient. Users can also save their preferred filters and use them accross different searches.
To help recruiters keep track of candidates, we built an in-house form builder. These forms could be sent to candidates to gather basic information.
We also added a candidate management system that allowed users to shortlist, reject, or waitlist candidates, making their workflow much smoother.
Hitting a Bottleneck: Performance Challenges
With all these new features, our platform started to get a bit heavy. The pages loaded slowly, and users started to notice. We had hit a bottleneck—a point where our progress was being held back by a single issue: performance.
We had to shift our focus from adding new features to making the existing ones faster and more efficient. We started by rewriting critical code, fixing parts of our application that weren't built as well as they could be. We also implemented code splitting, a technique that loads only the parts of the website a user needs, rather than loading everything at once. We also focused on fixing memory leaks, which are basically small errors that cause the application to use up more and more memory over time, slowing everything down. These efforts paid off, and we saw a 30% improvement in page speed.
Embracing AI and Overcoming Design Challenges
Then, the AI boom happened, and we knew we had to jump in. We integrated AI to create quick, easy-to-read summaries of top profiles, giving recruiters a fast overview of a candidate's qualifications.
Around this time, we faced a new challenge: our designer left. My product manager and I suddenly found ourselves in charge of the UI and UX, or the User Interface and User Experience. This was tough at first, but it pushed us to learn a lot. We focused on making the platform intuitive and visually appealing, paying close attention to every detail of the user journey.
The Final Product: A Polished Talent Discovery Platform
Through this entire journey—from a simple script to a full SAAS platform—we learned a great deal about building and scaling a product. We faced technical challenges, performance issues, and even a design crisis, but we overcame them all. The result is a robust, feature-rich, and user-friendly platform that helps recruiters find the best talent.
This story shows how a simple idea can evolve, grow, and adapt to become a valuable product. It's a journey of continuous improvement, driven by feedback, and a passion for solving real-world problems.
Comments
Post a Comment