The Component System

The Component System is a concept for building and keeping a code base of components of the designs for frontend applications. Already defined and designed for the developers and already built in code. This system of components are then added to the code base of the desired project from which the components can be pulled from and used. Updates for the specific project's design can then be modified per project, as the copy of the component system lives in the project. When this is done with the same vision in mind, it will not look like a copy and paste of another system.

The Component System ensures the design’s consistency pulls through the entire project and the developer has just to check the properties for specific usage where the component has been used. The developer does not have to think or be concerned about the theme/design itself.

This gives you one central place the theme and styling is located and aids for:

1. Maintaining the design
2. Redesign of the theme
3. Consistency/Toolbox of items to use
4. Updating one component pulls all the way through to the entire app that is built
5. These files can be migrated to a new project and already have a base to work from

The Component System aims to:

• Decreases development time.
• Reduced learning curve for developers joining the project. They do - not need to learn all the nuances of each attribute of an item
• Library of items used in the project, with attributes pre-configured
• Faster product revamp/redesign

With all this the Component System enables developers to get the product/features out faster (having a faster time-to-market) while maintaining consistency in the design and usage. Easing the developer onboarding while maintaining project standards and consistency.

This is done by creating all the components that are used. Whether they are buttons, sliders, text fields, and already defining all the design attributes for those components, from setting the theme detail to padding, to radiuses, and some with predefined functionality like an email field, or secondary button. This is your starting point, template, for new or adding to existing projects updating with all the design properties and attributes for the specific project, and then used by the developer(s).