bastien-and-gauvain/monorepo

A chrome extension to help recruiters 1-click export LinkedIn profiles in their Notion databases.

Smart apps to work smartly

Hello there 👋

This is a monorepo which currently includes the following apps:

• LinkedIn-to-Notion

This monorepo uses pnpm.

Getting started

Follow these steps to start working on the project.
⚠️ Basic setup (npm installed, node installed, etc.) are not included in this setup.
Recommended node version: v18.16.0. Manage your versions with nvm if needed.

1. Clone the repository

git clone https://github.com/Bastien-and-Gauvain/monorepo.git

2. Install PNPM (optional)
If you haven't already, install PNPM globally on your system:

npm install -g pnpm

3. Start and build the Design System

• Navigate to the /libs/design-system directory:

cd libs/design-system

• Install dependencies:

pnpm install

• Build it:

pnpm run dev

4. Start the LinkedIn-to-Notion extension

• Navigate to the /apps/linkedin-to-notion directory:

cd /apps/linkedin-to-notion

• Install dependencies:

pnpm install

• Start the project using Plasmo:

pnpm run dev

5. Import the build as an extension on chrome
The first time you start the project you must load the extension in Chrome. Follow this steps to do so: https://docs.plasmo.com/framework#loading-the-extension-in-chrome

monorepo's Issues

Dropdown Select

Fix dropdown select display issues that sometimes becomes transparent and mingles with the content below the dropdown.

(couldn't reproduce and provide a screen yet)

Use only the needed host permissions

In order to facilitate chrome store reviews, host permissions of the manifest should be limited to whats is actually needed:

    "host_permissions": [
      "https://*.linkedin.com/*",
      "https://api.notion.com/*"
    ],

End of OAuth

Once the Notino auth is completed:

• Update the onboarding status in the dedicated page
• Redirect to https://www.linkedin.com/in/me
• Send the profile info to supabase
• Display the new loader (cf. #72) and random mantras (cf. #73) for an arbitrary long time
• When the time is spent, query eligible databases from Notion
• Display the usual form

More Efficient Database Fetching

Context

Databases are fetched each and every time the dropdown select of the form mounts, which makes it fairly inefficient.

Solution

Launch

When a user uses the extension for the first time, and the dd select mounts, it should obviously look for eligible Notion databases. When that happens:

• Databases that've been found should be saved in the extension's storage

Run

Afterwards, we should only fetch eligible databases when:

• There are no db in the storage yet
• The user manually asks for a database refresh from the side panel (to handle cases where he created and/or shared a new eligble db with the integration)

Resources

TODO: design wireframes in Figma to spec the new 'refresh db' (🔄) button.

Resume Onboarding

If a user closes everything before completing the onboarding, whenever they try and use the extension, it should re-open the onboarding page and show the progress that was accomplished before they left (completed steps in green).

Redirection on First Profile Saved

When a first profile is saved, with the content from #77 in it, open a new tab for the user to see that very page in Notion, opened like this:

On Install Page

Create the page to display as soon as the extension is installed (cf. developers doc). It should look like this:

And it should have a developer-friendly API to modify the UI depending on the step the user reached in the onboarding. There should also be a global "onboarding" state variable.

Enhanced LinkedIn Scraping

Atm, we scrape only a few pieces of data from profile pages on LinkedIn:

• The url
• The job title
• The location
• The company
• The first and last names

First, we should allow to save the LinkedIn profile picture on the corresponding Notion cover page - whatever the cost of development. It's a feature that has been requested.

Then, we should scrape a whole bunch of additional data that might be useful, if and only if they're easy to scrape and require only a few lines of code, like:

• School
• School - Start Date
• School - End Date
• Company - Start Date
• Etc.

Prevent Google API "MAX_WRITE_OPERATIONS_PER_MINUTE"

When listening to tab updates, we take the risk of hitting rate limitations the Google API sendMessage. We should make sure to catch the errors to avoid the app to crash and potentially run action after complete only.

Mantras in DS

Implement this "mantra" component in the DS:

The four current mantras are:

1. Recruitment is marketing, except that you don't sell a product, but the company.
2. Recruitment velocity increases success rates.
3. Personalized outreach increases response rates. Pay attention to details.
4. Constructive feedback turns unfit candidates into ambassadors.

Replicate what you see in #96 with updateOneLinkedinProfile

Replicate what we did in #96 for the update

Form Abstraction

Context

cf. #53: we need to better handle forms.

The way we handle the form (we should use something like Formik or a kind of form abstraction and we should have 2 form one for LinkedIn and one for Notion)

Priority

Post-release

CSS is spread outside the iFrame and alters the rest of the webpage

Architecture Reorg

Both Gauvain and I are dissatisfied with the current project's architecture. It's become messy, both in the front and in the back.

Background

There should be a clear separation between: services, resolvers/controllers, providers and repositories in the background. This was the topic of a meeting.

Front-end

There's room for improvement especially in the Form.tsx file that has become very long and messy. Some key action points:

• Subdivide in smaller components
• Make a better use of react hooks (useContext, useFormHook, etc.)

Prevent the extension to spread outside LinkedIn

Currently, to display the side panel Go Back to LinkedIn, we have to make the iFrame available on all websites. This is not best practice because:

• We don't want css to spread outside the extension and by having it on all pages it increases the odds
• We don't want to add friction on other pages (loading time or anything else)

Open Extension Automatically

Users have to click to open the extension, which is quite annoying in their opinion. So, here's the new intended behavior:

• Open the extension automatically when the user lands on a LinkedIn profile
• Close the extension automatically when the user goes out of LinkedIn
• If user clicks on extension outside of LinkedIn, let them click on the current CTA to go back to LI
• If the user clicks on the extension icon while on LinkedIn, it just toggles the extension
• If the user clicks on the extension on LinkedIn, but not on a profile, it redirects them to a profile and opens the extension

Cards in Design System

Create these cards in the DS:

Form Revamping

The form is long and messy. Imo, we've been accumulating technical debt in it. I think it's time to subdivide the form in sub-components for the sake of clarity and efficiency.

Onboarding Form UI

Display a slightly different form as long as the user has not saved a first LinkedIn profile:

• CTA atop the form, maybe with an animation
• The rest of the form with a 60% opacity

Side panel does not open when navigating to a LinkedIn profile from another LinkedIn page

See the video below ⤵️

https://www.loom.com/share/465f2a30c0a2407eb56684ae5bd849ce?sid=b75a2e5f-19b9-46a3-a239-c9343cf201ff

Disconnection & Automatic Toggle Bugs

Create a linkedin_profiles module that contains a service and a controller called saveOneLinkedinProfile

• The goal of this issue is to stop doing logic in the front end.

• Create a module called linkedin_profiles

• This module takes a controller called saveOneLinkedinProfile

• This resolver called a function from the service with the same name, saveOneLinkedinProfile

• This function takes as an input what we need from the frontend:

• userId

• notionInformation

• linkedinInformation

• Add in this function the different logic that we need: save the profile in notion, save also the profile in the DB and create a new notion DB if this one is not existing in supabase, etc...

In the meantime, don't hesitate to refac the Notion module. It should follow a provider > service pattern and remove all business logic from the provider

Create a Special First Page in Notion

When the user saves a profile for the first time, that first saved profile must have a bit of content inside:

• A callout to thank the user
• A new video to detail each and every feature of the extension

The page should look something like this

Nudge in Notion OAuth

During the Notion authentication, display a nudge to have users select our template:

New Loader in DS

Implement this loader in the DS:

It should have some sort of "ratio" prop to control the filling of the bar.

Watermark

Each and every profile saved (except the first and second ones) should have some kind of "watermark" on their corresponding Notion page. This should be:

1. A beautiful callout block
2. Reading that "this profile was saved with recruitivity"
3. A tracking link that redirects to the recruitivity page on the Chrome Store

We hope to boost and partially track referrals that way.

Profiles Saved Counter

Increment a counter in Supabase each time a user saves a profile.

• Create a new column in public supabase's 'users' table
• Create a new method to increment the users counter in user.service.ts
• Create a new resolver that calls the method above in users/resolvers
• Call that resolver each and every time a new profile's saved by a user