June 6, 2020

Introducing Camara

TLDR: "I'm building a design system targeted at making building more of my side projects easier

Design systems is how I'm currently trying to bring more order to the "chaos" that is my job as a FrontEnd Engineer. To have a solid and deep understanding of how to build systems that actually move work forward, I'm setting out to build my own personal design system and consume everything I can find on the topic. This is my one focus for the coming months.

To this effect, I'd be building Camara - a design system that helps you build your ideas quickly and with less code. I'd be building this in public. It will consist of tangibles such as a Figma UI library, React component library, and something mobile related, all open source.

Building a design system with a lot of moving parts is a huge undertaking, and one way to make sure that I don't get overwhelmed with the whole project is to put in place some meaningful constraints on the project. This also helps so I don't spend time over-optimizing the less important things.

Another approach I'd be taking is to see the project as a long-term undertaking, and one that wouldn't be complete overnight. In my head, this means that this is a progressive approach to building with small incremental progress and constant momentum preferred over "race-car fast" velocity that could possibly lead to an eventual burn-out. Plus, I'm not Superman.

A Little Backstory

I love working on side projects and I love to put a lot of care into them because I love to build things that "work".

Building beautiful, accessible and responsive user interfaces contributes to a successful side project. When building my side projects, I tend to spend a lot of time trying to get the interface right, and less time on other technical pieces of the project.

Having a well designed user interface in my projects is very important to me. I find it unfriendly to work only on the technical part of my ideas, and package it loosely because "well, it works".

To build projects that feel like enough thought and care was put into making them, there has to be a balance between getting the interface to where I want it to be and working on other technical pieces.

This is why I set out to build a design system. Camara is an attempt at creating that balance.

If you make a lot of side projects or have made one before, think of all the time you spent in trying to get the user interface to the point you wanted it to be. Accessible, beautiful, and responsive.

Now think of halving that time and investing it into all the other piece of your project that isn't about the interface. How would that have empowered you into making a more rounded project?

Camara aims to buy you back that time. With Camara, building your interfaces is easy and with less code. This empowers you to bring your ideas to life faster and invest time in all other pieces that makes your project tick.

With a design system that takes inspiration from some interesting ideas and best practices around building accessible, beautiful and responsive user interfaces alongside my learnings from past side projects, I can bring my ideas to life faster, without losing out on the thoughtfulness and care I love to put into my side projects.

Camara is a design system that helps you build your ideas quickly and with less code. It's an open source project, and it's available to anyone who wants to build with it.

What's In It Really?

Not much new ideas in it but it will be easy to use and with a reasonable amount of flexibility. Straight up, I'm not embarking on building the most robust and flexible UI component library ever. What I'm building is a simple UI component library that has been thoughtfully designed and implemented, to scratch my own itch of having to avoid build the same stuffs over again when working on my simple side projects.

This has presented me with a lot of opportunities - learn much more about design systems and component libraries, learn about UI engineering, learn more about React, TypeScript, CSS-in-JS styling, component reusability, inheritance , composition, etc, declarative UI programming, state management, package bundlers, next-gen JavaScript, etc.

By being the Software developer and its user, it means that I can tell if what I've have created meets my real need - make building side projects easy. Incredibly easy that it almost feels like cheating.

The goal is not to build the most robust Design System out there, the goal is to build a Design System that is dangerous enough to help myself or anyone ship web/mobile related side-projects in a weekend.

I'll build multiple sample apps with Camara to showcase and actually test that building side projects can be faster, easier and with less code.

Good luck to me ✌🏾, and have a great day 🌼✨!