> From building to selling - EP.04

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:

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