Inspiration
In recent years, an increasing number of residents from Hong Kong have been traveling north to Shenzhen for dental work and medical aesthetic treatments due to competitive pricing and rapidly advancing medical standards. However, the cross-border market is flooded with heavily photoshopped marketing materials and paid "shills" (astroturfing), making it incredibly difficult for patients to make safe, rational decisions.
We were inspired to build 赴深整形網 (Shenzhen Cosmetic Surgery Guide) to bridge this information gap. Our mission is to act as a strict professional gatekeeper, offering Hong Kong clients 100% authentic, unretouched consumer diaries, verified surgeon credentials, and transparent clinic comparisons.
What it does
Our platform serves as a comprehensive, localized medical tourism hub: Authentic Case Studies: Features raw, high-definition before-and-after tracking of surgeries (e.g., rhinoplasty, double eyelid revisions, laser anti-aging), mapping out real swelling and bruising phases without deceptive filters. Expert Directory: Curates a directory of board-certified plastic surgery specialists and reputable clinics in Shenzhen. Comprehensive Project Guides: Provides detailed breakdowns of pricing, methodologies, and consultation checklists to prevent hidden costs. Interactive Navigation: Implements a fully responsive localized UI with seamless mobile-first navigation and immediate free consultation call-to-actions.
🛠️ How I built it
To ensure maximum accessibility, blazing-fast loading speeds, and optimal indexing across search engines, we built the project using clean, semantic HTML5 and componentized CSS3 utilizing advanced custom properties (CSS variables) for modern theme scaling.
The architecture features a fluid grid layout that perfectly translates a heavy-information desktop grid (sidebar + main timeline layout) into a clean, single-column mobile view with a dynamic hamburger slide-out menu powered by lightweight native JavaScript. Special attention was paid to localized internationalization (zh-HK) and technical SEO infrastructure (canonical structures, Open Graph tags, and Twitter Card schemas).
🛑 Challenges I ran into
One of the major engineering hurdles was maintaining layout performance and visual stability on mobile screens while handling highly media-dense medical data (HD case photos and tabular hospital comparisons). Overcoming layout shifts required implementing strict adaptive container constraints, optimized aspect ratios (aspect-ratio: 16 / 9), and strategic lazy loading attributes.
Additionally, during content encoding iterations, we faced a peculiar encoding bug where invisible Unicode Variation Selectors (U+FE0F) got mixed into HTML string literals via copy-pasted copy text, temporarily breaking asset URLs with %EF%B8%8F tags until we built a custom Regex sanitization pipeline.
Accomplishments that I'm proud of
Designed a beautiful, modern, and trustworthy visual identity from scratch using a calming, clinical lavender-indigo color palette (#6B7ED0).
Reached perfect fluid responsiveness, scaling gracefully down to 320px width screen dimensions without breaking typography headers.
Created an intuitive, professional, and accessible UX structure that encourages user confidence through transparency rather than aggressive advertising.
🧠 What I learned
We deepened our expertise in technical SEO architecture, specifically the critical impact of Meta Object Graphs on cross-border web visibility. We also learned how crucial typography pacing and layout negative space are when presenting complex medical information to an anxious or skeptical audience.
What's next for Shenzhen Cosmetic Surgery
We plan to scale the project by integrating a real-time AI consultation chatbot trained on cross-border medical aesthetic compliance. We are also aiming to build a secure, encrypted dashboard where users can safely upload their recovery photos to receive automated timeline tracking and follow-up reminders.
Built With
- css3
- html5
- javascript
- responsive-web-design

Log in or sign up for Devpost to join the conversation.