Module 9 Introduction

Introduction to module 9: Design system libraries

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the The newline Guide to Modernizing an Enterprise React App course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Modernizing an Enterprise React App, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Modernizing an Enterprise React App

  • [00:00 - 00:10] At this point, you could call Hardware Handler complete. It's been upgraded, refactored, tested, and made ready to continue running for a good long while.

    [00:11 - 00:26] But as an enterprise application, there is a good chance that a design system will come into play at some point in this app's life. Design systems can be extremely useful, not just for the development team, but also for the designers who work with them.

    [00:27 - 00:44] They can play an especially important role in large organizations with lots of development teams and lots of designers when it comes to making separate apps have a similar look and feel, regardless of who designed and built it. But as with most things, design systems may not be implemented at the outset of a project.

    [00:45 - 00:59] They may be added midway through, so knowing how to incorporate and leverage them for maximum effect is worth covering. Not to mention learning to read and understand the docs that come along with the typical design system, that takes a little doing.

    [01:00 - 01:22] So in this final bonus module, we will look at a very popular React design system, AMP design, and incorporate it into Hardware Handler and swap out some of our custom components of varying complexity with equivalent ANT-D components. So we will discuss the benefits of design systems and introduce some of the best options out there for React applications.

    [01:23 - 01:36] We'll add the ANT design system to our application and set up our already chosen color scheme as the default in ANT. And we'll learn strategies to begin swapping out custom components in the app with more standardized ANT-D components.

    [01:37 - 01:42] We'll work our way up from simple components to more complex ones. Are you ready?