Mohammed Baobaid
Reusable admin components for dense workflows without visual noise.
A practical interface system for tables, settings, forms, empty states, and action flows across product-admin surfaces.
Role
UI engineer
Outcome
Created a more consistent experience across repeated admin tasks.
Admin interfaces across multiple products had inconsistent patterns for tables, forms, and actions. Each new feature meant rebuilding common UI patterns from scratch, leading to visual drift and accessibility gaps.
I designed an atomic component library using Blade components with Tailwind styling. Every component was built with accessibility in mind, responsive behavior by default, and motion that respects prefers-reduced-motion. Alpine.js handles interactive states without heavy JavaScript.
Components are organized into atoms (badges, buttons, progress bars), molecules (hover cards, input groups), and organisms (section headers, data tables). Each level composes the one below it, creating a predictable and maintainable hierarchy.
Every interactive component includes proper ARIA attributes, focus management, and keyboard navigation. Motion animations respect the prefers-reduced-motion media query, ensuring the interface works for all users.
Admin tables collapse into card layouts on mobile. Forms stack intelligently. Action buttons reposition for thumb-friendly access. The system was designed so developers never need to think about responsive behavior — it just works.
I build systems like this for teams that need reliable engineering, clean interfaces, and measurable outcomes.