Early-stage startups should not focus on building a design system but we did exactly the opposite!
We wanted to craft a delightful experience and make the app feel premium, colourful and unique. Fortunately, most of our users tend to agree that we did a good job with this. It has improved user engagement and also justified our pricing.
But this required building our own design system right at inception vs using an existing one like ShadCN or MUi. So we spent time reading documentation for open source systems by Google, Apple, etc.
Here’s how we use our component library:
1. One of us designs the components on Figma
2. Once reviewed, we code it to show up on the library
3. We check if the output is consistent with the Figma design
4. When it is time, one of us plugs it in the main code-base in minutes
You can simply right-click on any component to view the code snippet including more info. For future updates, you just need to edit the component and it reflect’s everywhere in the main app. :)
Many early stage startups have small teams and UI/UX engineering is over-looked, but we just made it part of our development cycle early-on. Shram being a front-end heavy application, this approach has helped us ship real fast (2-3 times a week before we decided to rebuild it).
As a self-taught programmer, going deeper within each component to the root level, I learnt a great deal about accessibility, states, uniformity of parameters, nomenclature and how they map to component hierarchies, API calls, local storage, etc.
We were approached by numerous SaaS startups enquiring about our UI. Some offered to buy our component library as well! We then realised that at this point, we were indeed up-skilled product designers with a rare expertise. So we worked with a few lovely startups as freelancers and were able to bootstrap our startup so far.
While I am proud of this, I do not recommend others to build their own component libraries. I am happy to share my learnings here or personally. If you want to use it for your app, it's all yours for free (but available only in React). :)
Well, we use decent sockets that we are planning to now upgrade and again, for a MVP, we haven't yet received complaints on this subject. We do have plans to optimise this like Linear has. And that is next in the list of to-dos for our team. :)
It was really tough but its just basic maths and a little bit of perspectives. It was definitely quite challenging to handle state management as we are using React. But truth be told, the re-renders are a pain I am yet to overcome.