Family Harmony AI

What Inspired Me Family disagreements are universal — who does the chores, where to eat, what to watch. I wanted to build something that actually helps families resolve everyday conflicts in a fair, structured way. The idea of using AI as a neutral mediator felt genuinely useful, not just a cool tech demo. That's what sparked Family Harmony AI. What I Learned This project taught me a huge amount about how React applications are actually structured in the real world — routing with React Router, passing props between components, managing state across pages, and how environment variables work. I also learned how to integrate a real AI API (Anthropic's Claude) into a frontend app, and why you can't just call an API directly from the browser without handling CORS. Understanding the difference between frontend and backend, and why API keys need to stay secret, was a big practical lesson. How I Built It Family Harmony AI is a React web app with three AI-powered features. The Compromise Generator takes each person's preferences and uses Claude to find a fair middle ground with a fairness score and reasoning. The Smart Chore Splitter lets you add family members with their ages and how busy they are, then AI divides only the chores you specify fairly between them. The Conflict Insights Dashboard tracks every session and uses AI to analyze patterns — who's involved most, what topics cause friction, and what could be done better. The whole app shares a consistent warm editorial design with custom typography, animations, and a coral/teal/amber color palette. Challenges I Faced The biggest challenge was auth errors— when browsers block direct calls to the Anthropic API for security reasons, which took a while to understand and work around. Managing shared state across pages was tricky too; getting the Dashboard to actually receive history from the other two tools required rethinking how App.js was structured. I also ran into issues with AI generating random chores instead of only the ones I provided — which came down to how precisely the prompt was written. Learning that the prompt wording directly affects the output was a big insight.

Built With

• api
• claude
• css
• html
• javascript
• json
• node.js
• react