Inspiration! 🌇

Top tech companies often have the resources to reach a multitude of potential candidates and filter them carefully. It is why we often see our local Miami talent get exported to the other already-established tech hubs of the nation. Smaller companies in their early stages can't always afford to do the same level of inspection. Often they might not have a technical recruiter or the time, and therefore would rather hire and relocate a reputable candidate with years of experience. Without years of industry experience, fresh talent can go unnoticed. Students (like us!) and freelancers can usually set themselves apart and showcase their capabilities with amazing personal projects. However, it is not uncommon for us to do a poor job putting our work out there. From repositories without a README to a lack of visual demos.
To solve this disconnect, LinkedHub seeks to facilitate the showcasing of personal projects uploaded to GitHub while highly encouraging video demos.

What it does. 🌴

LinkedHub is a Chrome extension that expands LinkedIn's functionality by adding a GitHub section to every profile using it. After adding it to Chrome, users can click on the LinkedHub icon in the extensions menu and link their LinkedIn and Github together. After that, they'll be prompted to add a YouTube video URL for each of their pinned/featured GitHub repositories. All the relevant information related to their contributions and these repositories will be showcased at the very top of their LinkedIn profiles.

How we built it. 🛠

We started with our frontend chrome extension by injecting some HTML into LinkedIn's page. We ensured a constant rate of injection to enable the website to remain responsive and free of stale data. We added further features to the injecting, like searching for multiple existing elements of LinkedIn to interact with them, ensuring seamless integration. After the initial frontend, the backend which communicates to the GitHub API and our FireBase database (FireStore) had to be built. The backend has both GET and POST endpoints which both get live data from our database and the GitHub API. We realized the most user-friendly way to make the settings for a user would be using the dropdown pop-up menu a chrome extension normally provides. After constructing the dropdown menu, we touched up the design with additional styling and added some small quality-of-life improvements.

Challenges we ran into... 🏔

The initial challenge of our project was injecting. Reliably injecting to LinkedIn's HTML is difficult due to its unmounting of pages and mounting pages without the need for a browser reload (thanks to Angular/Ember). We had to circumvent this as well as the fact that most LinkedIn elements do not have ID's. After injecting, making a stylistic UI and smooth UX was the next quickly-overcame obstacle. Syncing data between GitHub's API and our FireStore- as well as the local storage of the user, was important for the user to have a seamless experience while using the extension. Additionally, something that hindered the project a lot was the need to develop two different set of code for HTML and JS injections due to LinkedIn surprisingly having very distinct code for macOS and Windows.

Accomplishments that we're proud of! 🏅

Having LinkedHub have a very similar GUI to LinkedIn's was extremely important to us. It was difficult to do the cross-platform development for the two main operating systems but rewarding when both came out looking really nice. The saving and editing feature of the dropdown is something our team felt proud of since it ended up feeling really nice and resulted as an important addition to allow users to have control of their content.

What we learned.  🎓

  • How to reliably inject HTML on an existing document.
  • How to work with a Chrome Extension (from changing the manifest, to adjusting the CSP)
  • Bridging the gap between goals of the application and how the user accomplishes those goals.
  • Incorporating GitHub's API and FireStore with our express backend.
  • Developing a carousel without React or the likes to cycle through date.
  • Using GraphQL queries.

What's next for LinkedHub. 🔭

Besides deploying our backend and publishing the Chrome extension there are definitely plans for LinkedHub. First and foremost we'd want to add verification to the linking process between a user's LinkedIn and GitHub. As well as additional control over what's displayed in the LinkedHub section: from extra media and assets to the addition or removal of new projects (without strictly relying on what's pinned on GitHub).

Share this project: