Welcome to day twelve of the useaffiliates.com build log! This series covers my journey of building a business from scratch in public. If you missed day eleven, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.
Bye, static generation. 👋😢
When I added the filters to the front end, I envisioned how I wanted them to work; to make it easy for people to share links and navigate pages without losing their filters.
To do this, I decided to use query parameters. However, last week, I discovered that those don’t work with SSG (static site generation), which was to be expected after thinking about it.
As an alternative, I switched to SSR (server-side rendering), which is fine, but the time to first byte (TTFB) will be higher when using this approach. So, before I launch the project, I have to make sure that I implement caching for all the pages.
Small but essential improvements. ✍️
A few minor issues rose to the service now that the listing is working. After working on one significant aspect of the project for so long, it was fun to work on some smaller tasks. After all, these little things improve the project's UX.
Loading indicator next to the filters.
When the user updates the "payment type" or "cookie period" filter, there can be a slight delay because the application is fetching new (uncached) data from the server. That can be not very clear and maybe causes the user to reload or decide it's time for some YouTube instead of spending more time on useaffiliates.com.
Depending on how big the user's viewport is, it could well be that the first listing item is just slightly off-screen, so I wanted to include the loading indicator in view with the filters.
Now I could have gone the route of implementing an animation for this, but now is not the right time to sink time into this. For now, I'll just show a simple "loading..." label, which goes away once the data is updated.
Simple, clear, and effective. ✅
Clear filters when you get back 0 results.
Last week I implemented a "no results" message inside the listing. The only way to get to this message is by setting filters that return 0 rows from the database. So it would make sense to include a button to clear the filters so that the user can continue exploring without going back to the home page every single time.
So this button doesn't clear the category, which is somewhat of an issue because some categories don't have any affiliate programs associated with them yet. However, I still have to add another 20/30 affiliate programs, after which I will remove any empty category.
Those categories might come back later, but why offer a category as a filter option when I know that it doesn't return any results to the user, right?
Sponsored rows. 💰
While working on the listing filters, I also implemented the sorting for the sponsored items. Even when filtered on cookie period, I always want the sponsored list items to appear at the top because that's what the customer (the advertisers) expects.
Especially with the cookie filter parameter inside the URL, I can't only show the ads when the page isn't filtered. Otherwise, if a link gets shared internally with a filter enabled, I think the advertisers will feel screwed and not come back a second time around (I would).
Implementing the styling for the sponsored rows was relatively easy. I placed a conditional in the listing component, which determines whether I should show the sponsored styling on the homepage, category page, or both.
The hardest part about this was that I had an issue adding the absolutely positioned "sponsored" label. The height of the items inside the grid column was annoyingly hard to get right and to center. But in the end, with a little bit of help from flexbox, I moved the card for "implement sponsored rows" to the "completed" lane.
Setting up the 404 page. ⚠
With all these categories comes a greater chance that people might hit a 404 page. I will do my best to keep this to a minimum, but having a kind and forgiving 404 page will help with keeping sessions alive.
For this, I modified the Defaultlayout template a bit so that it also takes a button object prop. This way, I could add the “oops” message and a button to lead the user back to the safety of the homepage.
Now, the page still looks a bit empty, so I would love to include a funny meme. Preferably a short (less than 10 seconds) video or gif to give people a good laugh before going back to the homepage. If you have any suggestions, place them in the comments or drop me a line!
Setup the routes for the about and submit pages. 📄
I set up the templates for the about and “post a program” page at the end of the day. Tomorrow, I’ll have to think about the purpose of the about page. I am still unsure who to address, the creators or the businesses? Both?
This also means that we are close to launch day! Before launch, I want to do a tiny beta with all of you. I want to make sure that we catch all quirks and responsive issues. And what better way to do that than with all of you!
However, before launching the “beta,” there is still one hurdle left: the submission of affiliate programs and sponsorships. I want this to be a somewhat automated process so that the only thing I have to do (in 90%+ of the cases) is to add the affiliate program to the database. That means adding a form and payment.
Exciting stuff! I am looking forward to completing this project and getting underway with testing out different marketing strategies.
Thanks again for reading this build log, and I hope to see you tomorrow!
If you want to stay updated in the meantime, give me a follow on Twitter.
With love,
Twankrui
Latest comments (0)