Prompt: WEB app called “ConnectSphere”

Create a web app called 'ConnectSphere' using Loveable, designed to showcase a peak vibe coding project for my UI/UX design portfolio.
The app should solve the practical user problem of helping young professionals (ages 22–35) build meaningful local social connections by
recommending nearby events and interest-based group meetups tailored to their preferences and schedules.

 

Goals and Requirements:

  • Micro-Interactions: Integrate engaging micro-interactions to enhance user delight, such as:

    • Smooth hover animations on event cards with subtle scaling and shadow effects.

    • A heart icon that pulses and emits sparkles when users save an event.

    • A swipe-to-refresh gesture with a playful loading spinner featuring a rotating globe.

    • Interactive form inputs with real-time validation feedback (e.g., a checkmark animation for valid entries).

    • A confetti burst when users RSVP to their first event.

 

Practical User Problem:

The app addresses the challenge of social isolation by curating personalized event recommendations (e.g., coffee meetups, hiking groups, book clubs) based on user inputs (interests, availability, location). Include features like:

  • A quick onboarding quiz to capture user preferences (e.g., hobbies, preferred event times).

  • A clean dashboard displaying nearby events with filters for date, distance, and category.

  • A 'Group Match' feature that suggests small meetup groups based on shared interests.

  • Integration with a calendar API to allow users to add events to their personal calendars seamlessly.

  • A chat feature for RSVPed users to coordinate before events.

 

High-End Visual Design:

  • Use a modern, vibrant color palette (e.g., soft gradients of coral, teal, and lavender) with a dark mode option.

  • Apply a premium typography system (e.g., Inter for body text, Playfair Display for headings) for readability and elegance.

  • Design sleek, minimalist event cards with high-quality imagery, rounded corners, and subtle glassmorphism effects.

  • Ensure a responsive layout that looks stunning on desktop, tablet, and mobile.

  • Incorporate subtle motion design (e.g., parallax scrolling for hero sections, fade-in animations for content loading).

 
 

Clean User Experience:

  • Design an intuitive navigation system with a sticky bottom nav bar on mobile and a sidebar on desktop.

  • Prioritize accessibility with ARIA labels, high-contrast text, and keyboard navigation support.

  • Streamline user flows (e.g., RSVP to an event in two clicks, filter events with one tap).

  • Provide clear feedback for actions (e.g., toast notifications for successful RSVPs or errors).

  • Optimize performance for fast load times, with lazy-loaded images and efficient API calls.

 

Tech and Functionality:

  • Build the app using Loveable’s framework for rapid development, leveraging its component library for reusable UI elements.

  • Use a mock API or Firebase for event data storage and retrieval to simulate real-world functionality.

  • Implement client-side state management for smooth interactions (e.g., filtering events without page reloads).

  • Ensure cross-browser compatibility and a progressive web app (PWA) setup for offline access.

 

Deliverables:

  • A fully functional web app deployed on a platform like Netlify or Vercel.

  • A Figma or Loveable design file showcasing the UI kit, component library,
    and key screens (onboarding, dashboard, event details, group chat).

  • A portfolio case study template highlighting the problem, solution,
    design process, and micro-interaction demos.

 
 

The final product should feel like a premium, polished app that wows portfolio viewers with its seamless UX, stunning visuals, and delightful micro-interactions, while demonstrating my ability to solve real user problems with Loveable."