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.
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!
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.