Final UI design for app

This app is the final page design of the product. All the functions need to be implemented based on the Pixie API.

Comment

Inspiration

We noticed that making spontaneous plans with friends — or even strangers — is surprisingly hard. Group chats die in "who's free?" loops, dating apps feel transactional, and most social apps optimize for content consumption rather than real-world connection. We asked: what if starting a hangout was as easy as shaking your phone?

The second inspiration came from social anxiety. Many people know what they want to say but freeze on how to say it. We wanted an AI companion that doesn't reply for you, but coaches you in real-time — like a witty best friend whispering in your ear during a conversation.

What it does

Sponty (Shake) is a mobile-first social app that matches people for spontaneous real-life activities through a simple "shake" gesture. The core flow:

1. Shake to Match — Choose an activity (coffee, walk, movie, food, sports…), pick a time window (now, tonight, tomorrow), and shake. Lumi, your AI social co-pilot, reads your vibe and finds a compatible match nearby.

2. AI-Coached Chat — Once matched, you enter a chat room where Lumi provides real-time coaching:

• Ask Lumi — Tap to get a suggested reply based on conversation context

• Whisper Mode — Privately ask Lumi for advice without the other person seeing

• Auto-Context — Lumi detects awkward silences or risky messages and proactively offers help

3. Pixie Companion — A standalone AI chat where you can talk to Lumi about anything — social anxiety, relationship advice, or just vent. Lumi responds with structured "bubble" messages that feel like texting a real friend, not a chatbot.

4. Activity Feed — See what's happening around you, who's looking for company, and join spontaneous plans.

How we built it

Frontend: React 19 + TypeScript + Tailwind CSS 4, designed as a mobile-first PWA with native-feeling animations (custom spring easings, staggered reveals, haptic-style button feedback). We used shadcn/ui as the component foundation and built a custom "phone frame" wrapper for the demo experience.

Backend: Express + tRPC 11 with end-to-end type safety. Drizzle ORM on TiDB (MySQL-compatible distributed database). Manus OAuth for authentication.

AI Layer (Pixie API): We built a separate AI microservice that powers all of Lumi's intelligence:

• pixie.liveChat — Multi-turn companion conversations with structured bubble responses

• pixie.suggest — Analyzes chat context and generates reply suggestions with tone variants (playful/softer/casual)

• pixie.chat — Private whisper coaching during live conversations

• pixie.autoContext — Autonomous intervention detection (knows when to speak up vs. stay silent)

• askLumi.ask — Deep emotional analysis with safety architecture (detects thinking traps, risk levels, and provides grounded advice)

The AI layer uses a custom prompt architecture with persona control ("sassy roast bestie" vs "smooth witty fox"), voice matching (adapts to user's texting style), and a three-tier safety system that flags crisis situations.

Design: Soft purple/cream palette inspired by mindfulness apps, with playful micro-interactions. The "Shake" animation uses CSS keyframes with physics-based easing to feel like a real phone shake.

Challenges we ran into

1. Making AI feel human, not robotic — Early versions of Lumi sounded like a therapist. We iterated heavily on the persona system to make responses feel like a witty friend: short bubbles, casual tone, occasional roasts, and knowing when to shut up.

2. Real-time coaching without being creepy — The auto-context system needed careful calibration. Too aggressive = annoying. Too passive = useless. We settled on a cooldown system with confidence thresholds.

3. Type safety across the full stack — With tRPC + Drizzle + Zod validation + the external Pixie API, keeping types consistent across 5 layers was challenging. We solved it with shared type exports and strict response interfaces.

4. Demo mode vs. real mode — Building a convincing demo that works without authentication while also having a fully functional authenticated flow required careful architecture with graceful degradation.

5. Matching algorithm design — Balancing "spontaneity" (instant matches) with "quality" (compatible people) is an unsolved problem. Our current approach uses activity + time + proximity as primary signals.

Accomplishments that we're proud of

• The Lumi bubble system — AI responses arrive as staggered chat bubbles with different types (reaction, advice, comfort, roast) and emotions, making the AI feel alive rather than dumping a wall of text.

• Voice matching — Lumi adapts its suggestions to match your texting style (casual vs. formal, short vs. long, humor style). The userVoiceMatch score tells you how natural the suggestion will sound coming from you.

• Three-layer safety architecture — askLumi.ask performs emotional analysis, detects thinking traps (catastrophizing, mind-reading), assesses risk level, and routes to appropriate response modes (social soothing, grounding, reality check, or crisis redirect).

• The shake interaction — A simple gesture that captures the entire app philosophy: spontaneity, playfulness, and low commitment.

• Full demo experience — Anyone can open the app and experience the complete flow (shake → match → chat with AI coaching) without creating an account.

What we learned

• AI persona design is UX design — The difference between a useful AI and an annoying one isn't the model — it's the prompt architecture, response formatting, and knowing when NOT to respond.

• tRPC + Drizzle is incredibly productive — End-to-end type safety eliminated entire categories of bugs. We spent zero time debugging API contract mismatches.

• Mobile-first CSS is harder than it looks — Safe areas, viewport units, touch targets, and scroll behavior all behave differently across devices. The "phone frame" demo wrapper added another layer of complexity.

• Social apps need social proof — The hardest problem isn't technical — it's the cold start. Demo mode with realistic mock data was essential for communicating the vision.

What's next for Sponty

• Real-time matching engine — Replace demo matching with a live geolocation-based system using WebSockets

• Group Shake — Match 3-5 people for group activities (study sessions, pickup sports, dinner parties)

• Lumi memory — Persistent context across conversations so Lumi remembers your preferences, past interactions, and growth

• Voice messages with live coaching — Lumi analyzes your tone in real-time during voice messages

• Native mobile app — React Native or Flutter build with actual shake gesture detection via accelerometer

• Safety features — Meeting verification, location sharing with trusted contacts, and post-meetup check-ins

Built With

Share this project:

Updates