UI-snippets case study: a helping hand for web devs, by a no-code dev

Meet UI-snippets, an elegant solution to one of the problems web devs frequently experience: finding the right snippet for the job. Built by a single person in just a month, this case study is a fantastic example of what a no-code developer can achieve entirely on their own. See the story told by the platform creator himself: 

Client

I’m Kamil Nader, a frontend developer from Slovenia, and I’ve been freelancing and developing custom projects in the industry for the last five years. Beautiful and modern designs have always been fascinating to me. However, building something awesome from the ground up takes a lot of time. That’s why I decided to create one simple app called UI-snippets. 

No-code turned out to be the solution for this project. It turned out to be something I wanted to share with other frontend devs as much as I like using it on my own.

Challenge

As a one-man team, I was looking for a no-code or low-code platform instead of starting to code from scratch. Here’s my list of reasons why:

• Speed. Building UI-snippets via traditional coding would’ve taken twice as long, if not more.
• Cost. No-coding is simply a lot cheaper since every feature I require is included in the package. The development tools, hosting, domains, etc.
• Support. Traditional coding would’ve left me googling far longer than building the actual project. With Directual, I managed to surpass all the roadblocks by getting support from the platform creators themselves. 
• Updates and maintenance. It’s far simpler to use the visual interface of a no-code tool rather than going through every line of code. Introducing new features and performing maintenance both faster and easier.  

How did you discover Directual?

No-code platforms have always been my interest, and Directual is not the first one I’ve tried. Other platforms couldn’t offer what I was looking for in terms of features, especially since I use custom code often. 

I found Directual on ProductHunt, and later saw it at AppSumo as well.

Technology

• Backend: Directual
• Frontend: Directual
• Extra tools: CodePen, Prism.js

What did you build with Directual?

I always like to see beautiful and modern designs in my projects, which is why search the web continuously for noteworthy elements. I’ve made UI-snippets to be a simple app containing an increasingly large collection of awesome snippets—checkboxes, buttons, toggle switches, inputs, and more types later.

‍

Anyone who works with frontend—web developers, no-coders, full-stack devs, etc, can use UI-snippets to find, collect, edit, save, and implement snippets they like.  All without spending an eternity browsing through hundreds of websites. 

Users can use a personal library to collect and edit snippets and use their own Creators page to share their private snippets with the public library. The Creators page has a profile image, short bio, links, contact details, and snippets. 

Some noteworthy features:

• Snippets are displayed with the help of Directual’s card component. The template engine is awesome, as the background color is automatically changed based on the snippet's code.

• One of the Directual scenarios prevents users from adding identical snippets to the My Favorites page, which is also a nice and sensible thing to have.

• With Directual cards actions feature, users can easily add snippets to My Favorites and My snippets page and also count them.

• Directual API filtering makes sure the snippets (objects) are filtered according to their creator.

• With Directual new released feature which includes natural language processing via OpenAI, users can quickly search snippets by name, category, description or even code that is inside snippet.

• There is a lot of automation set up in the backend on Directual scenarios. I encourage everyone to join UI-snippets (free of charge, of course) and see how everything works with their own eyes.

Why was Directual chosen as a base technology?

I wanted a large open-source element collection with the ability for saving to favorites, making edits, storing to personal library, and sharing to the public library as well.

Directual’s powerful and scalable database and API builder were instrumental in this. Most of all I enjoyed using scenarios, which helped me automate any kind of backend logic in a visual interface. This workflow set Directual apart from competitors for me, in a big way.

What could be improved?

When it comes to the backend, frankly, nothing. It’s fantastic as it is. Since I specialize in web development, the frontend has some things I would love to see built into the platform, namely:

• SEO features: it would be amazing to prepare SEO functionality for the website without custom code.
• Favicon: I bypassed this with custom code, but again, would be nice to have.
• 404 pages and templates: right now, a URL typo leads to a template page instead.
• Form improvements: a custom URL to redirect the user after form submission will be a great addition, but again, easy to do with custom code.
• Multiple card object selection: it’s a small thing, but it will contribute to the overall health of pre-made UI components. 
• More templates! A calendar would be lovely to have, and anything and everything will be a boon to have.

Plans ahead

The app is actively growing, and I’m monitoring incoming feedback for other things I can improve. More snippets, categories, and functionality is definitely coming, but it’s worthwhile to lead the project in a similar manner to Directual: with a public roadmap. The community is everything, after all!

Afterword

Got questions about this case study or Directual? Send us a message at hello@directual.com and let’s chat! Or better yet, let Kamil know what you think about UI-snippets by sending him a message at kamil@ui-snippets.com, or to his Twitter: @UI_snippets.