Clearbit's logo API will allow us to get logo's for all platforms rather than maintaining a small set of 'known' platform icons in our codebase.

• Some logos don't look very good such as the LinkedIn logo, might want to prefer platform icons in our own codebase then fall back to Clearbit.
• Logo's are square, will need to add a circular clipping path ourselves.
• Should check HTTP status code and fallback to our 'first letter' system if no logo is returend from Clearbit.
• Clearbit fails for URLs with the mailto protocol.
• Attribution needs to be added to use the logo API. This could be added in the footer.

<img src={`//logo.clearbit.com/${new URL(url).hostname}`} />

Some people have logos or avatars as well as photos of themselves.

This was a good example of a fairly non-instrusive and clear privacy message 👇

Perhaps ours could be a little speech bubble coming from the Privacy link in the footer. Could also have it automatically go away after N seconds if that's legal.

After Google sign-in we can use the information to create a basic profile for them.

Session vs JWT?

One possible implementation would be to keep a JWT token on the front-end and send it with every request. This can be used to authenticate and authorise against resolvers using a custom directive.

After much reading decided to use a session cookie.

Testing

E2E testing is a pain because it's reliant on hitting Google's servers and will require management of a test account. Could just unit test the Google sign-in button and create an API login method that returns a JWT token for E2E tests?

Implementation

Once a session is established a second isLoggedIn cookie can be used for conditional rendering in the client. However in addition to just knowing if the user is logged in there will be times when the client wants to render basic information about the user such as their name and profile image, do we use the information in the Google token or retrieve it from our backend with a GraphQL query?

The flow should be as follows:

• User on landing page, clicks login
• Session established and ID returned as a cookie
• User redirected to home page
• In the background an updateUser mutation is fired with the information stored in the Google OAuth token.
  • If the user exists it ensures their details are up-to-date (e..g name and image URL)
  • If the user does not exist it creates them
• Up-to-date user is now stored in the cache

Sometimes I've pushed code which has passed our own linting with yarn lint but has then failed on CI when building the client.

We've created production and staging databases in MongoDB Atlas but we've created any for review apps to use. Could we programmatically create Sandbox tier databases for review apps?

User story

As a publisher,
I would like to have one smart 'follow' button rather than a row of links for all my platforms,
so that I can clean up my site and increase engagement across all the platforms I use.

Acceptance criteria

• Must not slow down the loading of a publisher's page by more than 10ms.

Implementation plan

YouTube embeds are just iframes with height, width, and other attributes. I like the simplicity of this. Perhaps follow buttons can simply be specialist renderings of the Person component served at /person/:id/follow. May need to consider server-side rendering for this to be lightweight enough.

Links

Use Apollo Client's pagination.

UX

The SearchResults will have a discreet navigation footer that updates as the user requests more results.

There is no way to go directly to "page 5" with this implementation as this is not a common use case. The user can either get a new page of results or go back to any previous page. If a user asks for more results 3 times the navigation options will update as follows.
| 1 | more |
| 1 | 2 | more |
| 1 | 2 | 3 | more |

If there are only 4 pages of results on the server then the end state will be as follows.

| 1 | 2 | 3 | 4 | no more results |

Could use a location pin shape around the current page! Actually that shape will look out of balance and take up too much space despite being semantically cool. Let's just use a circle with a dark grey colour fill instead.

Code

Search takes a resultsPerPage prop that it uses to set the number of records requested at a time.

SearchResults dumbly takes a list of all results and displays as many as possible allowing extra ones to spill over onto the next page if necessary. If the user navigates to the next page of search results and the component finds that it doesn't have enough results to populate it then it requests more via a getMoreResults callback.

Currently the structure is not easy to follow. Components should be easy to find.

First time visitors may not get the concept. First impressions are everything. We should do something to guide first time visitors through an initial user journey.

• Explain concept.
• Create profile.
• Share profile.
• Signpost further guidance.

Can also upgrade to use Apollo client's hooks package instead.

What are your leap-of-faith assumptions?

• That users want to follow people on multiple platforms but find it tedious to do so.
• That users will be willing to enter data.
• That users will be attracted to the platform without the followee management feature.

What actionable, auditable, and accessible metrics will you use?

• People created
• Average number of links clicked on per person per user
• Unique visitors returning

The .jsx file extension tells VS Code the file is a React file and therefore enables React-specific snippets.

Update to use Plausible API rather than BigQuery API. Schedule a run of the script on Vercel.

This is the very first issue in the project. To get a feel for the tech stack it would be nice to complete an issue that is small in scope.

• A good start will be the ability to enter URLs directly into the browser and see rendered views for test profiles.
• Will not use a database at this point, just return hard-coded data in JS files.

Should edits be limited?

The free tier of Heroku has to wake so isn't suitable for this.

We should move to another platform like Vercel and ideally also integrate with Next js and do progressive something-or-other so that every profiles embeds are pre-rendered.

The share button is displayed when viewing a person's profile. It copies the profile URL to the clipboard.

It would be cool if the share text on the button updated to "Link copied to clipboard".

Alternatively a toast notification could be used.

Could use key phrases like "link in bio" and highlight unique features compared to competitors like embedding.