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

Gaining traction and almost hitting Twitch affiliate. 📈

When I set out on this journey of building a business in public, I combined it with my goal of growing my tiny Twitch community. However, I never imagined that in 7 (!) days, we went from almost no viewers to almost hitting affiliate status.

Most of the new followers came directly from Twitch, but these build logs also helped gain 10s of unique viewers to my stream, and I loved talking to you and hearing about your projects and backgrounds!

I appreciate you all very much and know that my email and DM’s are always open for any questions or to chat!

Finished coding the default layout ✔

Okay, back to the updates about building the project! Today I finished the default layout. The navigation, hero, and footer are all implemented.

I always like to start with these front-end parts for all my projects. Primarily, to create momentum while, on the other hand, it helps me root out things I forgot or have yet to configure, like colors, fonts, and other defaults.

While working on the mobile navigation, I also ran into a small front-end challenge:

When you would open the mobile navigation and scale up the viewport to the desktop version of the site, the styles would get screwed up because I didn't have any event listeners set to update the mobile menu's state back to false when you would scale past the mobile breakpoint.

First, I considered importing a library like react-responsive or react-device-detect until I came across this clever solution from Cassidy Williams; a React hook that allows you to use media queries inside your components. It was exactly what I needed and saved me from importing an entire library for just one component's functionality.

As a cherry on top, I also added the footer. I had to make the font color a little darker because I want to keep a 100 accessibility score in Lighthouse. If you are a front-end developer (experienced or not), I highly recommend regularly checking the Lighthouse scores of your website. Not only does this help with your SEO, but it also helps as a sort of "good practices & performance" check-list during development.

If you missed yesterday's build log, all the code for this project is open-source, you can check it out in the following repository;

https://github.com/twankruiswijk/useaffiliates.com

Coding the heart of the application; the listing. ❤️

With coding the layout file out of the way, it was time to move on to the heart of the application; the listing component. For now, I'll wait with implementing the filters. Those are easier to implement once we know how to hook them up with the API. This likely prevent an unnecessary refactor later down the road.

Oh boy, am I glad I got started with the list items...

Once I translated the Figma design to code, it came to light that I made some significant errors during the design phase because all the elements and fonts were way too small. I should have spotted this while designing the page because I know very well that a 12px font size looks tiny on a computer screen.

Thanks to Tailwind, CSS grid, and an "oh well" mindset, it was an easy job to increase the grid width from 60px columns to 70px. In turn, this allowed me to update the font sizes from 12px up to 16px, making the text more readable and the page's overall design more appealing.

Making the grid wider and increasing the font sizes does make me wonder; how I am going to show the listings on mobile? I have no idea now, but I'll probably have to stack the affiliate program information on top of each other. I am sure we'll figure it out.

Let’s get this coding train going, shall we? 🚝

Now that we have styled the program rows of the listings, it’s time to populate the listing with the database data. Having the data on the page might bring some other design flaws to light, which I want to fix sooner rather than later.

So tomorrow, I will code the API integration and probably the “load more programs” button functionality. Exciting stuff, everything comes to life now!

Thanks for reading this short build log, and I hope to see you tomorrow!

Have a great and productive day, fellow hackers!

With love,

Twankrui