Create New Profile Component

Overview

The CreateNewProfile component is a new onboarding flow for users who just signed up. It allows them to set up their initial profile with:

• Mood/Vibe Selection - Choose their current mood (Chatty, Quiet Vibes, Exploring, etc.)
• Interests - Add up to 10 interests via suggestions or custom input
• Location Tracking Preference - Opt in/out of location-based venue recommendations

Features

✨ Flexible Onboarding

• Can be optional (users can skip) or required (users must complete)
• Clean, Lantern-themed UI with dark mode design
• Emoji-based mood selection for better UX

🎯 Interest Management

• Pre-populated suggestions for quick selection
• Custom interest input with character limits
• Visual feedback with selected interests shown as removable tags
• Maximum 10 interests per profile

🔒 Privacy-Focused

• Clear explanations of location tracking opt-in
• Consistent with Lantern's zero-knowledge design

Usage

Basic Usage

import CreateNewProfile from './screens/profile/CreateNewProfile'

function MyOnboardingFlow() {
  const handleProfileComplete = (profileData) => {
    console.log('Profile data:', profileData)
    // profileData = {
    //   lanternName: string,
    //   interests: string[],
    //   mood: string,
    //   locationTracking: boolean
    // }
  
    // TODO: Send to Firebase
    // Navigate to dashboard
  }

  const handleSkipProfile = () => {
    // Navigate to dashboard
  }

  return (
    <CreateNewProfile
      lanternName="Amber Beacon"
      onComplete={handleProfileComplete}
      onSkip={handleSkipProfile}
      isRequired={false}
    />
  )
}

Props

Prop	Type	Default	Description
lanternName	string	Required	The user's Lantern name (generated during signup)
onComplete	function	() => {}	Callback when user completes profile setup
onSkip	function	() => {}	Callback when user skips profile setup
isRequired	boolean	false	If true, hides skip button and requires mood selection

Return Data from onComplete

{
  lanternName: "Amber Beacon",
  interests: ["Coffee", "Music", "Art"],
  mood: "chatty",
  locationTracking: false
}

Integration with SignupFlow

The CreateNewProfile component is designed to be called after SignupFlow completes. Currently it's routed as:

#/onboarding/profile

Suggested Flow

1. User starts signup → SignupFlow component
   • Age verification
   • Passphrase creation
   • Zero-knowledge encryption setup
2. On completion → CreateNewProfile component
   • Profile customization
   • Interest selection
3. User either completes or skips → Dashboard

See src/App.jsx for the current routing implementation.

Available Moods

• 💬 Chatty
• 🤫 Quiet Vibes
• 🗺️ Exploring
• 🌟 New to Town
• 💡 Looking for Recs
• 🌙 Late Night
• ☕ Coffee Time
• 🎵 Music Lover

Suggested Interests

Default suggestions include: Coffee, Hiking, Music, Art, Books, Gaming, Food, Travel, Photography, Fitness, Tech, Design, Movies, Theater, Comedy, Sports, Yoga, Cooking, Wine, Board Games, Podcasts, Fashion, Volunteer, Puzzles

Users can also add custom interests.

Testing

The component has full test coverage including:

• ✅ Profile form rendering
• ✅ Mood selection
• ✅ Adding/removing interests
• ✅ Interest limits (max 10)
• ✅ Location tracking toggle
• ✅ Form submission
• ✅ Skip functionality
• ✅ Required mode validation

Run tests:

npm test -- CreateNewProfile.test.jsx --run

Storybook

View interactive components:

npm run storybook

Then navigate to Components/CreateNewProfile to see:

• Default onboarding
• Required onboarding variant
• Mobile view

TODO: Backend Integration

The component currently logs profile data to console. Replace the placeholder in handleComplete with actual Firebase calls:

// In CreateNewProfile.jsx, handleComplete function:
// TODO: Wire to Firebase to save profile data
// const { updateUserProfile } = await import('../lib/firebaseClient')
// await updateUserProfile(userId, { interests, mood, locationTracking })

Design System

• Colors: Uses Lantern amber theme (amber-400, amber-900)
• Dark Mode: Full dark mode support (black, neutral-900)
• Icons: lucide-react icons
• Styling: Tailwind CSS
• Layout: Responsive, mobile-friendly full-screen modal

Accessibility

• Proper ARIA labels on interactive elements
• Keyboard-navigable
• Screen reader friendly
• High contrast text

---

Created: January 4, 2026 Component: src/components/CreateNewProfile.jsxTests: src/components/__tests__/CreateNewProfile.test.jsxStories: src/components/CreateNewProfile.stories.jsx