Projects in BarnalaProjects in Barnala
Projects
People
Cover image for AI Personalization Engine & Merchant
AI Personalization Engine & Merchant Dashboard for Product Genius AI Role: Senior Frontend Engineer (Contract) Tech Stack: React.js, Next.js, TypeScript, Tailwind CSS, Shopify Polaris, shadcn/ui, Static Site Generation (SSG) Project Links: Shopify App Store (https://apps.shopify.com/product-genius-ai) | Marketing Site (https://productgenius.ai/) The Technical Challenge Product Genius AI is an e-commerce personalization engine that tracks real-time shopper behavior to dynamically serve tailored content and product suggestions. The core engineering challenge centered on the Merchant Dashboard, the central control system where store owners manage AI behavioral configurations, visual widgets, and billing. Inheriting a fragmented codebase that had passed through multiple teams, my mission was to execute a major architectural overhaul: refactoring legacy tech debt, scaling an intricate in-app editor, and building a high-performance public marketing infrastructure, all while adhering strictly to Shopify's ecosystem constraints. Key Contributions 1. Legacy Codebase Refactoring & Feature-Based Architecture: Took complete ownership of a fragmented legacy architecture and systematically restructured it into an extensible, feature-based directory system. By introducing strict TypeScript typecasting and eliminating code duplication, I improved long-term codebase maintainability by 40% and accelerated subsequent feature development cycles. 2. Extending Shopify Polaris UI Ecosystem: Architected a reusable, low-debt component library built natively on top of Shopify Polaris to maintain ecosystem compliance without sacrificing brand customization. Utilized TypeScript generics and global CSS variables to engineer flexible, highly customizable component wrappers (such as a unified PGButton system), cutting redundant frontend UI code by 30%. 3. In-App Visual Editor Overhaul (The Design Tab): Led the end-to-end engineering of the platform's "Design Tab"—a complex, data-heavy configuration dashboard. Transformed a restrictive, legacy setup into a fluid, fully responsive visual layout builder, empowering merchants to seamlessly customize live AI widget behaviors, spacing matrixes, and product card rules across all desktop and mobile breakpoints. 4. Performance-First Marketing Infrastructure: Engineered an SEO-optimized iteration of the public-facing platform using Next.js (SSG) and Tailwind CSS. Replaced outdated structural dependencies with lightweight Static Site Generation, custom XML sitemaps, and automated meta-tag injections, drastically improving Core Web Vitals to maximize initial merchant acquisition.
1
56
Cover image for Good design is not just
Good design is not just about looks — it’s about how users feel when they use a product. A well-designed UI makes websites and apps easy, fast, and enjoyable to use. When users can navigate smoothly, trust increases and engagement grows. In today’s digital world, UI design plays a huge role in user satisfaction and business success. Swipe the carousel to learn why UI design really matters. 💾 Save this post if you found it helpful ❤️ Like & share with other designers 🚀 Need a modern UI/UX design for your website or app? We’re available for freelance projects — DM us to work together! #uidesign #uxdesign #uiux #uiuxdesign #userinterfacedesign #userexperience #mobileappdesign #digitaldesign #interfacedesign #designinspiration #designcommunity #designthinking #creativedesign #minimaldesign #graphicdesign #designflowinnovations
0
15