Ember - Dating App

Ember is a production-ready dating app template built with Ionic React and Capacitor. It covers the full user journey - from onboarding through discovery, matching, and messaging - with a polished mobile UI and a consistent design system throughout.

All screens are fully built. Navigation, gestures, state management, and component composition are implemented and working. The template ships with realistic mock data so every feature is immediately functional and demonstrable. There is no real backend - the template is designed as a front-end starting point ready to be connected to your own API.

The codebase is written in TypeScript with clearly defined interfaces for all data models, making it straightforward to replace the mock layer with real API calls.

Key Features

• Swipe-based discovery - gesture-driven card stack with Like (right), Pass (left), and Super Like (up) interactions, visual drag feedback labels and a 30% simulated match rate
• Match celebration overlay - full-screen animated modal triggered on mutual match
• Real-time-feeling chat - conversation threads with typing indicators, simulated auto-replies, message status (sent / delivered / read), and date separators
• 7-step onboarding wizard - name, birthday (18+ validation), gender, interest preferences, location, bio (300-char limit), and interest tag selection (26 tags, min 3 required)
• Activity feed - Likes and Visits tabs with blurred premium-locked cards and an upgrade prompt
• Profile management - photo grid editor (up to 9 photos), bio, prompts (choose from 8 questions), and interest chips
• Discovery filter sheet - age range, max distance, gender preference, verified-only, and active-recently toggles
• 3-tier subscription screen - Glow (monthly), Flame (quarterly, popular), and Blaze (annual) with per-plan feature lists and savings callouts
• Settings page - notifications toggles, privacy controls, account actions (log out with confirmation, delete account)
• Skeleton loading state and empty states on all major screens
• Custom design system - full CSS variable token set (colours, gradients, shadows, spacing, radius, typography)

Technology Stack

• Framework: Ionic 8.5 + React 19
• Language: TypeScript 5.9
• Routing: React Router 5
• Mobile bridge: Capacitor 8 (App, Haptics, Keyboard, Status Bar)
• Icons: Ionicons 7 + Lucide React
• Bundler: Vite 5
• Testing: Vitest (unit) + Cypress 13 (E2E, configured)
• Linting: ESLint 9 with React Hooks rules

Best For

• Developers building a dating or social matching app who want a complete, navigable starting point
• Agencies pitching a dating app concept to a client with a working demo
• Developers who want to study Ionic gesture handling, tab navigation, and modal patterns in a realistic app context
• Teams who need a front-end shell ready to wire up to a backend (Firebase, Supabase, custom API)

Notes

• No backend is included. All data is mocked in src/services/mockData.ts. Authentication buttons (Apple, Google, Email) redirect directly to the - main tab view.
• No payment integration. The Premium screen is fully designed but the subscribe button shows a toast only - no Stripe or in-app purchase SDK is - wired up.
• Capacitor plugins (Haptics, Keyboard, Status Bar) are installed but not deeply integrated - they are available to extend as needed.
• Placeholder profile photos use pravatar.cc (800px) and require an internet connection to load.