Starting Codefee-Kit

Kicking start the development of a React Component Library – Codefee-Kit. Just a simple component library that is intended for my own study and future project usages.

Decided to name it Codefee-Kit since I am doing a Codefee Time here hahaha.. You can find the Github Repository HERE. Also hosted the Storybook for demo purposes at https://www.kit.codefeetime.com/. Feel free to check them out!

A snapshot on Codefee-Kit’s Storybook demo

Ever since my first freelance gig back then when I was still a “good young” university student :P, I have fallen in love with Web Application Development and have been doing it intensively ever since then. Never looked back since!

Well, my Web Development journey was quite a rough one. I didn’t really start off with the plain ol’ trusty “VanillaJS” like most of the folks do. Instead, I jumped onto the framework bandwagon right off the start, using the famous Google’s AngularJS framework that time. That was about 4-5 years ago! Haha.. quite the spirit of a “young man” perhaps? Good and bad though! Still, I can’t emphasize enough the importance of truly deep diving and mastering VanillaJS though.

You might be surprised that those are actually the things that most of the big players are looking for, in their Frontend Engineer candidates, e.g. Bytedance, Shopee, just to name a few.

Speaking from real interview experience 😛

I am always a Frontend enthusiast. Recently, I have been diving even deeper, into the topic of Design System. Here is a good read on the topic in case you are not familiar – Atomic Design.

After reading through Atomic Design, I began exploring Google’s Material Design System and Atlassian Design System in depth, understanding the key takeaways from these big brands. And yea, I discovered new knowledge that I didn’t bother much previously. It is truly fascinating and interesting that how deep we can really go on the topic of establishing brand consistencies through a design system. Another design system that I would definitely love to check out is the Carbon Design System by IBM. I remember browsing through some of its React’s implementations and was impressed by how slick the designs were!

Taking inspirations from those powerful Design Systems aforementioned, I then decided to create a React Component Library, with references to those design systems. Yes, building it from ground up! Going real deep into everything this time!

My intention for this was really just to push myself to understand and appreciate design systems better, at the same time, challenging myself to build a component library from scratch with as little as possible usage of any library (other than React’s official packages and “some unavoidable” packages of course! haha..). Also, I am taking this chance to go real deep into topics like browser render optimizations, etc. In fact, those are the topics that I am really keen to master, as a semi senior engineer nowadays. Hopefully, I will have some good deep stuffs brewing up soon!

I am just at the very early stage of this fun and exciting journey. Let’s see how far we can go this time!

A fresh draft implementation on Grid

Alright, signing off for now. Till the next write up!