Macao Government Counter Booking System (React Web App Embedded in Official Government App)
Government booking and ticketing platform embedded in the official app via JS Bridge, while also supporting standalone Web access.
Stack: React, Redux, OAuth2 + PKCE, antd-mobile, i18n
- Wrapped government JS Bridge capabilities to unify in-app page lifecycle handling, login-state checks, and language sync; implemented SSO with OAuth2 Authorization Code + PKCE for consistent login experience across Web and App.
- Applied route-level splitting with React.lazy + Suspense across 20+ pages, reducing first-screen JavaScript size by about 60%; replaced moment.js with dayjs and switched from full babel-polyfill import to on-demand core-js injection, cutting bundle output by roughly 120 KB.
- Migrated build tooling from CRA to Vite, reducing cold start from 40+ seconds to under 5 seconds and improving HMR response from seconds to milliseconds.
Android Queue Service System (Government Hall Ticketing Terminal App)
Android terminal app supporting booking, ticketing, queue calling, and check-in workflows across 10+ service windows.
Stack: React Native, Redux, react-native-vision-camera, FlashList
- Introduced FlashList with component-level memoization (memo, useMemo, useCallback) to optimize high-frequency rendering scenarios and reduce lag and memory spikes in large lists.
- Added request deduplication, Abort cancellation, idempotency keys, and concurrency locks in the network layer to prevent high-risk duplicate operations such as repeated ticket retrieval and check-in.
- Designed a multi-format request module to normalize XML/JSON responses, using async xml2js parsing for XML and ensuring compatibility with both legacy and modern government interfaces.
- Integrated react-native-vision-camera for efficient QR scanning, adding debouncing and loading-state handling in the check-in flow.
AI Knowledge Base Platform (React Web)
Enterprise knowledge platform supporting document upload, preview, retrieval, and streaming AI conversations.
Stack: React, TypeScript, Ant Design, Vite, Axios, WebSocket, React Markdown, Playwright, React Query
- Built a WebSocket-based streaming QA hook to support token-level real-time rendering, graceful fallback, local mock rollback, and conversation ID synchronization for a smoother AI chat experience.
- Adopted React Query to manage async state for knowledge list, document detail, upload, edit, and delete flows; reduced redundant requests and improved interaction performance with staleTime, cache invalidation, and optimistic updates.
- Split AI chat and knowledge modules with Vite dynamic imports plus route-level and tab-level lazy loading to reduce first-screen resource size and improve loading speed.
- Implemented Playwright automation for key flows including upload, preview, and deletion, reducing regression risk during rapid feature iteration.
Personal Technical Blog
Personal blog platform built with Next.js and TypeScript.
Stack: Next.js, Tailwind CSS, TypeScript, Supabase, Vercel
- Developed a content platform with a Markdown editor backend supporting draft/publish workflow, category and tag management, real-time preview, and image upload to object storage; delivered frontend features including article search, filtering, sorting, waterfall feed display, and comment animations.
- Implemented a complete SEO solution with page-level generateMetadata, hreflang, canonical, Open Graph, Twitter Card, JSON-LD structured data, and auto-generated sitemap.xml and robots.txt to improve indexing and social sharing performance.
- Built CI/deployment workflows with GitHub and Vercel to trigger automatic build and release after code push, improving release efficiency and delivery stability.
- Implemented a real-time online support chat using Supabase Realtime and PostgreSQL CDC, supporting text/emoji/image messaging, session persistence, message history loading, and image preview in both user and admin interfaces.
