You are a professional full-stack developer and UI/UX designer. Build a modern, mobile-first social/dating app frontend (call it "Heartly" — you may replace the name) with production-ready code and clear integration notes for backend services. Use Next.js (or React) + Tailwind CSS + Framer Motion for animations. Provide file-structure, components, and example pages. Use Firebase (Auth, Firestore, Storage) for quick setup and WebRTC (or optional Agora/Twilio integration) for audio/video calls. Keep code clean, commented, and ready to deploy on Vercel or Replit. Also include steps to turn the site into a PWA (Add to Home Screen). ## Required Features (implement UI + integration hooks):1. Auth & Onboarding - Email / Password & Google Sign-In (Firebase Auth). - Onboarding flow: upload profile photos, write bio, set preferences (age, distance), interests/tags. - Photo verification hint (optional).2. Home / Discover - Swipe or card-based or grid discover UI (mobile-first). - Show distance, age, short bio, mutual interests. - Buttons: Like, Super-like, Pass, View Profile.3. Profile - Profile edit page: multiple photos (carousel), bio, interests, social links. - Privacy settings and block/report user option.4. Follow / Match System - Follow / Unfollow (or Match) mechanics with realtime updates saved in Firestore. - Notification for new followers/matches.5. Media-rich Posts & Stories (optional) - User timeline or simple moments: photo/video posts, ephemeral stories (24h).6. Chat / Messaging - Real-time messaging using Firestore + presence indicator. - Message types: text, images, short videos, voice notes. - Message read receipts and typing indicator.7. Audio & Video Calls - UI for starting/receiving audio & video calls. - Use browser WebRTC for peer-to-peer with Firebase Firestore as signaling, or include optional setup for Agora/Twilio with instructions. - In-call UI: mute, end call, switch camera, camera off (audio only).8. Notifications - In-app notification center. - Push notification instructions (Firebase Cloud Messaging) for mobile/homescreen.9. Safety & Moderation - Report user flow, block user, basic profanity filter UI. - Show terms & community guidelines link.10. Settings - Edit profile, change password, delete account, privacy toggles (show distance, show online status).11. Performance & UX - Skeleton loaders, error states, optimistic UI for likes/messages. - Dark mode toggle and responsive breakpoints. - Accessible HTML (aria labels), keyboard navigation for desktop.12. PWA & Deploy - Add manifest.json, service worker, and instructions to enable “Add to Home Screen”. - Provide “Export to Vercel / Run on Replit” steps and sample environment variables (FIREBASE config, optional Agora/Twilio keys).## Deliverables (what AI should output):- A Next.js project scaffold with pages/components: - /pages/_app.tsx, /pages/index.tsx (Discover), /pages/onboarding, /pages/profile/[id], /pages/chat/[chatId], /pages/settings - Components: Header, BottomNav (mobile), ProfileCard, SwipeDeck, ChatBubble, CallModal, MediaUploader, StorySlider, NotificationPanel- Example Firebase integration files with comments (firebaseClient.ts).- Example WebRTC signaling helper (signaling.ts) using Firestore collections.- README.md with step-by-step deployment: - How to set up Firebase project & environment variables. - How to enable FCM for push. - How to enable WebRTC or connect Agora/Twilio (optional). - How to build PWA and Add to Home Screen.- Dummy seeded data (3-5 sample users) to preview the UI.## UI/Design Notes:- Use modern minimal palette, rounded avatars, card shadows, micro-interactions with Framer Motion.- Mobile-first breakpoints; bottom tab navigation like Instagram/modern apps.- Provide dark & light themes.### End goal:A complete, deployable frontend scaffold for a modern social/dating app with real-time chat and audio/video call hooks — ready to connect to Firebase and optionally to Agora/Twilio for higher-quality calls.
I'll build you a complete, production-ready social/dating app called "Heartly" with all the features you requested! This is a comprehensive project, so let me start by generating design inspiration and then systematically build each system.
I can see the design inspiration with beautiful gradients, modern typography, and a sophisticated color palette. Let me start building Heartly with this aesthetic in mind. I'll create a premium dating app with smooth animations, gradient accents, and a clean mobile-first interface.
I've set up the complete project structure with Firebase integration, theming, authentication utilities, and dummy data. The app features a beautiful gradient-based design inspired by the reference images, with a modern color palette of pinks, purples, and blues.
Key features implemented:
Next, I'll build the authentication and onboarding flow!
I've only completed the initial setup. Let me continue building out all the features. Moving to the authentication and onboarding flow now.
I've built a complete authentication and onboarding flow with beautiful animations and a multi-step wizard. The system includes email/password and Google sign-in, a 4-step onboarding process for photos, bio, interests, and preferences, and password reset functionality. All forms feature proper validation, error handling, and loading states with the gradient design aesthetic from the inspiration.
Let me continue with the next task - building the discover/swipe interface and match system.
I've built a complete discover/swipe interface with card-based UI, drag-to-swipe functionality, match detection, and a matches page. The system includes Firebase integration for likes, super likes, passes, and matches with real-time notifications. The UI features smooth animations, photo carousels, and a beautiful gradient design matching the inspiration.
Let me continue with the remaining tasks. Moving to profile pages and editing.
I've built comprehensive profile pages including a user's own profile view with stats and edit functionality, a full-featured profile editor with photo management and preference settings, and a detailed view for other users' profiles with follow/like/message actions. All pages feature smooth animations and the gradient design aesthetic.
Let me continue with the real-time chat system.
I've built a complete real-time chat system with Firebase Firestore integration, featuring live message updates, typing indicators, read receipts, media sharing, and a beautiful chat interface. The system includes a chat list page showing all conversations with unread counts and a detailed chat page with smooth animations and real-time updates.
Let me continue with the audio/video call functionality.
I've implemented complete audio/video call functionality using WebRTC with Firebase Firestore as the signaling server. The system includes peer-to-peer connection setup, call controls (mute, video toggle, end call), and a beautiful call interface with picture-in-picture video. For production scale, I've included comments about integrating Agora, Twilio, or Daily.co for better reliability.
The Agent timed out. Type a new prompt to continue.
To configure the generation, complete these steps: