Jeffrey Bernadas

Software Engineer

I build enterprise-grade, responsive digital solutions for the web and mobile — systems that hold up when they're carrying real weight.

Status● Open to interesting work
Local--:--:--
Zone...
Hostself · netcup · ubuntu 22.04
Back to Projects

Core Components

unmaintained
GithubLinknpmStorybookExampleDemo
1 / 7

Description

A personal component library built with shadcn/ui that explores microfrontend architecture using Webpack Module Federation. It covers the full workflow of a design system, from building and documenting components to publishing them and serving them as a microfrontend remote. Features include custom React hooks, theming support, Storybook documentation, and dual distribution as either a published npm package or a Module Federation 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