Building a business from scratch - day 16
Tags: javascript, webdev, react, nextjs
Published: 2022-04-07 10:42:23

Welcome to day sixteen of the [useaffiliates.com](http://useaffiliates.com/) build log! This series covers my journey of building a business from scratch in public. If you missed day fifteen, you could [check it out here](https://www.twankrui.com/blog/building-a-business-from-scratch-day-15). I also uploaded today's [Twitch stream](https://twitch.tv/twankrui) to [YouTube](https://youtu.be/i5TOcC923lk) if you want to watch the replay.

## We are in beta (HELP)! 🥳

One week after the Alpha release, we are now officially in beta! 💥

There was not a lot of feedback on the alpha version, but looking at the difference between the alpha and beta versions and it’s more performant and polished. Especially the micro animations and removing some clunky UI elements made a big difference to the look and feel.

It would be **awesome** if you could take a few minutes to click through [useaffiliates.com](http://useaffiliates.com/). If you have any feedback or questions, please let me know in the comments.

Thanks! 💋 * smooch *

## Updated the caching headers 📃

Since removing the image cache last weekend, the application took a slight but noticeable performance hit due to my fix for the image processing rate limit.

After reading some documentation and opening my code editor, I noticed that I already had the caching headers in place. Did I do this already? 

The caching was only set for 1 minute, and after reading through multiple resources, I think putting the cache for half an hour is the perfect sweet spot between showing up-to-date data and making sure we get the most out of page caching.

This is the header I applied to the home and category page:

```json
Cache-Control: public, max-age=1800, s-maxage=1800, stale-while-revalidate=31540000000
```

The caching headers are only needed for the home and category pages, which load data from the server. The other pages are statically generated and are cached indefinitely until you trigger a new build or a rebuild.

## Updated the category tags 🔨

Last week's stream ended with a brief discussion about the category tags of each list item. Are they clear enough links? Would people expect to be able to select multiple? And do people notice when they switch pages after clicking a tag, especially now page navigation can be very quick with caching?

With this alpha feedback in mind, I clicked through multiple tags and decided that I should add an "active" state to the tag if the category tag matches the currently active tag. This way, people would notice when they switched pages.

They can't select multiple tags, but the users aren't stupid. If they try to do it, they will notice that only one tag can be active at any time.

While working on this, I also extracted the category tags from the `listItem` component. I contained it in its own component, so it's easier to work on its styles and functionality while also having the benefit of reusing it later.

Today I want to look at the category tags again, mainly because I am not digging the gray color. I want to play around with it to see if we can use a shade of orange from our color pallet. But I will only update this if it remains readable.

## Setup Typeform with stripe 🤑

If you have been following along with these buildlogs, you might have noticed that figuring out how to handle submissions and payment has been a pain in my ass.

My goals for setting up the pricing: 

1. Everyone following along with this series can replicate what I am doing.
2. I don’t want any authentication and back-end work for accepting payments.

I was kind of beaten at a certain moment because I wanted to do subscriptions rather than one-time payments. My Twitter feed is packed with magic MRR charts, and I wanted to be a part of that!

After talking to my dad last week, we came to a different conclusion; one-time payments are totally fine. It also allows me to decrease and increase pricing in the early stages of [useaffiliates.com](http://useaffiliates.com/) without worrying about my current subscribers.

### Embeded Typeform on site 📎

To accept payments, without writing any payment logic myself, I decided to use Typeform with their stripe integration. Mind you, you will have to upgrade Typeform to a paid subscription ($25 a month) to be able to use their stripe integration.

To implement the form on the submit page, I came across the react library of Typeform. Within a couple of minutes and a few minor styling changes, the form was ready to go, and I could start accepting paid submissions to my database.

## Removed empty categories 🚮

Before the beta launch, I removed the empty categories as a final step. I want to prevent any unfortunate user from hitting two or three empty categories. If they do, they’ll likely never come because they think the website is broken.

The categories I removed from the database are still present in the Typeform for submissions. This way, I can reintroduce categories once we have affiliate programs for them.

## Prepare launch 🚀

After I hit the big red button for the beta launch, I got underway with the launch checklist. What platforms do I want to launch on? What marketing material do I have to gather? Do I have to write a launch post?

Now I know for sure that I want to do a Producthunt launch. While I have been involved with a couple of launches, I have never actually done a launch from start to finish all by myself. Exciting!

Besides Producthunt, I am also thinking about other ways to create awareness for the launch. If you have any suggestions or want to see me try out something, let me know!

We are slowly but surely starting to see the light at the end of the tunnel. This means, dear readers, that this series will soon come to an end...

But not yet! 

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](https://twitter.com/twankrui).

With love,

Twankrui