🧠 Built with AI: Heartsy- A Conversation Card Game | 888 Day 3

Cindy Adem
May 17
4 min read

Updated: May 17

Watch this:

I wanted a sleek, smooth feel; and I got it. App UI looks more crisp than this video

The Big Idea

For Day 3 of my 888 Challenge, I built Heartsy - a mobile-first conversational card game that generates thoughtful, meaningful questions through OpenAI to help people connect on a deeper level.

You know those question card games that cost $25+ at The SKIN DEEP? I wanted to create something similar but with an infinite pool of AI-generated questions tailored to specific relationships and a sleek digital experience.

What I Built

Heartsy is a web app that lets you:

Choose from 7 relationship categories (First Date, Exes, Newlyweds, Longtime Lovers, Game Night, Mom and I, and Solo)
Generate personalized, meaningful questions via OpenAI
Share a game link with someone else to experience the questions together
Take turns viewing questions (with a 30-second timer for each)
Skip questions that don't resonate or generate more when you run out

I went with a rich purple gradient background and elegant glassmorphism UI with gold accents for titles and interactive elements. Questions appear on translucent glass cards that you have to tap to reveal, which adds a nice element of anticipation.

The Build Process: ~7.5 Hours

Hours 1-2: Planning & Setting Up

Started with the data model and core architecture for a React + TypeScript + Express app. Set up routing with Wouter and installed Tailwind + shadcn/ui for the UI components. Quickly drafted a wireframe of the overall flow I wanted.

Hours 3-4: Core Functionality & OpenAI Integration

Implemented the OpenAI integration for question generation. This was straightforward, but crafting the right prompts took some iteration - I needed to ensure questions had the right tone and depth for each category. The Mom and I category was particularly interesting, as I wanted questions to adjust based on whether you're the mother or child.

Hours 5-6: UI Implementation & WebSockets

Built out the UI components and added WebSocket support for real-time multiplayer. The glassmorphism effect with the purple gradient took some CSS tweaking but came out looking slick. Implemented the WebSocket server to handle game creation, joining, and syncing questions between players.

Hour 7: Debugging & Feature Completion

Hit a few road bumps here. The biggest issues:

The WebSocket connection kept closing unexpectedly; had to completely rewrite parts of the server code to handle lifecycle events properly
Questions for the "Mom and I" category weren't correctly perspective-adjusted based on user role
Solo reflection cards weren't implementing the "click to reveal" feature properly
The button for invitees said "Back to Categories" which was confusing and could disconnect them
Rewrote large portions of the WebSocket handling to fix these issues and ensure stable connections.

Final Stretch: Testing & Deployment

The last 30 minutes were spent testing the flow between devices and fixing small UI quirks. The clickable question cards with timed reveals came out better than expected!

Technical Decisions

I went with:

React + TypeScript frontend with Tailwind + shadcn/ui
Express.js backend with WebSockets for realtime communication
OpenAI's GPT-4o for generating personalized questions
React Context for state management
Custom fonts: Careny for titles, Shade Sans for UI elements, downloaded from Frontesk and uploaded to Replit.

The biggest technical challenge was handling the WebSocket communication properly, especially for the "Mom and I" category where I needed to customize questions based on the player's role. I had to update the join logic to ensure invitees received questions from their perspective.

What I Learned

Prompt Engineering Matters: The quality of AI-generated questions varies dramatically based on the prompt. Including example questions in each prompt made a massive difference in output quality.
Realtime Connections Need Careful Error Handling: Managing WebSocket connections across devices requires robust error handling and reconnection strategies.
Small UX Details Create Delight: The "tap to reveal" mechanic with the 30-second timer created a sense of anticipation and significance for each question.
Sometimes Rewrites > Fixes: When the WebSocket code got messy, doing a complete rewrite of routes.ts was faster than trying to patch individual issues.

What's Next?

If I had more time, I'd add:

Save favorite questions for later
Custom category creation
Record insights/highlights from conversations
Analytics on which questions generate the most engagement

But overall, I'm happy with what I accomplished in under 8 hours. Heartsy delivers on its core promise: helping people have deeper, more meaningful conversations through thoughtfully generated questions.

On to day 4 of the 888 Challenge!

🔥 What is 888?

8 Hours. 8 Days. 8 Products. A personal challenge to build 8 functional AI-powered tools in 8 consecutive days — dedicating just ~8 hours to each build.

This is not about perfection — it’s about speed, creativity, and clarity of product thinking.

Every project is an exploration: solving real problems, testing ideas fast, and documenting the build process openly.

📌 How to Follow the Flow

Each day, I’ll share:

A short demo video
A concise build recap post (on LinkedIn & Twitter)
A full write-up in comments or blog (with lessons, tech stack, and what worked/didn’t)
And once ready, a live link to the deployed product (or prototype status if not yet deployed)

Give me your email and I'll send you daily updates or connect with me on socials to stay updated daily.