Jeffrey Bernadas

Software Engineer

I build enterprise-grade and responsive digital solutions for the web and mobile.

Back to Projects

Core Components

unmaintained
GithubLinknpmStorybookExampleDemo
Core Components library screenshots 1
Core Components library screenshots 2
Core Components library screenshots 3
Core Components library screenshots 4
Core Components library screenshots 5
Core Components library screenshots 6
Core Components library screenshots 7

Description

A personal project demonstrating expertise in modern frontend architecture. This library showcases the complete workflow of building a design system—from component development with shadcn/ui, to Storybook documentation, npm package publishing, and microfrontend distribution via Webpack Module Federation. It includes 25+ shadcn components, a collection of custom React hooks, theming support, and can be consumed either as an npm package or as a microfrontend remote.

Features

Component Library

  • -Full shadcn/ui component set (25+ components)
  • -Built on Radix UI primitives (Accordion, Dialog, Dropdown, Tabs, Toast, etc.)
  • -A few custom core components (buttons)
  • -Command menu (cmdk), Carousel (Embla), Drawer (Vaul), Charts (Recharts)
  • -Sonner toasts, Input OTP, Resizable Panels

Custom Hooks

  • -useBoolean, useToggle
  • -useAudio, useBattery
  • -useCopyToClipboard
  • -useDebounce, useInterval
  • -And many more utility hooks

Theming

  • -next-themes integration
  • -shadcn theme system
  • -Tailwind CSS v4 with CSS variables
  • -class-variance-authority (CVA) for variants

Microfrontend

  • -Webpack 5 Module Federation
  • -Remote entry for shared components
  • -Dual distribution: npm package OR microfrontend remote
  • -Example shop app demonstrating MFE integration

Documentation & Distribution

  • -Storybook 8 for component showcase
  • -Landing page for project overview
  • -Published to npm (@bernz322/core)
  • -Tree-shakeable exports (components, hooks, lib, themes)
  • -TypeScript definitions included

Tech Stack

Core

  • React 19
  • TypeScript 5
  • Tailwind CSS 4

UI & Components

  • Radix UI
  • Lucide React
  • Framer Motion
  • Recharts
  • cmdk
  • Embla Carousel
  • Sonner
  • Vaul

Build & Bundling

  • Webpack 5
  • Module Federation
  • Rollup
  • Storybook 8

Forms & Utilities

  • React Hook Form
  • Zod
  • clsx
  • tailwind-merge
  • CVA
  • date-fns
  • next-themes

Testing & Quality

  • Jest
  • React Testing Library
  • ESLint
  • Prettier
  • Husky
Jeffrey Bernadas