AI Collaboration: Building a Cross-Cultural Card Game from Design to Deployment

Vibe-coding, UI/UX Design

Concept Development and Goal

"Beyond Borders" is a side project I built after obtaining Google AI certificate. It allows cross-cultural couples to hop on a video call and answer card questions together to foster deep and meaningful conversations.

AI-Powered Deployment

The entire Landing Page's visual design, from creating a GitHub repository to Vercel deployment and connecting Google Analytics, was completed in collaboration with AI within 2 weeks! As a product manager, the process from conceptualizing the plan to training the AI to achieve the vision in my mind, including visual color matching and animation details was incredible.

Agility and Creative Value

If you can think of it, you can do it. The entire project highlights that having a creative idea is even more valuable in the AI era. Here are the technical implementation:

Architecture Design: Built a Single Page Application (SPA) using React.js and integrated Firebase (Auth/Firestore) to handle backend logic, achieving a robust Serverless architecture.

Real-Time Interaction: Implemented Firestore onSnapshot for two-way data binding, achieving millisecond-level state synchronization for drawing and flipping cards. Utilized useRef to monitor connection states and elegantly handle edge cases like abnormal player disconnections.

Dynamic Routing & Access Control: Developed a dynamic room generation system using URL parameters for one-click invitations. Integrated database security mechanisms to strictly limit each room to a maximum of 2 concurrent users.

UI/UX Implementation: Leveraged Tailwind CSS and native CSS 3D properties to create fluid card-flipping animations and visual cues, delivering a high-quality, immersive experience optimized for mobile devices.