function MainComponent() { const [selectedItems, setSelectedItems] = useState([]); const [customExpense, setCustomExpense] = useState({ name: "", amount: 0 }); const [totalSavings, setTotalSavings] = useState(0); const [isTooltipVisible, setIsTooltipVisible] = useState(false); const ExpenseItem = ({ item, isSelected, onClick }) => { const [showTooltip, setShowTooltip] = useState(false); return (

{showTooltip && (

{item.tooltip}

)}

); }; const expenses = [ { category: "Entertainment", items: [ { name: "Netflix", amount: 50, emoji: "🍿", tooltip: "Steal your mama's Netflix login (she won't notice)", }, { name: "Spotify Premium", amount: 15, emoji: "🎧", tooltip: "Just vibe with the ads like it's 2012", }, { name: "Hulu/Disney+/HBO", amount: 15, emoji: "🎥", tooltip: "Time to join your friend's streaming family", }, { name: "Xbox/Game Pass/PlayStation Plus", amount: 15, emoji: "🎮", tooltip: "Maybe it's time for a book? (jk)", }, ], }, { category: "Social Media Influenced", items: [ { name: "Instagram 'Must Haves'", amount: 120, emoji: "📱", tooltip: "But did you really need that ice roller?", }, { name: "TikTok Made Me Buy It", amount: 100, emoji: "💸", tooltip: "Shop your own drawers of unused TikTok impulse buys", }, { name: "Instagrammable Food", amount: 100, emoji: "🍜", tooltip: "Your phone eats first, but your wallet cries last", }, { name: "Curated Subscription Boxes", amount: 50, emoji: "📦", tooltip: "Plot twist: You can live without another jade roller", }, ], }, { category: "Lifestyle Splurges", items: [ { name: "Coachella Outfits", amount: 200, emoji: "👗", tooltip: "The photos last forever, the outfits... not so much", }, { name: "Festival Tickets", amount: 250, emoji: "🎟", tooltip: "Watch the livestream from your couch instead?", }, { name: "Bougie Target Run", amount: 150, emoji: "🛍", tooltip: "Went in for toothpaste, left with a new personality", }, { name: "Farmer's Market Flex", amount: 120, emoji: "🥑", tooltip: "$15 for organic honey? Must be made by golden bees", }, { name: "Lulu Outfit for Farmers Market", amount: 200, emoji: "🧘‍♀️", tooltip: "The vegetables don't care what you're wearing", }, ], }, { category: "Food & Drink", items: [ { name: "UberEats", amount: 200, emoji: "🍔", tooltip: "Your legs still work, bestie", }, { name: "Cold Brew", amount: 140, emoji: "☕️", tooltip: "Home brew hits different (in your wallet)", }, { name: "Boozy Brunch", amount: 120, emoji: "🥂", tooltip: "Eggs taste the same without the champagne", }, { name: "Post-Bar Tacos", amount: 80, emoji: "🌮", tooltip: "Learn to cook drunk tacos at home", }, { name: "Matcha Everything", amount: 75, emoji: "🍵", tooltip: "Green tea bags are matcha's cousin", }, { name: "Meal Kit Subscriptions", amount: 100, emoji: "👩‍🍳", tooltip: "YouTube cooking tutorials are free", }, { name: "Midweek Craft Cocktails", amount: 50, emoji: "🍹", tooltip: "Water is free and hangover-proof", }, { name: "Late-Night Fast Food Runs", amount: 50, emoji: "🍟", tooltip: "Your future self will thank you for skipping this", }, ], }, { category: "Wellness & Trends", items: [ { name: "Juice Cleanse", amount: 90, emoji: "🧃", tooltip: "Just eat a vegetable instead", }, { name: "Trendy Skincare", amount: 150, emoji: "✨", tooltip: "Cerave and water work just fine", }, { name: "Astrology Readings", amount: 60, emoji: "🔮", tooltip: "Co-Star is free (and just as wrong)", }, { name: "Plant Parent Fails", amount: 60, emoji: "🌱", tooltip: "RIP to all the plants you killed this year", }, { name: "Boutique Fitness Memberships", amount: 150, emoji: "🏋️", tooltip: "Running outside is still free", }, { name: "Mindfulness/Meditation Apps", amount: 15, emoji: "🧘", tooltip: "Breathing is free, bestie", }, { name: "IV Drips or Vitamin Injections", amount: 100, emoji: "💉", tooltip: "Ever heard of drinking water?", }, ], }, { category: "Random But Relatable", items: [ { name: "Yet Another Water Bottle", amount: 45, emoji: "💧", tooltip: "How many emotional support water bottles do you need?", }, { name: "Fancy Dog Accessories", amount: 80, emoji: "🐶", tooltip: "Your dog doesn't know it's designer", }, { name: "Crypto FOMO", amount: 200, emoji: "💸", tooltip: "This is not the investment advice you're looking for", }, { name: "Extra Amazon Prime Impulse Buys", amount: 50, emoji: "📦", tooltip: "The 2am shopping spree strikes again", }, { name: "Uber/Lyft Splurges", amount: 100, emoji: "🚕", tooltip: "The bus is character building", }, ], }, { category: "Fashion & Beauty", items: [ { name: "Rent the Runway", amount: 150, emoji: "💃", tooltip: "Time to shop your own closet", }, { name: "Nail & Lash Appointments", amount: 120, emoji: "💅", tooltip: "Press-ons and strip lashes exist", }, { name: "Skincare Splurges", amount: 80, emoji: "🧴", tooltip: "Your face doesn't know it's luxury", }, ], }, ]; const calculateMortgageIncrease = (monthlySavings) => { const rate = 0.0675 / 12; const months = 360; const propertyTaxRate = 0.01 / 12; const payment = monthlySavings; const loanAmount = payment / ((rate * Math.pow(1 + rate, months)) / (Math.pow(1 + rate, months) - 1) + propertyTaxRate); return Math.round(loanAmount); }; useEffect(() => { const monthlyTotal = selectedItems.reduce( (sum, item) => sum + item.amount, 0, ); setTotalSavings(monthlyTotal); }, [selectedItems]); const toggleItem = (item) => { if (selectedItems.find((i) => i.name === item.name)) { setSelectedItems(selectedItems.filter((i) => i.name !== item.name)); } else { setSelectedItems([...selectedItems, item]); } }; const addCustomExpense = () => { if (customExpense.name && customExpense.amount > 0) { setSelectedItems([...selectedItems, { ...customExpense, emoji: "🤔" }]); setCustomExpense({ name: "", amount: 0 }); } }; const handleShare = () => { const text = `I just found ${calculateMortgageIncrease(totalSavings).toLocaleString()} purchasing power in my budget, find out yours here!`; if (navigator.share) { navigator.share({ text: text, url: window.location.href, }); } else { navigator.clipboard.writeText(`${text} ${window.location.href}`); alert("Link copied to clipboard!"); } }; return (

Hidden Home Fund Finder 🏠

Uncover thousands hiding in your daily spending → See exactly how much more house you could afford

Select your splurges below. No judgment, just math 💅

Your Results 📈

Monthly Savings 💰

${totalSavings}/mo

Additional Home Price 🏠

${calculateMortgageIncrease(totalSavings).toLocaleString()}

{selectedItems.length > 0 && (

Selected Items:

{selectedItems.map((item, idx) => (

{item.emoji} {item.name} ${item.amount}/mo

))}

)} That was fun! Make it reality 🏠

{isTooltipVisible && (

Numbers shown are based on a 30-year fixed rate at 6.75% (just P&I payments - your actual costs will include other fun stuff like taxes and insurance). Not a loan commitment (duh) – talk to a mortgage pro for your true buying power.

)}

Share this with the homie who shoulda bought a condo 3 years ago 😅

{expenses.map((category, idx) => (

{category.category}

{category.items.map((item, itemIdx) => ( i.name === item.name)} onClick={() => toggleItem(item)} /> ))}

))}

What else are you splurging on? 🤔

setCustomExpense({ ...customExpense, name: e.target.value }) } className="w-full p-2 border rounded" /> setCustomExpense({ ...customExpense, amount: parseFloat(e.target.value) || 0, }) } className="w-full p-2 border rounded" />