<aside> 💡

Role: Frontend Developer

Core Value: Improved Content Operations & DX (Developer Experience)

Tech Stack Breakdown: React 18, SunEditor / Custom WYSIWYG Wrapper, Shopify Integration, Shopify Files API,HTML Sanitization & Parsing,Split-Screen Preview,Responsive Design.

</aside>

1. The Friction: "The Tiny Box Problem"

The default Shopify Admin editor provides a cramped, limited workspace. For our marketing team, who manage detailed product descriptions with heavy media, this created a significant workflow bottleneck:

• Poor UX: Editing long-form content in a small text area caused eye strain and scrolling fatigue.
• Media Struggle: Inserting and aligning images within the native editor was clunky and often broke the layout.
• Risk of Errors: Working directly in the live product page increased the risk of accidental publishing or formatting errors.

2. The Solution: Distraction-Free Workspace

I built a custom, React-based Rich Text Editor (WYSIWYG) tailored specifically for our team's workflow. It serves as a dedicated "Staging Environment" for product content.

• Immersive Editing Experience: Designed a full-screen, responsive interface that gives content creators room to breathe. It mimics the final storefront layout, ensuring "What You See Is What You Get."
• Seamless Media Integration: Engineered a custom image uploader that connects directly to Shopify Files. Users can drag-and-drop images, resize them, and align them instantly without fighting with HTML code.
• Clean HTML Generation: The editor automatically compiles the content into clean, semantic HTML strings. Staff can simply click "Copy to Clipboard" and paste the perfectly formatted code into Shopify, ensuring consistent styling across all products.

3. Key Features (Why it works)

• Custom Toolbar: I stripped away unnecessary buttons and kept only the formatting tools our brand uses (H1/H2, Bold, Image), enforcing brand consistency by design.
• Live Preview: Split-screen mode allows staff to see the raw HTML and the visual output simultaneously.
• Instant Feedback: Built with React state management for zero-latency typing, solving the lag issues often found in the native admin panel.