6
7 Comments

Roast my new product – a tailored UI components for Rails apps

Hi fellow hackers!

A few months ago, I launched my product RapidRails UI. Since then I received great feedback and ideas from clients and developers. While creating more UI components, there was a percolating idea that I decided to pursue.

It is the moment when I realized turning a design into a functional, stylish Rails app requires a blend of front-end and design expertise many might not have on hand. Especially for bootstrapping startups or solo developers, the idea of hiring both a designer and a front-end developer to morph those designs into Rails-friendly code isn't always feasible.

That's precisely the gap RapidRails Agency aims to bridge. Having navigated the Rails landscape for years, I've encountered many developers and startups facing this exact challenge. This insight led me to work on RapidRails Agency, specializing in transforming your designs into reusable UI components for Rails, leveraging the power of ViewComponent and TailwindCSS.

What do you think about the idea? While it is generally not new, it is in Rails space. It the first of it's kind. Do you think there is a demand of it?

Any kind of feedback will be appreciated.

on February 3, 2024
  1. 2

    Okay that's definitely something people spent long hours on, so that's good and does save tons of money if used right. Viewcomponents are a solid tool for the job. The thing that does preview (storybook?) is very good. Now to the roast:

    • I had to click through the page for quite a long time to figure out where are the components themselves
    • Most (all?) of components are just css. I'd think if you emphasize on rails they would use turbo and stimulus and
    • Components are kind of random with random sorting. I'd suggest to check shoelace or polaris design systems and bring in more consistency and orthogonality
    • Tailwind has all the options for customization and that's great, but also would make me read the code to customize it. Also if I tweak tailwind classes I won't always end up where I wanted. I suggest looking at the simple form gem for an example of a very flexible thing, Though not ideal, it has a million of things you can set up and you need to know your options and I don't remember a good documentation for it.

    Overall, good luck, I'm sure people can make use of it!

    1. 2

      Hey Sergei,

      Thank you the time spent for the feedback. Much appreciate it. It seems you understand developers pain when it comes to creating UI components and how beneficial it is. And yes ViewComponent's gem for documentation is LookBook.

      Response to your invaluable roast 😀

      • The UI components I mentioned are a standalone product ( https://rapidrails.cc ) similar to polaris and others. Not part of the service. But it demonstrate I can create components visual aspect.
        May I need to add code example and variation for a few components to show how the api works and empower developers. But, keep in mind, these UI components I wouldn't not use them in a design/dev job.
        For example, as an agency (https://rapidrails.cc/agency) if a client have a figma file. I would create a UI components from scratch, and it will look different from any other UI components. So I'm still not sure if i should include that and it could lead to confusion.

      • TailwindCSS is a great rabbit hols with endless features and classes. While it is great tool it could be overwhelming. I've been using since v1 and haven't used it's all features. Besides the way it is structures to have so many classes for an element easily lead to confusion.

      When I started the RapdiRails UI Component product, I planned to be like everyone else, standard stuff. Convert some html code to a UI component and call it a day, which is too easy and simple. But I thought, this is not realistic, UI colours, layout and feel changes all the time. It doesn't make sense to invent the wheal and re-write a new component just to add some variation. It was a huge challenge. I started and added more APIs to give developer the ability to customize it's component with minimum effort along the way having access to source code to change how it work.

      For example.
      All other UI systems and kits provide few params or attributes, such as font-size, weight, colour and type. But I wanted more control with features bring more creativities. Below example demonstrate a few attributes of TextComponent I created for RapdiRails UI Component product. You can see it live in hero section at (https://rapidrails.cc/agency).

      <%= rui_text(
      tag: :p,
      size: :body2Xl,
      leading: :relaxed,
      font_weight: :medium,
      color: :inherit,
      alignment: :center,
      mark: "Transform your designs into customized Rails UI components",
      underline: "crafted with ViewComponent and TailwindCSS"
      ) do %>
      Transform your designs into customized Rails UI components, perfectly tailored for startups, businesses, and agencies. Our solutions are crafted with ViewComponent and TailwindCSS, ensuring seamless integration into your Rails applications!
      <% end %>

      You are %100 right, "Though not ideal, it (Tailwind) has a million of things you can set up and you need to know your options". Creating components is not easy, I see it worth it, beside I enjoy it 😊 And hope people would appreciate.

      1. 2

        aha, I missed the agency thing. It makes a lot of sense like a tool for the agency to keep up the pace and redo things less (I suspect this is how rails appeared as well).

        Yeah I understand that your thing is a design system as well, and now I understand that these components appeared as part of your agency work and they make total sense to you and will evolve as you get more clients and so on. You just have to convince other people that that's all they need to build (the first version of) their website! I like the example above the "explore features" section and kinda want more.

  2. 2

    This is a good idea.

    But the landing page doesn't have any visual evidence of the service. That would SELLL! You could have a design of... something. Like an app, and you visualize the process of transforming and delivering the components.

    Change See Plans to start now. This should lead straight to a checkout page.

    Remove Rapid from in front of your pricing tiers.

    Differentiate between the two tiers more.

    Put a price on the plans. Low end for this should be 2 or 3 k.

    Other than that it looks great. Gonna be a great service.

    -kow

    1. 1

      Hey Karl,
      First , thank you the time spent for the feedback.
      Second, your ideas are invaluable to me, as it is hard to get an honest feedback.

      The attached design was an initial idea, and since I published post, I changed copy, added more details such as example section (https://rapidrails.cc/agency#examples), prices, footer, features…etc.

      Now I set prices and linked to strips. Not sure if i under or over priced. Initially i though low-end 3k and high end between 4 - 5k. What do you think?
      I think, it is hard to put a price tag on services sometime, specially I'm ONLY and FIRST one who provide this service.

      Regards "Differentiation" or plan feature, what else is needed?
      I believe documentations is very crucial since these components will be used by multiple teams for a longtime.

      I'm thinking to add How to works before Pricing as a reminder of the agency's process.
      Also add the NO section, what we don't provide, such as animations, loads of JS file for interactivities. Is it effective?

      Thanks again Karl.

      1. 1

        Hey Friend,

        Differentiation could mean a scale difference, a font weight choice or an accent color.

        I think this is all great. You've really out done yourself. I look forward to seeing where you go from here.

        By the way I saw that you were featured in the short ruby newsletter. So congrats! Keep up the good work!

        -kow

        1. 1

          Hey Karl,

          Thanks again for the nice works.I'm really trying hard to produce good values and help people. Yes, my friend Lucian posted on his newsletter. It gave me good exposure.
          Based on your experience, do I miss anything to mention on the landing page? Features or services? Would you recommend it to a friend or a company?

          Since this is the first agency of t's kind I want to provide maximum values for client investment. Would do you advice?