Skip to content

Latest commit

 

History

History
32 lines (25 loc) · 2.28 KB

2024-02-28_shm_week_5_social.mdx

File metadata and controls

32 lines (25 loc) · 2.28 KB

Week 5: Social

“Our imagination is the key to our control of the world,” Yuval Noah Harari said. Though his science may be lacking, his imagination is not. The tools we use influence our imagination for what we can do in the world; they provide a shape for our own feelings of agency to grab onto. If our tools are solo, we feel alone. If our tools encourage us to imagine together, that default influences how often we take that route.

Making

{/* This week, I took my 3D visionOS concept from week 3 (draggable) and connected it with Liveblocks (which I used last week), then connected that to authentication using a new service called Hanko and a new browser technology called Passkeys. Passkeys are a web standards-based new method for handling authentication on the web not with a password or social login but by saving a cryptographically-generated, biometric-verified secret on your device’s password manager. Hanko handles the complexity of dealing with the browser APIs, and wraps it up in customizable UI using web custom elements. */}

This week, I took last week’s project and made it joinable: under the hood, I moved the static friends data to Liveblocks, then added an authentication flow through GitHub using Clerk, all from React Server Components. After you authenticate, it uses your browser’s geolocation to add you to the globe, and you can send vibes.

const addToFriends = useMutation(
  ({ storage }, lat: number, lng: number) => {
    storage.get("friends").push({
      lat,
      lng,
      github: user?.username!,
      name: user?.fullName!,
    });
  },
  [user],
);

navigator.geolocation.getCurrentPosition((position) => {
  addToFriends(
    position.coords.latitude,
    position.coords.longitude,
  );
});

Try the demoread the source code