HR Hub Design Showcase

The idea behind HR Hub Design Showcase was born from a struggle I faced while building the French Writing Playground application. I was so sure I knew what design specifications I wanted but I could not effectively communicate that with the model while I was building. So I performed an experiment by applying multiple design trends to a non-functional single file solution of my French Writing Playground application until I realized that I didn't just want Glassmorphism. I wanted a mix of Glassmorphism and Neumorphism. So, I thought, what if I had a fully functional application where users can cycle through different themes to know what different components in their application would look like before creating and that is the birth story of the HR Hub Design Application. It is a fully functional application that serves two purposes simultaneously, a complete HR management system AND a living design laboratory where users can see how the same application transforms across 15+ different design trends. The core application is a comprehensive HR Hub for GreenTech Environmental Solutions, a fictional environmental consulting company with 285 employees across 4 Canadian locations (Toronto, Ottawa, Kingston, Calgary). It handles everything you'd expect from enterprise HR software: employee profiles, time-off management, equipment tracking, certification compliance, onboarding workflows, training enrollment, complaint management, and analytics. Both employees and HR administrators have dedicated portals with role-based access control, making it a fully functional system that could theoretically be deployed in a real company. But here's where it gets interesting: the entire application's design can be switched between 15+ design trends in real-time. From AI Default (Modern Minimalist) to Glassmorphism, Neumorphism, Neobrutalism, Material Design 3, Cyberpunk, and even combinations like Glassmorphism + Neumorphism. Each theme isn't just a color swap, it's a complete visual transformation with unique CSS variables, border radius changes, shadow systems, and even typography pairings. Users can explore how the same HR dashboard looks in a corporate professional style versus a playful Notion-inspired aesthetic, or see how Bento Grid modular layouts compare to classic Material Design. The AI chatbot has dual functionality with clear tab-based switching. In "HR Assistant" mode, it answers employee questions about PTO balances, company policies, benefits, and procedures using OpenAI Assistants API with context awareness about the user's role and department. Switch to "Design Guide" mode, and it becomes a UX consultant that asks about your project (healthcare app? fintech platform? e-commerce site?), your target audience, and desired aesthetic. Based on your answers, it recommends 2-3 design trend and typography combinations from the available options, explains why each fits your needs, and when you accept a recommendation, it triggers a Make.com workflow that switches the entire application to that design in real-time. You immediately see how the HR Hub looks in your selected style, then you can download a prompt template to build your own application with those specifications. The shopping cart system demonstrates versatile e-commerce patterns applied to HR use cases: new hire equipment ordering with budget limits, training course enrollment with capacity management, equipment replacement requests with approval workflows, and benefits enrollment during open enrollment periods. Each order type has different approval chains, budget tracking, and fulfillment processes. Make.com workflows automate everything from certification expiry reminders to equipment approval chains to onboarding task assignments. The technical architecture leverages Next.js 16 with React 19 and TypeScript, Supabase for PostgreSQL database with comprehensive Row Level Security policies, dynamic Tailwind CSS v4 with CSS variables for theme switching, and Zustand for state management. The database schema includes 27 tables covering everything from employee profiles and equipment inventory to chat history and theme analytics. Every theme switch is logged, every prompt download tracked, creating a rich dataset of user behavior and design preferences. The entire system is designed to be both a practical demonstration of full-stack development skills AND a compelling proof of design system thinking, showing potential employers that I understand not just how to build applications, but how to build applications that can adapt to any brand or aesthetic requirement.