DEV Community: Twan kruiswijk

From building to selling - EP.15

Twan kruiswijk — Thu, 09 Jun 2022 15:12:54 +0000

Welcome to day fifteen of the Crossroad build journey! Kind of a bonus day! 😬

This series follows my journey of indie hacking a product from building to selling. If you missed day fourteen, you could check it out here.

We’ve launched! Sort of! 😅

Have you really launched without submitting your product on Product Hunt? Well, I had so many things left on my to-do list that I decided to treat today as a soft launch for the people who followed this journey and do the big interwebs reveal tomorrow.

I still had to shoot the video for the website and prepare the entire launch (copy, images, etc.) for the Product Hunt launch. However, I woke up sneezing and coughing my brains out, so it took until noon until I was able to shoot the video.

I briefly thought about launching a little later in the day and updating the site throughout the day, but if you want to do something, don’t half-ass it. Besides, no one will send me hate mail for launching a day later.

And while I was a little annoyed with myself this morning, I am glad I took another day to put everything in order!

Shot a video! 🎥

Lights? Camera? Action! For the landing page, it was the idea from the start to show visitors how easy and fast it is to use the template.

For some reason, I thought it was a great idea to do it in a single take, and after 30 or so takes, I finally had a spontaneous and complete video! Not that there is anything wrong with editing a video, but I know that would have cost me yet another day.

After uploading it to YouTube and adding it to the website, I must say that I am thrilled with how it turned out. I believe having any video going over your product is better than not having any video. It’s just the way people consume content in this day and age.

Let me come back from that just a little. You have to ensure that the video and audio quality are decent/professional.

Scheduled the Product Hunt launch! 👋

With the video in place, all left was to create the pictures and write the copy for the PH launch. Having done it quite recently for useaffiliates.com, I already had a good idea about what I needed to do.

And after uploading all the content and media, I scheduled crossroadsui.com to be launched on Product Hunt tomorrow! Please, if you have some time tomorrow, head over to producthunt.com and give Crossroads an upvote, and if you want to be a real MVP, leave a comment. ♥

Thanks again for reading this build log. Have a great day, and I hope to see you on Product Hunt tomorrow!

With love,

Twankrui

From building to selling - EP.14

Twan kruiswijk — Wed, 08 Jun 2022 15:13:34 +0000

Welcome to day fourteen of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day thirteen, you could check it out here.

And the journey of building the product is almost coming to an end! 😮

Wrapped up the codebase with templates. 🏗

Finally, I wrapped up the codebase for V1! All the blocks are battle-tested, the readme includes some instructions, and I also included a license file. But there was one thing still on my to-do list; the starter templates.

When I started coding the blocks for this project, I thought it would be a good idea to include a couple of templates. This way, people don’t have to start with a blank canvas. They can then add/remove some blocks or keep them and just update the content.

I created the templates based on a couple of personas I defined during the design phase:

The video creator
The blogger
The developer
The publisher

These templates include blocks specifically crafted for these target groups. And besides these templates, it also ships with two link in bio templates, which come with the free and lite versions of the product.

Shipped the product to Gumroad. 🚢

After making the final commit to Github, it was time to package everything up. I created a zip for each package and uploaded them to Gumroad.

And with that done, I can now officially start selling the product! 🥳

Wait a minute… Selling? Maybe I first have to focus on some marketing before saying that I can start selling the product, haha.

So now that I am almost at the point of launching this thing, what is my goal?

My goal is to sell at least 100 copies of Crossroad. I know the target audience is there, so it’s up to me and my marketing skills to reach and convince these 100 people to buy the template.

However, let’s be honest, I think I am already going through the roof once I make a single sale. 😅

You know what really grinds my gears? ⚙

One thing that really grinds my gears is that I had to make a separate product for the free version of Crossroad. If you provide a free version as a variant, the customer has to manually fill out the price of the lite/pro variant of the product to be able to go to the checkout. 🤦‍♂️

Why won’t the price field update to the product’s price when you click on one of the paid variants? If I hadn’t noticed this, it would have cost me sales & support tickets.

UGH. Oh well, at least I caught that before launch.

Get Crossroad before launch today! 🚀

It depends a little on when you are reading this, but since you’ve been following along with this journey, I wanted to thank you for your support by giving you early access to the product.

THAT’S GENEROUS OF YOU, TWAN. You might think. Well, wait, there’s more!

If you use the code iamalegend, you’ll get %10 of both the lite and pro versions.

Click here to open the Gumroad page.

See you on launch day! 👋

Tomorrow is the big day, launch day! I am currently working on the launch materials, and while it’s going to be tight, I think I’ll make it before tomorrow afternoon. If you have the time tomorrow, please keep an eye on my Twitter and give the product an upvote on Product Hunt.

I am incredibly excited about the launch. I hope you share some of this excitement.

Thanks again for reading this build log. Have a great day, and I’ll see you tomorrow!

With love,

Twankrui

From building to selling - EP.13

Twan kruiswijk — Fri, 03 Jun 2022 09:29:21 +0000

Welcome to day thirteen of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day twelve, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

The first Crossroad site is live! 🚀

Today my primary focus was building the first site that uses crossroad for its UI. What better project to take on than creating my own link in bio page? After all, if the author doesn't use it, why should you?

I decided to build my link in bio site with NextJS. I can always spin a site up quickly using this framework, and it also supports enough out of the box for all the data fetching I'll need down the road.

I decided to hardcode everything for this version of my link in bio page. While I plan on fetching my featured blog posts from my database, my main focus today was fetching any remaining bugs and missing features.

It turned out, especially on Safari (the new IE, if you ask me), that there were quite a few nasty (but easy to fix) bugs. For example, my entire social row wasn't visible because of a flexbox inside of another flexbox. 🤦‍♂️

After a little under two hours, with a lot of jotting things down and improving certain aspects of the template, my link in bio page was finally live! Yeah, you read that well, LIVE!

If you want to see the site in action, here is the link:

links.twankrui.com

Prepping for launch week. 🚚

Now that I have the product's final "to-fix" list, I finally have a launch date. I'll launch the product on:

Thursday, June 9

So I have roughly three days to wrap up the template, put it up on Gumroad, buy a domain for the landing page, and prepare the launch, including the copy and assets. It seems doable, so let's go for it!****

See you next (launch) week! 👋

With links.twankrui.com up in the air, we have defined the final roadblocks to overcome before going live. All in all, I need two more days of fixing and preparation before we can go live next Thursday!

I am incredibly excited for the launch next week. I hope you share some of this excitement.

Thanks again for reading this build log. Have a great day, and I’ll see you next Tuesday!

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

With love,

Twankrui

From building to selling - EP.12

Twan kruiswijk — Thu, 02 Jun 2022 08:11:56 +0000

Welcome to day twelve of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. 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.

Finished the landing page! 🚢

There was not much left to do for the landing page. All that remained was creating the assets and applying a couple of minor updates here and there. I can write a whole section about all the changes I made, but since you are following along with this journey, here is the staging version of the site:

Click me to have a sneak peek!

*Not all the buttons work yet. No early access to the crossroad template just yet! 😁

I will probably make a couple more tweaks before I go live, especially the mobile version can use a little bit more love and the assets and copy on the page. However, I am pretty happy with how the landing page turned out. In particular, I am pretty fond of the header!

Refactored and tested all the blocks for release. 🧪

After finishing the landing page, I had some time left for Crossroad today. I decided to test and refactor all the blocks. Last week I updated the names and class names of the block, and as it turned out, there were a couple of breaking bugs that I needed to fix.

While getting rid of these bugs, I also decided to split out the required.css from the style.css. This way, users don’t have to look at the required CSS and know that they can customize everything inside of style.css to their liking.

I am thrilled with how the template turned out. If you can copy and paste inside an editor, you can pretty much set up your own link in bio page with Crossroad. Now it’s up to me to bring that feeling across inside the introduction video. I am working on the script!

Preparing the marketing stuff. 🧭

You can’t launch a product without thinking about marketing. Launching isn’t as simple as hitting “submit” on product hunt and waiting for the people to spend their money.

Since I will be the user of my own product, I plan to do a tutorial series on the popular development & indie hacking blogs. After all, those are the people I am making this product for (people who can code, even a little bit).

Now I won’t be writing “how to setup Crossroad” blogs. No soul will click on that. I am thinking of creating blogs around hooking up the template to data sources, for example, fetching your featured/most recent blog posts from WordPress and Ghost CMS with NextJS (and other frameworks).

I will be using Crossroad for the front-end since I am focused on explaining how the data fetching works. Of course, I will write a paragraph about Crossroads to tickle the readers' interest. Still, I am focused on providing value to the people looking for a tutorial on how to work with specific APIs.

See you tomorrow! 👋

Tomorrow I will build my own link in bio page, on stream, with Crossroad. This way, we can battle test Crossroad and provide an example for the landing page.

I am also planning on building a script so I can create the lite, pro, and free versions with a single command. Exciting stuff, exciting times!

Thanks again for reading this build log. Have a great day, and I’ll see you tomorrow!

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

With love,

Twankrui

From building to selling - EP.11

Twan kruiswijk — Wed, 01 Jun 2022 09:43:11 +0000

Welcome to day eleven of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day ten, you could check it out here. I also uploaded day ten’s Twitch stream to YouTube if you want to watch the replay.

It’s time to move on. 🚶‍♂️

Another week and more time to work on Crossroad! The last few weeks have been somewhat of a struggle; I was stressed about what I wanted to do once my sabbatical is over by the end of this month.

Last weekend, after conversations with many friends and family, I finally bit the bullet. I decided that while I want to keep my business for my projects, I want to join a team again as a front-end developer.

I miss working in a team, and I want to surround myself with more senior/talented developers to learn and grow at a faster pace.

After making this decision, I was finally able to breathe again. The anxiety has made room for excitement!

So I guess if you are looking for a front-end developer to join your team, I would love to grab a (virtual) coffee!

Enough about me; let’s talk about the progress I made on Crossroad!

Design & animation changes! ✍️

The more I work on the landing page, the more design changes I implement. When I continued working on the front end of the landing page, I thought to myself that the page was still a bit flat and dull.

This made me realize that I should be spending more time on the design in the future. While it’s easy for me to make these changes during the development phase, it still costs me more time than applying them in Figma.

Besides, if I ever want to delegate this kind of work, it needs to be perfect in Figma to hand it off to a developer.

Included a new header font. 💬

If you’ve followed my blogs for a while, you might have noticed that I am a sucker for nice font pairs. There is something magical about the glow-up a design can receive by mixing and matching different fonts together.

In the case of the Crossroad landing page, I was only using the inter font, which made the design feel a little stiff. I decided to pair it with Raleway, which added a bit of personality to the page. The Raleway font is a bit more playful, which Inter is not since it’s focused on readability, which makes for a solid font pair.

Introduced a body background texture. 🎨

In the case of the Crossroad landing page, I was only using the inter font, which made the design feel a little stiff. I decided to pair it with Raleway, which added a bit of personality to the page. The Raleway font is a bit more playful, which Inter is not since it focuses on readability, making for a solid font pair.

I don’t know if it’s because it makes the page more “unique,” but I also find it easier on the eyes while reading the content when you mix a texture into the color.

Animations. 🎞

Last but not least, I added a bunch of (micro) animations to the landing page. I always wanted to play around with micro animations, and for this landing page, I finally had the chance to apply them.

Personally, I’m not too fond of animations that hijack the page or scroll. However, since we are not working on paper but with screens, things can transform, float and move around to support the story you want to tell.

I added a subtle float animation to the icons in the header and introduced a draw animation for the lines between the sections. Especially the animating lines feel like they guide you through the features toward the pricing section.

All the animations still require some tweaking, but I am happily surprised by the impact they make, even though it’s subtle.

See you tomorrow! 👋

Hopefully, we’ll get to 100% towards the end of the week. I am not sure if we’ll launch this week since I want to work on some marketing material before hitting the LAUNCH button.

For the people interested, today I will be doing another Twitch stream where I’ll walk you through all the changes I made today, as well as my plans going forward. If you have any project-related questions or not, come hang out!

Thanks again for reading this build log. Have a great day, and I’ll see you tomorrow!

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

With love,

Twankrui

From building to selling - EP.10

Twan kruiswijk — Thu, 26 May 2022 12:50:37 +0000

Welcome to day ten of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day nine, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

Landing page work. 🛠

Today I continued building the landing page. I only had about two hours today, so I wanted to make them count by setting up the entire landing page, but without the bells and whistles.

I coded everything that could be implemented relatively quickly and left things like the mobile navigation, the images, and some animations for next time. This approach is always very satisfying because you can make significant progress (visually) in such a short amount of time.

During the build session today, I was amazed by the power of CSS grid. So much that I wanted to let you know about a cool feature CSS grid ships with!

CSS grid is awesome! 😎

I think CSS grid is the most awesome thing introduced in CSS since I started working as a front-end developer. I relied on libraries like Foundation and Bootstrap for grids early in my career, but with CSS grid, I can roll my own grids with more flexibility and without pulling in a library.

Note; there is absolutely nothing wrong with using a library, especially when working on a bigger project where you collaborate with multiple front-end devs. However, I think CSS grid is more flexible, especially combined with flexbox for complex(er) layouts.

To highlight why I love CSS grid, let’s look at the pricing block. Usually, with something like Bootstrap, you would need two rows and struggle with breaking out the “Pro” block from the rest of the columns. Let alone make this responsive, with different orders depending on the screen width.

With CSS grid, you can utilize grid-template-areas which might look a little odd if you’ve never used it:

.pricing__grid {
  display: grid;
  grid-template-areas:
    '. b .'
    'a b c'
    'd d d';
  grid-gap: var(--spacing-md);
  grid-template-rows: var(--spacing-xl) 1fr 0.5fr;
}

Have a look at the code above. You can probably make an educated guess at how the grid will look, even if you haven’t seen the design.

But what about making the grid work on mobile? You can’t even fit two columns next to each other on mobile, let alone three. Well, prepare to have your mind blown (mine was)!

@media (max-width: 768px) {
  .pricing__grid {
    grid-template-rows: 1fr;
    grid-template-areas:
      '. b'
      'a b'
      'c c'
      'd d';
  }
}

@media (max-width: 640px) {
  .pricing__grid {
    grid-template-areas:
      'b'
      'a'
      'c'
      'd';
  }
}

With some good old media queries, you can modify your grids however you want. On mobile, I wanted to show the PRO version on top, as you can see. I might want to change that later, but it was as easy as switching two characters inside the grid-template-areas.

Sorry, I am geeking out as a front-ender, but I wanted to share my thoughts on CSS grid for some time now as I have been using it extensively across my projects. If you are currently working on the front-end of your project, I encourage you to check it out!

Marketing ideas. 📢

Now that the launch is around the corner (1, maybe 2 weeks) I am actively thinking about how and where to reach my audience. Since this template/component library is tailored towards developers and (technical) creators, I can find my audience on dev.to, Hackernoon, Twitter, Indie Hackers, and other similar forums and blogs.

Once I have the tool ship ready, I will start writing tutorials on how to, for example, pull your latest post from the WordPress API to show on your link in bio page. This way, I am providing value by teaching people how to pull the newest post from the WordPress API, while I can also promote my product by letting them know in the post that they can follow along with my front-end.

To reach more developers, I’ll probably write the tutorials in NextJS, RemixJS, and maybe some other frameworks.

Until next week! 👋

All by all, I didn’t have much time to work on the project this week, but I did have fun! I played around with a lot of cool stuff, and even off-stream, I am doing a big refactor of the product’s codebase.

The refactor isn’t that interesting since it’s mostly me sitting in front of my computer thinking about how to name something and then updating the file and class names. But don’t worry; before launch, I will write a more detailed post on what changes I made to the product and why.

Thanks again for reading this build log. Have a great day, and I’ll see you next Tuesday!

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

With love,

Twankrui

From building to selling - EP.09 😢

Twan kruiswijk — Wed, 25 May 2022 09:36:35 +0000

Welcome to day nine of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day eight, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

Life update, no more regular streaming schedule… 😭

You might have noticed that I haven't posted in two weeks. I am slowly but surely looking at the end of my sabbatical, which means I have to start making an income again.

Last week, after a week of national holidays, I planned to get back to streaming. However, I was busy applying for interviews for a freelance role. After one speedy interview and doing one technical assignment, I didn't hear anything back…

I know this is part of the game, but I was gutted. I got overwhelmed with stress and a horrible case of imposter syndrome. I need a freelance job to pay the bills, but most jobs require TypeScript and front-end testing. I never had to use two things before professionally, thus the imposter syndrome.

To catch up on those two things, I will allocate more time to learn both things over the coming weeks. I want to make sure that I can land myself a freelance job (or job if I have to) before money becomes a real issue.

I will still be streaming, but not on a regular schedule. I am (incredibly) sad about this, but I will return once I have my cash flow under control!

Design overhauled. 🏗

This week I tweeted, “How it started vs. how it’s going. Taking a week off the project helped me let go of some design decisions.”

See the tweet with the images here.

When I opened Figma after a week, I didn’t feel the landing page design I had made. I didn’t match the product, and it wasn’t clear enough (without reading the copy) what the landing page was about.

While I liked the flow of the content and even parts of the layout, I decided to go for a different color pallet, give the page a more distinctive header, and focus on the details like the button sizes and whitespaces.

After a morning of tweaking the landing page, I couldn’t be happier with the result. The landing page provides a clear value proposition from the get-go, shows you how easy it is to use, and then walks you through the benefits until it ultimately leads you to the buy section.

With the design done, it’s time to start building it.

Back to good old HTML & CSS. 💕

In my last update, I shared my plans to use NextJS for the landing page. After thinking about it, it doesn’t make much sense to introduce that much complexity for a simple page with some text, images, and a link.

I mean, there is no API I need to consume and the layout also isn’t complex enough that I need something like Tailwind to style the page.

So, after creating an index.html and a style.css, I got to work! One thing I love about good old CSS is how far it’s come after I started working in front-end development. With the broad support for CSS variables and CSS grid, you can achieve (almost) anything without pulling in additional libraries.

Especially the last couple of weeks, I have been working on stepping up my CSS game by using CSS variables as design tokens. After setting up the design tokens yesterday, I noticed some inconsistencies, or better lack of consistency, in my Figma design, to many different font sizes, white spaces, button sizes, etc.

After fixing these inconsistencies, the landing page looks more professional and is super duper easy to make changes now. If I want to change any color, size, or background, 99% of the time, I now only have to update a single CSS variable (design token).

Awesome, isn’t it!?

Let’s continue working on the landing page! 🔨

Tomorrow I will continue coding the landing page. Hopefully, I’ll get close to 100% finishing it. However, we (me and Twitch chat) are still coming up with new ideas and questions, which means that I am tweaking the design here and there.

For example, while writing this blog post, I am thinking about changing the heading font to a different font. I think that will add the final piece of character to the landing page.

We can launch Crossroad next week if we get close to 100%! 🚀 (but before that, let’s talk about marketing for a bit…).

Thanks again for reading this build log. Have a great day, and I’ll see you tomorrow (or in my stream today)!

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

With love,

Twankrui

From building to selling - EP.08

Twan kruiswijk — Thu, 12 May 2022 09:24:14 +0000

Welcome to day eight of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day seven, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

Finished the design. 🚀

When I looked at the designs, I made yesterday, I noticed what was not working. The dark background colors made the whole page feel closed and depressed. I needed to open things up, so that meant that I had to get rid of the background color and start using whitespace.

You can follow this link to see the final design.

As you can see, I went in a completely different direction with this design. More whitespace, a light green theme, and making the video an even more critical part of the header. The scribbly lines also make the page feel like you are following a path, the path to purchase! 😏

However, the design isn’t perfect yet. For example, the Crossroad “logo” in the navigation needs to be 2x bigger, and I need to create better images for the content. While the spacing is way better than yesterday’s version, I can make it a bit more consistent and the line height of the text.

Maybe I’ll update the design tomorrow, but I think I’ll make these changes while working on the front-end for the sake of time.

P.S. Did you know that Figma released dark mode this week? It’s incredible, dark mode everything!

Using my own product. 🛳

While working on the new header, I thought, "If I was buying any template, I am not interested in the marketing page until I've seen it in action." So, since this product is built because I have to scratch my itch (and some people on Twitter), I will create links.twankrui.com as the first site using the Crossroad template.

To prove the product works, I will set up my link in bio page before I am going to launch the product. This way, I can include the "show example" button so people know the product is actually already used in a production environment.

I plan to add a "showcase" section once other people start shipping their link in bio pages.

Offering a free version. 💲

Besides creating an income for myself, I am also learning about marketing. I need to deepen my knowledge of the field to get better at making stuff that sells and actually selling it.

I am reading a Book called "Commonsense Direct and Digital Marketing" recommended to me by my father. It's a pretty dense book, and thus far, it's been a great read.

Today I read about how companies give away free stuff to gather email addresses for leads. Sometimes, people are likely to buy from you after getting something for free. This isn't new for me, but I had to read this to come up with an idea for Crossroad.

In the pricing section, I am going to add a free option.

I need to develop a template that both include enough blocks to use as your link in bio page, but also makes you want to buy the pro version for more blocks.

This option will allow me to gather the email addresses of the people who got the free version, and then I can start to talk to these people to see if I can convert them to the lite or pro version. If not, I can still get some value in the form of feedback.

Maybe they are looking for something in a link in bio tool, that even Crossroad doesn't offer. If so, I want to know what it is.

Let’s build the landing page! 🔨

Tomorrow I am going to start coding the landing page. We’ll set up the NextJS environment and also research how we can implement the documentation for the template. Ideally, I want to have those in the same project.

So, back to coding, it is!

Thanks again for reading this build log. Have a great day, and I’ll see you tomorrow (or in my stream today)! 🚀

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

With love,

Twankrui

From building to selling - EP.07

Twan kruiswijk — Wed, 11 May 2022 09:59:13 +0000

Welcome to day seven of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. 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.

Designing the sales page. 💰

With the product as good as finished last week, it’s time to answer “how can people purchase this product?”. Well, for that, you need a place on the internet where people can hit a “buy now” button!

Content first. ✍️

Most of the time, I am tempted to jump straight into Figma and try to come up with a design. Taking this approach usually results in spending a lot of time making something look pretty while you don’t even know if the design matches the story you want to tell.

So today, instead of opening Figma, I opened up Notion and thought about what story I wanted to tell on my landing page.

I want to bring across a couple of unique points for crossroads;

It’s a one-time purchase product, so you aren’t paying for another monthly service. I am interested in seeing if I can persuade some Linktree users to migrate to Crossroad.
A link in bio page can be more than just some social media links and a couple of buttons.
You can bring your framework, as this product is split up into blocks that are easy to turn into components inside any framework.

With this information in mind, I started to work out the content for the page. What I came up with is the following structure.

Header, show an example and right of the bat let people know they can save on their monthly fees.
• Video, show the lead that even if they can’t code, it only takes a couple of minutes to set up your page. To take away any doubts about “this is too difficult for me, I can’t code.”
USPs, going more in-depth about how Crossroads differs from other links in bio templates and services.
Pricing, section with links to Gumroad.

I think the flow of the page works pretty well. It takes the lead through the product, shows them how easy it is to set up, gets them excited with the USPs, and asks them if they want to buy the product.

Beyond the landing page. 🧑‍🚀

Besides the landing page, I also want to set up a page that showcases all the blocks. This way, people know upfront what blocks are part of the lite version and which are part of the pro version.

I think this can prevent confusion, which might lead to a couple of sales for people who are otherwise doubtful about what blocks they are otherwise getting. Heck, someone might even go to the block page and gets some inspiration which leads to a sale.

Providing an upgrade path. 📈

People who purchase the lite version might eventually like to upgrade to the Pro version to get access to all the blocks. I have decided to use Gumroad for selling this product, which doesn’t include upselling, which sucks.

To still offer an upgrade path, I will let people know that they can email me for a discount code. Not the most convenient way in the world, but better than not providing an upgrade path.

Working on the designs. 🎨

I want the landing page to look similar to the product's design. That means using the same design system/language. I don't want to create a disconnect between what people are expecting by looking at the landing page to get and what they receive with the template.

When I started working on the designs, I thought to myself, "I can't do this; I am a horrible designer." I always go through this phase every time I start a design project.

At the end of the day, once I started adding more images and polished the spacing a bit, I remembered; that it's all about iterating over and over when it comes to designs.

Sometimes you are just a couple of tweaks away from having a "this is more like it" moment.

Just keep swimming. 🐟

More designs. ✏️

Tomorrow I’ll continue working on the designs. Looking back on today, we merely made one design after working on a couple of wireframes.

I want to finish the design that we started with today, iterate over it a couple of times, and once that’s done, I also want to make one or two variations of it.

Besides the design, I am also working on the refactor off stream. Don’t worry; it’s nothing more than refactoring the CSS and renaming the blocks—meaningful work but a bit boring to share on stream.

Thanks again for reading this build log. Have a great day, and I’ll see you tomorrow (or in my stream today)! 🚀

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

With love,

Twankrui

From building to selling - EP.06

Twan kruiswijk — Fri, 06 May 2022 10:27:46 +0000

Welcome to day six of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day five, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

Coded all the blocks, now it’s time for a refactor. 🔍

Done! All the blocks are marked-up and styled. 🚀

It went faster than expected, but I got into a flow yesterday and today. It also helps that with every component I coded, another component got easier to make since they share some styles.

Now that all the blocks are finished, it’s time for the big refactor. I chose to code all the components without thinking about the file structure too much. That means that I have to split out the big CSS file into smaller modules, but also that I;

Have to think about how to name the blocks properly
Update all the copy because now it’s just random links and titles from my content.
Include better, royalty-free, optimized assets.
Have a better look at the CSS variables.
Reduce the number of similar colors. We now have multiple light gray colors. Let's pick one for consistency.
Write a readme.

Of course, the template is already working. I could only work on naming the blocks better and shipping with one big CSS file. However, resolving the points above will make the product easier for the user, make it look/feel more professional, and reduce support requests.

Also, during this refactor, I also had another chance to touch up the designs a bit. I am pretty happy with what we got, but I still feel there is a 10/20% improvement opportunity. It would be great that, besides being a convenient template that solves a problem, that people also see it and be like, "I didn't know I wanted a link in bio page, but this looks awesome.”

Going beyond this template. 👨‍🚀

Thinking about what pieces of documentation to write, I slowly start exploring the idea of taking this project further than just selling this template that I am currently building. Most of the documentation, I think, will be perfectly applicable to other HTML templates.

Okay, cool, so?

If people stumble upon my blog/documentation via google, I would be a fool not to offer them cool HTML templates to look at and purchase. Maybe some simple, easily customizable landing page templates for small businesses? Or other UI packages? Suggestions?

If this project turns out to be a success in the long (long, long, long) term, I can build my own website builder based on the templates I created. But let’s not get ahead of myself and try to make this template a success.

See you next week!

Over the next couple of days, I will be working on the refactor alongside my other projects. Don't worry; whatever I do, I will include it in next week's update!

So what's the plan for next week? I am designing the landing page, preparing some marketing material, and doing my best to do the actual launch towards the end of next week.

Stay tuned!

Thanks again for reading this build log. Have a great day, and I’ll see you next week. 🚀

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

With love,

Twankrui

From building to selling - EP.05

Twan kruiswijk — Thu, 05 May 2022 11:02:40 +0000

Welcome to day five of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day four, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

Coding all the blocks! 💻

Today was a productive day! I finished the header blocks, including one with an awesome video background. I am on track to implement the rest of the blocks tomorrow. This means that we are close to wrapping up the product development.

Before I do, I will have to refactor the codebase a bit. I wouldn’t say I like how I named the files, and even during development today, I found plenty of things that I have to touch up before launch.

For example, currently, there is a lot of duplicate CSS. That’s not the end of the world, especially since I want users to copy and paste individual blocks. However, if I can use the same class, it’s easier for me to maintain in the future if a bug occurs.

Getting interest from different corners. 🥳

While working on the product on my live stream, I often get the question if my product is already available to buy somewhere. That’s awesome! People want to buy my template!

Especially on Twitch, where my fellow developers are watching me code, people like the idea of using the template for their link in bio, or even as a simple personal landing page, without having to write any front-end.

This also makes me think about the phase after finishing the product; marketing. I have to build the landing page, but I also need to think about spreading the word about my template. I want to reach more developers, so I might use my template to do a couple of tutorials. For example, how to hook up my template to the WordPress or Ghost CMS APIs.

Even if people don’t want to purchase my template, it can still be valuable tutorials.

Again, so many ideas, I am all fired up! 🔥

Thinking about the documentation. 🤔

Part of customer success is ensuring that everyone, tech-savvy or not, can create and deploy their link in bio page. I am constantly making notes on what tutorials to write and even on what tutorials to screen record.

Prominently on the landing page, I will embed a loom video showing how you can build and deploy your very own link in bio page in two (or five 😅) minutes. This video has to show how easy to use the template is and also for the less tech-savvy people that deploying a website isn't difficult anymore.

I am also considering setting up a blog. I already mentioned a blog about hooking up the template to the WordPress or Ghost CMS APIs, but there are many more APIs I can write a tutorial on. Other than that, I can also write blogs on how to add analytics scripts to the HTML file.

Not only does this help with customer success, but it's also great content marketing. Writing and publishing documentation that can also rack up organic traffic.

Let’s finish the blocks. 💪

Hopefully, I will have finished coding all the blocks by the next update. Then we can start thinking about creating the landing page and the documentation. While I am highly tempted to release this project sooner rather than later, I want to spend some extra time researching how I can make a good landing page for this project.

However, first things first, after coding all the blocks, I have to package the product in a way that every user understands how to work with the files. Otherwise, I will be getting a ton of support requests.

Thanks again for reading this build log. Have a great day, and I’ll see you tomorrow (or in my stream today)! 🚀

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

With love,

Twankrui

From building to selling - EP 04

Twan kruiswijk — Wed, 04 May 2022 10:24:05 +0000

Welcome to day four of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day three, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

Design phase completed! ✅

I’ve been designing away for a couple of afternoons now, and more and more, I got tired of looking at artboards and wondered how it would look inside of a browser. While I love deepening my knowledge of Figma, I feel like I can move faster when I do the final design iterations during the front-end phase.

So after having designed the last couple of components in Figma, I dragged the “design blocks” card to the "completed" lane. It is time to move into development mode. Let’s make this product. 💪

Setting up the development environment. 👨🏼‍💻

As explained in my last build log, I avoid using JavaScript for this project. So, I only have to write HTML and CSS. I quickly decided on using the following file structure:

index.html
- The file that ships as a good default template will include a button for the project's documentation.
styles.css
- The file containing all the basic styles for the layout and blocks.
Blocks
- A couple of folders containing the different HTML and CSS files for each block. This way, you can easily copy and paste the contents of both files into your template file.
Templates
- Some folders containing the pre-defined templates of the personas I made in Figma. Great starting points for people who can’t decide what blocks to use.

I think this file structure is pretty easy to understand for any user, technically savvy or not. I am incredibly excited about the templates because I think many people will find them helpful, which might motivate them to add a block or two of their own from the blocks folder.

Build tools. 🔨

Tomorrow (or the day after), I want to write a script so that it’s easier for me to work on the project. Currently, I am writing inside of and managing multiple files. The HTML will probably remain copy and paste work, but if I could treat the CSS files as modules, that would be a great time saver. Now I am copying and pasting code around, which is very prone to error.

That makes me think I might want to ship with (or recommend) at least some easy way to spin up a development server. Any suggestions that are easy for most people to understand?

Developing the blocks. 🧱

I started developing the first couple of blocks with the file structure in place. First, I set up some of the base styles for the fonts and spacings. I have decided not to include a reset because if users want to bring their framework (or implement this as part of their site), I don’t want them to run into any hard-to-track down issues.

To speed up the process, I used TailwindCSS’s font values to set some reasonable defaults for the fonts; in the same way, I used their color pallet to design the blocks.

So far, coding the blocks is going well. The only thing that bugs me is the constant copying and pasting during development, but that’s not something the user will be bothered about since they will copy and paste working blocks instead of forgetting to copy over a class name. 😅

Scaling all the way up to desktop. ↔️

The primary focus of this project is providing a “link in bio” page, which means that it’s focused on delivering a great experience on mobile.

However, now that I am coding the blocks, I also set the layout up, so it goes to a max-width of 760px. This way, it doesn’t look all that off on the desktop, and I might even code some elements to take advantage of this extra space to render more elements on one row.

Let’s code some more blocks! 🚀

Now that I have kick-started the development process, I will continue building all the blocks. Hopefully, I’ll finish developing the blocks this week to spend next week wrapping up the product and design/build the landing page.

It would be great if we could launch this product next week or the week after. But that all depends on how fast I can code these blocks. 💪🏼

Thanks again for reading this build log. Have a great day, and I’ll see you tomorrow (or in my stream today)! 🚀

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

With love,

Twankrui