I built Scale and launched it a couple of weeks back. Many quote their poor or total lack of coding skills as the reason they can't build products.
I am a below-average developer. So, I thought of writing about how I built Scale.
If you want to read a short version of the story, you can read it here: Link.
Firstly laying out the different tools to be used
The idea was to use No-code tools. In the process, however, I understood the various limitations of such tools. So, this project isn't strictly NoCode, but rather in the LowCode reigon (well, this not just semantics :P).
So, here's what I used:
- Webflow (frontend)
- Webflow CMS (storing data)
- FinSweet (search and future filters)
- raw.githack (for hosting git URLs of SVGs)
- jscolor (color picker)
Webflow
Well, Webflow is really good for frontend. It is super easy to build complex layouts. I literally was able to change a 3-column layout to a 2-column layout in a single click.
A rarely spoken part is that Webflow really optimises the page performance/speed quite a bit. I have screwed up a couple of things though, which has impacted the speed. Need to sort that out 😑
Webflow CMS
The good part about Webflow is that its CMS feature serves as the database of the app. So, the data of all the illustrations, its tags, is on Webflow CMS itself. No backend.
But all this is not without limitations. I will explain a bit later.
FinSweet
Webflow does frustrate with the lack of certain features - it doesn't provide filters to search through its own CMS 😤.
So, for the search functionality, I needed an external scripts. Here's where FinSweet stepped in.
It builds the best Webflow add-ons and that too for FREE. Doesn't get better. So, I've used their script for search and also plan to use it for filters.
They also have some other interesting features such as the infinite scrolls, which I plan to use too!
Githack
Now, the low code part.
To manipulate the SVGs (change their color basically), I had to include them as a part of the page rather than an asset. Then I could use JS on top of it.
Here's where Webflow's limitation shows up again - it allows a max of 10,000 characters in its custom code element. So, after pushing the illustrations to github, I hosted them on raw.githack and got the production url.
Used some jquery to insert it into the page thereafter.
JScolor
Now, I had to change the color dynamically and needed a color picker. So, in comes JScolor.
It usage was straightforward. Apart from adding its script, I just trigger it "on change". And whenever it changes, it targets a pre-defined class in the SVG.
It is light but I want to include some pre-defined color options. So, I plan to try another option. Thinking of exploring this one by Simon: Link.
Parting thoughts
This was largely what I did to build the product. Honestly, it was tougher than what this article makes it to be. But surely, it is easier than what we conjure in our minds 🤓.
Anyway, if you enjoyed this, you might enjoy my tweets too. You can follow me here: https://twitter.com/KarthikS2206. Adios 😬!
Oldest comments (0)