Atom.

I built a like-button - Wed Oct 2520231:41 PM

Yet another like button! You can see it live on each atom on this page.

Default, Hover, Active, Loading states

Note: Base style and design accredidation: Vercel Design.

As cute and non-assuming as it is, there is a substantial amount of backend work and product questions that go into this.

Backend

  • What persistence layer will store the "likes" data?
  • What API layer will facilitate the e2e communication?
  • How will you protect this layer from abuse?
  • If abuse is successful, what are the potential damages?
  • Is monitoring in place for the backend?

UI

  • What will it look like with 1 "like"?
  • What will it look like with 32,095 "likes"?
  • What do the interactive states look "like"?

UX

  • Do we only load the "likes" data when the button is in the viewport?
  • Will there be layout shift?
  • Will there be a loading state?
  • Will the like interaction be an optimistic update?
  • Is it reasonably accessible?

...the list goes on...