👋🏻 LinkInABit

✊🏻 Summary

Have you ever found yourself meaning to reach out to people you find on LinkedIn, only to lose track of them the next day?

Or have you ever had 15 different tabs open on your browser, each for different LinkedIn profiles, only to lose them all when you exit your browser?

LinkInABit is a Chrome Extension that gives LinkedIn profiles their designated real estate on your browser.

While not exclusively, LinkInABit aims to primarily benefit:

• Recruiters-- coordinating candidate pipelines and sharing eligible profiles to the team,
• Jobseekers-- discovering and reaching out to hiring managers and colleagues at future companies,
• Salespersons-- maintaining sales channels and "bookmarking" new clientele,
• and more!

☝🏻 Installation

LinkInABit can be downloaded via Chrome Web Store:

Download here

✌🏻 Directory Map

The repository is organised as the below (simplified) tree structure:

:root
│   README.md (📍 you are here)
│   craco.config.js [0]
│   LICENSE [1]
│
└───🗂 /public
│   │   index.html
│   └───🗂 changelog [2]
│
└───🗂 /src
│   │   App.js
│   │   index.js
│   │   contactsData.js [3]
│   │ 
│   └───🗂 /components
│   │   │   Contact.js
│   │   │   Header.js
│   │   │   List.js
│   │   │   Footer.js
│   │   │
│   └───🗂 /chrome [4]
│   │   │   ...

Index

• [0]: Module that configures the build process for the LinkInABit extension.
• [1]: Module that contains LinkInABit's MIT Open Source Software (OSS) License 🥳
• [2]: Directory that chronicles LinkInABit's UI iterations.
• [3]: Module that demonstrates sample data structure for the extracted LinkedIn profile's metadata.
• [4]: Directory that holds the logic for communicating extrated data from LinkedIn Profile to extension's popup HTML.

🖖🏻 Technologies

CURRENTLY IN ACTIVE DEVELOPMENT 🚀

HTML/CSS & Bootstrap

Most of the HTML/CSS code was written in JSX.

Upon refactor, all layout and styling will be isolated to each component's scope.

• Bootstrap v5 was utilised as the chosen CSS framework for responsive UI development
• FontAwesome was utilised to enhance the UX with intuitive icons

JavaScript

JavaScript (ES6) was used to extract relevant metadata from desired LinkedIn profiles, which was then relayed to the extension's popup window (see Chrome APIs)

The data was stored in the following object form:

    {
        id: 2,
        fullName: "Fredrick Thompson",
        companyName: "Duolingo",
        contactPhotoURL: "https://some_path_to_profile_picture_url",
        profileURL: "https://www.linkedin.com/in/fredrick-thompson-875520174/",
        contactInfoLink: `${profileURL}detail/contact-info/`,
        currentTitle: "Product Manager",
        companyLinkedInURL: "https://www.linkedin.com/company/duolingo/",
        companyLogoURL: "https://some_path_to_company_logo_img",
    }

While most of the heavy-lifting with regards to the game's logic was written in React, JavaScript's ES modules were used to separate layers of concerns whenever possible.

With regards to JavaScript dependencies, the following were installed via NPM:

• CRACO was utilised to override default Create React App (CRA) configurations
  • This was crucial for LinkInABit given its interaction between multiple JS files
  • CRA defaults to building one bundled file with the application code in its build process
  • CRACO allowed the reconfiguring of CRA's build settings in order to generate two build modules that are integral for LinkInABit's functionality
• babel-plugin-transform-react-remove-prop-types was utilised to prevent the PropTypes dependency from being included in production bundle
  • This was recommended by Google Chrome Labs as a means to eliminate production bloat
  • (Since type validation via PropTypes is only used in the development environment & provides no utility in production setting)

React.js

This extension was built with the latest version of React (v17), with a select number of technologies within the React ecosystem:

• Context API was utilised for state management
• Hooks were utilised to access component life cycle methods in declarative fashion
• PropTypes was utilised to integrate type-checking in components at runtime
• React-Icons was utilised to selectively import (ES6) Font Awesome icons, preventing production bloat
• React-Router will be incorporated to allow performant SPA routing as additional features are rolled out

Chrome APIs

LinkInABit requires the interaction between its two content scripts, for which the following APIs were utilised:

• chrome.storage to save LinkedIn contacts locally
• chrome.runtime to relay data from LinkedIn profile to the extension's popup window