As a freelance software developer, I constantly work on React frontend dashboard environments. For example, an admin page to manage all users of a SaaS platform. To avoid repeatedly developing the same components for every project, I've created a component library: Peggirkit.
Frontend Development Technologies Used
In developing this component library, I've utilized a range of technologies.
React & Typescript
At its core, it's a Node.js, NPM, React, and Typescript project. Generally, I always use Typescript in my Javascript ( ES6) projects.
The addition of types provides a significant advantage. By defining the correct type hints for the component props, it becomes more intuitive for Peggirkit users to work with the library. Plus, it makes the code much more robust and less prone to errors.
Babel
Babel transpiles all components from ES6 during the build process. These are then
placed in a separate dist folder. This happens after running a custom script from package.json: npm run dist.
Tailwind CSS & Tailwind Plus
For the design and styling of the frontend components, Peggirkit uses Tailwind CSS. Tailwind CSS offers predefined CSS classes that make it possible to quickly style HTML elements. Plus, there's no need to write separate CSS (or Sass, etc.) files.
Since I didn't want to spend time designing every component from scratch, I opted to use Tailwind Plus (formerly known as Tailwind UI). Tailwind Plus provides UI component designs for various purposes, like webshops. In my case, they also offer designs for web application interfaces.
I haven't adopted the designs one-to-one, though. There are differences here and there, but the biggest distinction is that I've added dark mode support to the React components.
Storybook
Since Peggirkit consists of standalone React components, it's also useful to build, test, and document them in isolation. That's why I use Storybook.
“Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.”
Components
Not all components in this frontend library are visible in the user interface, by the way. Some are React hooks or provide a context.
UI Components
Peggirkit includes several dozen UI components. Think buttons, input fields, spinners, etc. Some of these are composite components: a combination of multiple components. For example, in the image below, you see an error page component. This includes a breadcrumb, heading, list, and footer component.
React Hooks
Peggirkit also includes several React hooks. These provide internal logic that can be reused. For
instance, useResponsive tracks the current window dimensions along with the current Tailwind CSS breakpoint.
React Context API
Since many of the frontend applications I build are restricted environments—for example, for registered users or admins—Peggirkit also includes authentication logic.
By using the React Context API, I can easily integrate authentication functionalities. Think logging in, logging out, and redirecting a visitor when they're not allowed to access a page.
In combination with this AuthProvider, there's also a login page component. It even supports 2FA (based on TOTP).
Result
Peggirkit is still a work-in-progress. I'm continually expanding and refactoring it. Working on this library helps me improve my frontend skills.
Curious about Peggirkit? The Storybook site is publicly available—feel free to take a look!
Unfortunately, I can't publicly offer this React component library for anyone to create a dashboard interface with it. That's due to the Tailwind UI license. In the long term, I'd like to move away from Tailwind UI and make the entire frontend library open-source.
