AlfaFrens

GM!

Today I'm going to build an AlfaFrens channel discovery tool. 

I'll share updates as I build for a true "build-in-public" experiment!

First up is sharing a bit of the spec I'm imagining...

Who is still active on /alfafrens 

@tormential 
@burrrrrberry 
@degenfans 
@0xfran 
@goshop 
@wake 

Who am I missing? I need to increase those I subscribe to.

The idea for this mini-project came from this cast from @hawkchain, where he was asking which active subscriptions he should follow on AlfaFrens.

Discovery is still pretty limited, so I thought it would be fun to put together a small tool for this.

Crypto / NFTs since 2017
Web3 Investor / Finance / Macro 
Underground / Meta Blazers
https://www.alfafrens.com/channel/0x2c1aff8df829e4b663f5025c485dfa8e845d15e

The idea for this mini-project came from this cast from @hawkchain, where he was asking which active subscriptions he should follow on AlfaFrens.

Discovery is still pretty limited, so I thought it would be fun to put together a small tool for this.

https://warpcast.com/hawkchain/0x459c4c1d

The big insight (and value) for this tool came from seeing @wake 's comment here. Wake unsubs from channels that aren't active anymore. 

However, comparing all of Wake's subscriptions with my own is still kind of a pain.

The big insight (and value) for this tool came from seeing @wake.eth 's comment here. Wake unsubs from channels that aren't active anymore. 

However, comparing all of Wake's subscriptions with my own is still kind of a pain.

Outside of the value for AF users, there's also my own learning value. I'll do a few things that I might skip otherwise just for learning value.

At the end of the day, I'll be happy is I can view all of the channels that @wake.eth subscribes to and that I don't, and then subscribe to the ones that look most interesting.

I'll start there, and we'll hop around a bit.

Oh dang! Thank you this could be super useful. Kind of a "taste maker" sub service.

It's easy to overthink naming, but I'm moving fast, so gonna run with @wake 's comment and call it "AlfaTaster" 😅 (working title)

It's easy to overthink naming, but I'm moving fast, so gonna run with @wake.eth 's comment and call it "AlfaTaster" 😅 (working title)

https://warpcast.com/wake/0xd2dce423

Vercel makes initial set up easy, so we're live with a webapp and have cloned the repo locally. 

Fortunately, this template also comes with TailwindCSS already installed, so no further installation necessary. 

Next up, I'll install DaisyUI for some easy components and then get moving with the data flow.

Fortunately for me, the team at @alfafrens has made it very easy to get a user's subscribed channels using their FID. This used to be harder before the API release, but @0xfran , @vijay , @youssea, and team have made it much easier 🙏

I'm FID 446697 and @wake is 2904, so I'll use these two as constants to start and keep moving fast. It's easy to make things dynamic after they're working, but will want to keep it as simple as possible in the beginning.

Fortunately for me, the team at @alfafrens has made it very easy to get a user's subscribed channels using their FID. This used to be harder before the API release, but @0xfran , @vijay , @youssea, and team have made it much easier 🙏

I'm FID 446697 and @wake.eth is 2904, so I'll use these two as constants to start and keep moving fast. It's easy to make things dynamic after they're working, but will want to keep it as simple as possible in the beginning.

I added Tailwind Typography as well just in case. If this goes smoothly, I'll have time to polish and perhaps add a nice onboarding experience.

Some links:
https://daisyui.com/ (Tailwind components)

I added Tailwind Typography as well just in case. If this goes smoothly, I'll have time to polish and perhaps add a nice onboarding experience.

Some links:
https://daisyui.com/ (Tailwind components)
https://github.com/tailwindlabs/tailwindcss-typography

Just realized I don't have music going.

Gonna start with DJ Okawari Flower Dance on 1-track repeat  🎶

Just realized I don't have music going.

Gonna start with DJ Okawari Flower Dance on 1-track repeat  🎶

https://music.youtube.com/watch?v=3ZIFNKYQj7g&list=OLAK5uy_n3TmYvL1WQx4kQAG3iPbByr0z3Q9PJkAM

Data is flowing! These are some of the channels that I'm subscribed to. Next step is getting this data to appear in the UI in some shape or form.

And now we have something on the UI!

These are simply the first ten channels that I'm subscribed to. 

Next up is making the UI look at least somewhat presentable, so that as it gets more complex, it's easy to keep track of what's a title, what's a channel, etc.

UI is now readable but not designed! I added PFPs just to make it easier to scan, but tbd as to whether they'll make it into the final version or not.

Now that the data is flowing and the UI is somewhat functional, I have two choices: 

1) I can take a step back and do some design
2) I can get the minimum functionality working (view view the channels that wake subs to but that I don't). 

I'm going to go with #2, making it ugly but functional. Later on, I may ask @web3designer for some guidance on making things slick. 

Quick s/o to @web3designer, who gives 1-on-1 design feedback to their AF subs. Here's their channel:

UI is now readable but not designed! I added PFPs just to make it easier to scan, but tbd as to whether they'll make it into the final version or not.

Now that the data is flowing and the UI is somewhat functional, I have two choices: 

1) I can take a step back and do some design
2) I can get the minimum functionality working (view view the channels that wake subs to but that I don't). 

I'm going to go with #2, making it ugly but functional. Later on, I may ask @web3designer for some guidance on making things slick. 

Quick s/o to @web3designer, who gives 1-on-1 design feedback to their AF subs. Here's their channel: https://www.alfafrens.com/channel/0xcc3ede725668577459260645f78a8becd996c249

Looks functional but the data is actually wrong! 

The issue is my API query only returns the first 20 channels I'm subscribed to, but the "hasMore" field comes back false 🤔

Time to debug!

(Fun fact: the phrase "debug" comes from when real bugs would get into those giant old computers and cause problems)

For debugging, my first step is to remove as much complexity as possible. In this case, I'll first go back to the AlfaFrens API and use CURL to do a query and see if the same results or not (20 channels, hasMore: false). 

From there, I'll re-add complexity until I find the source.

For debugging, my first step is to remove as much complexity as possible. In this case, I'll first go back to the AlfaFrens API and use CURL to do a query and see if the same results or not (20 channels, hasMore: false). 

From there, I'll re-add complexity until I find the source.

https://docs.alfafrens.com/docs/alfafrens-api/get-user-subscribed-channels

Quick CURL debugging showed that my batch size of 100 channels per request was behaving weird, so I changed the batch size to 20 (since they were returning 20 anyway) and all of a sudden the pagination started working correctly!

We're in business!

Now to manually check the data...

Data looks correct!

The final step to make this minimally functional for someone else to use is allowing people to enter their own fids. I'll do this and then it'll be time for a deep think about design and psychology.

Basic FID input is now working 🎉 

This is minimally functional but it is functional, so I'll commit it to the Git repo and do a quick production test.

Made a few small changes to improve the sharability, but now running into a React bug that I haven't seen before. 

---
useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

---

It's already wrapped in a suspense boundary, so not sure what the problem is here. Debugging cap back on!

Debugging complete! 

Here's a very rough but minimally functional build to play around with

https://alfataster.vercel.app/

Break time for now. I'll pick back up today if I have a chance. Otherwise, will be back at it tomorrow.

Next up if stepping back and thinking through the actual design of the app. This was a speedrun in basic functionality.

I can now view "channels that @wake.eth is subbed to that I'm not", but there's still a ton to do to make it more usable and more valuable (and less ugly).

To be continued!

Switching into engineering, let's tackle a bit of the technical risk....getting the APIs to work and the data flowing. First things first, I'll create a new Vercel project with NextJS. 

NextJS isn't my normal choice (I like Svelte), but I want to use some React-specific packages later on for "Login with Farcaster".