> Building a business from scratch - day 17

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

Why am I not getting any traffic!? 😭

While working on the daily update blog yesterday, I was bummed that it seemed like I hadn’t had any visitors over the past seven days on useaffiliates.com. But after a couple of seconds, this feeling got replaced by an “o shit”💡.

I encountered this one time before with the fathom-client package. If your domain redirects to the “www.” version and you don’t have that inside the includedDomains array, no data will be sent to Fathom.

After updating the array, the traffic started to show up! I'm still bummed that I don’t have all the data from throughout this series, but at least the analytics will work on launch day.

UX improvements ✅

My plan for today was to test the application thoroughly and be critical of everything. Sure, I might encounter some things that are not feasible to implement before launch, but at least we can add them to our next up or backlog.

Loading progress.

When updating the filters or linking via one of the category tags, you sometimes have to wait 1 or 2 seconds before the page transitions. This isn’t crazy since we have to fetch the data from our database, render the page, and then navigate toward that page.

I even thought that the page wasn’t responding a couple of times until it navigated me to the right page shortly after.

To counter this, I already implemented better caching strategies yesterday. However, I also wanted to add a loading indicator, so if a page isn’t cached yet, people still get good feedback that something is loading/happening.

I used a library called nprogress and implementing it was a breeze. You can check the changes via the commit here. Now every time a route change event happens, the user gets visual feedback that we are loading in the changes.

Updating the filter button.

Yesterday I asked everyone to test the living 💩 out of the website. A recurring piece of feedback I received was;

“When I tested your site, I wasn’t sure how to remove the filters for a while. Then I finally found the cancel icon towards the end.”

This was something I had to fix before launch. I want my users to browse the affiliate programs without obstacles to finding their ideal affiliate program. And if you don’t know how to clear a filter, well... a user will get frustrated and might not come back.

I redesigned the icon with my chat (viewers on Twitch) to be a button. This way, it’s more visible, and now it also shows the text “clear filters.” I also ensured that the button now only appears when the user has at least one filter enabled.

To ensure the UI stays consistent, I also changed the “clear filters” button of the “no results found” message to be the same.

And as someone mentioned in chat, “Now it’s production-ready!” 🚀

UI improvements ✏

While testing the website myself, I again found a couple of things that I wished looked slightly different. So I added them to the “beta feedback” list and worked on them today!

Updated the category tags.

I am going to be honest, no feedback or science here. I just didn’t vibe with the gray color of the filters. It just didn’t fit the program rows.

After playing with the color pallet a bit, I decided to make it a lighter shade of our primary orange color. I do think, but I might be biased, that this puts a little less emphasis on the categories and more on the information about the affiliate programs as opposed to the gray color.

Towards the end of the day, I also noticed that the category tags' font was quite bold on Safari and Firefox. When I checked my code, I noticed that I used the medium font weight, which is a bit much for small text. I updated the font weight to normal, and now everything looks crisp again!

Decreased the height of the submit program container on mobile.

What is cool about Typeform is that once you click “start” on mobile, the form transitions to full screen, making it easy to fill out the form.

When testing out the “post your program” page, I noticed that on mobile, the form was taller than the actual viewport pushing the start button far down the page and adding a lot of useless white space to the page.

After tweaking the height of the container, we got rid of the useless whitespace, and the start button is now way easier to find.

I added the legal pages! 📜

One thing blocking launch was that I didn’t set up the terms and privacy pages yet. I know they are boring, but you got to have them when you sell your services online.

While adding the content for the pages, I needed to make a couple of styling changes.

The first styling change was that I wanted the page's headers to be shorter since the page's titles were only a single line (terms and conditions & privacy policy). I updated the defaultLayout component to take an isSmall prop (great naming! 😬). This way, for some layouts, I can now make the header shorter so it doesn’t look odd.

The other styling change had to do with the contents of the page. Since I am using TailwindCSS, my text doesn't have any default styling. What I usually do for these kinds of generated text is add a .WYSIWYG class to my CSS, which I apply to the parent of the text.

While doing this, out of habit, I nested the CSS. Of course, the compiler complained, but not in a bad way. It for once told me, "look; you can do this; I know you want to, but you have to set up a plugin." After a quick look at the provided documentation link, I was happy to find that all you have to do is update your tailwindconfig.js file and include the tailwind/nesting plugin, which comes bundled with Tailwind.

And boom! 💥 Nested CSS support and two good-looking legal pages.

Ready for launch! 🚀

As you might have seen on my Twitter, I removed the “beta” tag, and we are now at version 1 of useaffiliates.com. 🥳

I am still working on a launch plan, but looking at my calendar, we’ll probably launch next week! In the meantime, feel free to share the projects with your creator friends and communities, and hopefully, someone will earn some money via finding an affiliate program that fits their content.

Now I will work on creating all the necessary content and media for the “official” launch.

Thanks again for reading this build log, and I hope to see you on launch day!

If you want to stay updated in the meantime, give me a follow on Twitter.

With love,

Twankrui