Creating a Plan for a React UI Component Library Project

Hello again everyone! 🙋‍♂️ I hope your weekend is treating you well!

In one of my previous posts, I outlined my goals for planning out my future projects, and now the time has come for the long awaited, much anticipated, once and a lifetime experience...

Putting it into practice! 🙌

For my first project, I intended to create a UI library that I could then utilize for the rest of my applications. My plan is to make a basic UI library utilizing colors from the wonderful Nord theme by ArcticIceStudio. ❄🧊

Let's remind ourselves what the steps were from before:

1. What's the objective/goal of the project (The Why) 🥅
2. Who am I making this for? (The Who) 👨‍👩‍👧‍👦
3. What's the core feature of the project? (The What) ✨
4. What technologies am I going to use? (The How, The Where) ⚙
5. What is my deadline? (The When) 📅

Great! Now let's begin:

1) What's the objective?

With making a UI library, my primary objective is to create an attractive, repeatable UI experience to use between multiple apps. Additionally, I feel as if my current UI skills are slightly lacking in strength, so creating a UI library is a perfect way to focus on improving that part of my development.

2) Who am I making this for?

This project is primarily for my personal usage. However, I would like to make it so anyone can utilize it, as I'll be uploading the final product to NPM.

3) What's the core feature of the project?

My biggest goal for this project is to create an overall cohesive modern experience. One large feature I want to add is an easily switchable light and dark mode.

4) What technologies am I going to use?

I've had to do a little bit of research for this one, as I've never created a UI library before, only full applications.

Since this is a React UI Library, I will be utilizing React to create my UI.

But I encountered a problem, how am I going to test my UI Library? I'm not creating an application, I'm simply making UI components.

After much research, what I've settled on is Storybook for testing my UI library. (Check out my previous post about it here!) Storybook is very robust, easy to use, easy to set up, and very scalable. I'm excited to use it

I would also like to use TypeScript, as I love when other libraries have typing support.

5) What is my deadline?

I would like to have my first iteration done by the end of this week, which is 03/20/2021. This would include many HTML tags from buttons, to headers, etc.

I would like to have it completed by the end of the month, 3/31/2021. The full completion would have the capabilities of theme switching, and likely a few specific components to the library, such as a few animations to clean things up.

Plan Set!

Alright! That wasn't so bad. While this plan is pretty simple, is flexible for change, and is more of a guideline than a rule, I still believe that it is helpful to outline. By creating simple plans such as this, we can be more directed with our goals and not have to make as many on the fly decisions.

Thanks for tuning in, I hope you look forward to the future of this project! I'll see you guys tomorrow with an update!

Code on! 👨‍💻