Welcome to day eight of the useaffiliates.com build log! This series covers my journey of building a business from scratch in public. If you missed day seven, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

I made some internet money! 💸

Like yesterday, let's start with a cool update; I made my first couple of dollars from this project today! Well, sort of, I have yet to launch the project but a generous Twitch viewer donated to my stream with the comment:

"Am I an angel investor now? 😦"

Well, you are definitely an angel. I appreciate it! 🥰

If I wasn't motivated enough already, this fires me up even more.

I hooked up the Notion database! 🍾

With the listing component coded yesterday, it was today's task to get the actual data into the app. I was curious how the listing design would hold up with the actual data. Very long or short titles and descriptions, especially when listed below each other, can make a listing look messy when not designed correctly.

Hooking up the Notion database via the API was pretty straightforward. However, that was after I realized that I was trying to make the getStaticProps function work inside a component when it only works inside a NextJS page component (oops, shit happens).

Once I copied the getStatisProps function to the right component, I can tell you; everything still looks great! Still, I have quite some database work todo, but a quick scroll through the listing and not a single row made me go, "oh no, what monster have I created!?".

I see this as an absolute win.

However, one issue came to light: Notion cuts description texts once it encounters any text formatting. That probably happened when I copied and pasted some affiliate program descriptions, so I'll have to fix that. I'll batch that work together with uploading all the program's images (still not looking forward to doing that).

More listing work! 🔨

Now that we have the REAL data inside of our listing, I got to work on two columns:

1. The payment type column
2. The cookie period column

Both columns are currently select fields inside of Notion, which means they hold a couple of values. In the design, we gave these values different icons and labels. Implementing this wasn't all that bad; I even got some pair programming support from Mustafa (thanks for the tips!). In about an hour, I created two components responsible for showing the correct icon and label for the values of both columns.

To make life a little easier, I also moved all the icons to their own file, so it's easier to reuse them in other parts of the application and, of course, to prevent ourselves from having to go into multiple files if (or when) there is a bug with one of the icons.

Setting up the “load more programs” with SWR. 😪

I will be honest with you; this was an absolute nightmare. I have used SWR before, but now I remember why I loved and hated it at the same time. The documentation is horrible for what I want to accomplish. I had to go through a Github thread to find out that I could pass some initial data to useSWRInfinite.

It took me more than an hour to get the infinite loading somewhat working. And even now, I still have to implement things like checking if we can fetch more pages. Oh well, we'll get there. Maybe next week, I will get it working in an instant when I am refreshed and flu-free. We'll also make a React hook out of it so that we can reuse it other parts of the application.

Side note;

Thanks to everyone in the Twitch chat today while working on this. This obviously took me more time than it should, which made me feel like an imposter in front of front-end Twitch. However, everyone was very helpful and nice. I know I have to shake this feeling from now on. As I keep saying, just as I am building in public, I am also growing in public.

See you next week! 👋

Sorry people, I can't ghost my bookkeeper any longer; otherwise, he's coming after me with his calculator of pain.

I will probably continue with this project on either Monday or Tuesday. If you want to stay in the loop, I will update you all via my Twitter!

Thanks again for reading this build log, and I hope to see you next week!

Have a great and lovely weekend!

With love,

Twankrui