M1guel is building an app every day on Lens Protocol. I want to grow as a dev as well as understand web3 social media built in the Ethereum scaling ecosystem (Polygon sidechain). Instead of starting from zero, I want to study a successful dev who’s already laid down a base camp.

https://twitter.com/StaniKulechov/status/1532452161258504205?s=20&t=e2DImCU-TAkSfoSIz3BM1Q

Today I started by looking at M1guel’s Leaderboard app:

• Goal: filter the existing Leaderboard code to only show Lens Profiles that own a Mint Songs token.

• Leaderboard App:

  https://leaderboard.withlens.app/

https://twitter.com/m1guelpf/status/1528787667957186562?s=20&t=e2DImCU-TAkSfoSIz3BM1Q

Okay, I obviously need to dig deeper into understanding the Typescript, but what’s my goal? I want to filter the existing Leaderboard code to only show Lens Profiles that own a Mint Songs token. How do I:

• Filter Lens Profiles based on NFT ownership?

• Add a “Mint Songs” tab to this list?

• Minimize the number of blockchain queries?

1. Log the overall response from the current graphQL query.

   1. seek first to understand.

2. Add a “Mint Songs” tab with no functionality.

   1. do the simplest thing that could possible work.

3. Filter Lens Profiles based on NFT ownership.

   1. start with the end in mind.

• oh cool, localhost:3000, shows the same experience as prod.

  • out-of-box perfection.

  • super easy to start.

• Typescript - my nemesis.

  • How should I respond? I’ll need to rip this out. Well, you say you like learning. What if you learned Typescript? just for this project, pretend Typescript is perfect & seek to understand.

• How does the Leaderboard query Lens Protocol?

  • src/queries/explore-profiles.ts - uses graphQL.

    • import { gql } from '@apollo/client'