Feb 2025 – May 2025 · 3 months
Manufacturing Corporate Website
I built a bilingual corporate website with AI-powered translation for an industrial machinery manufacturer, featuring product catalog, inquiry system, and content management.
Overview
A bilingual corporate website for an industrial machinery manufacturer. I built the complete admin backend for content management and integrated AI-powered translation to automatically generate English content from Chinese input. The site features a product catalog with specifications, an inquiry cart system, knowledge base, FAQ section, and news management.
What I Built
Admin Backend Modules (Feb 2025)
- News Management: Article CRUD with CKEditor rich text editor
- Banner Management: Homepage carousel with drag-and-drop sorting
- Product Management: Categories, product types, and specifications
- Contact Management: Form submission records and email notifications
Content Management Features (Mar 2025)
- Inquiry System: Shopping cart-like interface for product inquiries with quantity tracking
- Knowledge Base: Technical articles about machinery with sortable ordering
- FAQ Management: Frequently asked questions with reorderable display
- Contact form with gender field and admin email notifications
Frontend Integration (Mar 2025)
- Product catalog pages with image galleries and specifications
- Inquiry cart page with form validation
- News listing and article detail pages
- Homepage banner integration with admin-managed content
AI Translation System (Apr – May 2025)
- OpenAI integration for automatic Chinese → English translation
- Queue-based translation jobs using Laravel Horizon
- CKEditor table content special handling for translation
- Real-time translation updates without page refresh
- Protection for manually edited English content
Architecture Decisions
Spatie Translatable for Multilingual Content
Used spatie/laravel-translatable to store translations in JSON columns. Each content field (title, description, content) stores both zh-TW and en versions. This avoids separate translation tables and keeps related content together.
Queue-Based Translation with Horizon AI translation calls are slow and can timeout. Moved translation to background jobs processed by Laravel Horizon. Users see immediate save confirmation while translations complete asynchronously.
CKEditor Table Translation Handler
CKEditor tables contain nested HTML that breaks when sent directly to translation APIs. Created a separate CkeditorTableTranslationJob that extracts table cell text, translates individually, and reconstructs the HTML structure.
Sortable Tables with Livewire
Content managers needed to reorder banners, FAQs, and knowledge articles. Built reusable SortableTable Livewire components with drag-and-drop ordering that persists to database immediately.
Key Bug Fix: Translation Overwriting Manual Edits
Problem: When admins manually edited the English translation in the backend, the AI translation job would overwrite their changes on the next Chinese content update.
Fix: Added a check before translation: if the English field was modified directly (not via translation job), mark it as "manually edited" and skip automatic translation. Only re-translate when the Chinese source content changes.
Other Contributions
- Image handling trait for polymorphic image uploads
- Product type pivot table for inquiry line items
- Migration fixes for table structure corrections
- Case-insensitive search in admin tables
- Horizon dashboard access for staging environment
Reflection
The AI translation feature went through several iterations. My first implementation sent entire CKEditor HTML to the translation API, which mangled table structures and escaped HTML tags. I learned that preprocessing content before API calls—extracting translatable text, translating, then reconstructing—produces much better results than hoping the API handles complex markup correctly. This "decompose-transform-reconstruct" pattern applies to many text processing tasks beyond translation.