I Built a Full-Stack Family OS — Web App + Mobile App with Video Calls, Brain Games, Expenses & More

AI Summary14 min read

TL;DR

Family Command Center is a full-stack web and mobile app designed as a private, integrated OS for families. It combines real-time chat, WebRTC video calls, brain games, chore management, and rewards to serve both parents and kids in one secure platform.

Key Takeaways

  • Family Command Center addresses the lack of purpose-built software for families by offering a unified, private space for communication, organization, and fun.
  • The app features role-based interactions: parents manage chores, expenses, and rewards, while kids engage with brain games and earn points for real-world incentives.
  • Built with privacy-first principles, it includes end-to-end messaging, peer-to-peer video calls via WebRTC, and data isolation using Supabase Row Level Security.
  • Technical highlights include cross-platform compatibility (React web app and React Native mobile app), a TURN server for global connectivity, and 32 self-contained brain games.
  • The system uses an invite-code family model and a rewards economy to motivate participation without external data harvesting or ads.

Tags

devchallengeweekendchallengeshowdevwebdev

This is a submission for the DEV Weekend Challenge: Community


The Community

Every family is a tiny community — one that shares a home, a budget, responsibilities, inside jokes, and the never-ending question: "Who left the milk out?"

But families are deeply underserved when it comes to software. You've got Slack for work teams. Notion for project groups. Discord for gaming communities. But what do families actually have? A WhatsApp group that's 80% memes, a shared Google Calendar no one updates, and sticky notes on the fridge.

And when it comes to communication — the most important function of any community — families have it worst of all. Their options are:

  • WhatsApp/iMessage — mixed in with work messages, no structure, no privacy from the outside world
  • Facebook Messenger — run by an ad company that profits from your family's data
  • Zoom/FaceTime — great for calls, but no messaging, no shared context, no family management tools

There is no single, private, purpose-built space for families to communicate, organise, and connect — until now.

I built Family Command Center for exactly this community — the modern family distributed across school runs, work-from-home days, different cities, and different time zones.

There are two very different users in every family:

  • Parents — who need to manage the household: chores, groceries, budget, and staying connected
  • Kids — who need structure, fun, and a reason to actually do their chores

Most apps only serve one of these groups. Family Command Center serves both, simultaneously, in the same app. Kids get a gamified world of brain games, points, and rewards they can unlock. Parents get a control panel for the home. And both get a shared private space to communicate — with real-time chat and even face-to-face video calls.

This is software for the most important community most of us belong to.


What I Built

Family Command Center is a full-stack web app + React Native mobile app that serves as a unified operating system for your family. It's not just a to-do list. It's every tool your family actually needs, beautifully integrated into one place.

👨‍👩‍👧‍👦 Designed for Both Parents AND Kids

Family Command Center has a unified experience but with role-based interaction:

  • Parents can assign chores, create reward items, set grocery lists, track expenses, and oversee the family
  • Kids can complete chores, play 32 brain games to earn points, and redeem those points for real-world rewards
  • Everyone can use private chat, video calls, and see the shared dashboard

This parent/child dynamic is core to how the app was designed — it's not just a feature, it's the whole philosophy.


🏠 Core Features

Feature What it does
Dashboard Personalised greeting + live overview of chores, groceries & notes
Chores Assign, track, and complete household tasks with progress tracking
Grocery / Shop Shared live grocery list — add items from web or mobile
Notes Family bulletin board for quick messages and reminders
💬 Private Chat End-to-end family messaging with group + direct messages, photo/video sharing
📹 Video Calls WebRTC P2P video calling with TURN server — works worldwide
Expenses / Split Track shared expenses and settle up balances — like Splitwise, but private
Brain Games 32 cognitive games for kids to earn points
Rewards Kids redeem points for real rewards set by parents
Family Management Create or join a family group with invite codes

💬 Private Family Chat — A Space That Belongs Only to Your Family

This isn't just a chat box bolted on. Family Command Center's messaging is designed from the ground up for family privacy and connection:

  • Family Board — a shared group channel the whole family sees
  • Direct Messages — private 1-on-1 conversations between any family members
  • Photo & Video Sharing — attachments are transferred peer-to-peer (no server storage of your files)
  • HD Video Thumbnails — preview videos before opening, with quality status indicators
  • Real-time delivery — powered by Supabase Realtime, messages land instantly
  • No ads. No algorithms. No data harvesting. Your family's conversations stay in your family.

Why does this matter? Because privacy in family communication is a right, not a premium feature. Kids should be able to message parents without it being monetised. Parents should be able to share family photos without an algorithm learning from them. Family Command Center gives you that.


📹 WebRTC Video Calls — Face-to-Face, Anywhere in the World

This is where the technical depth really shows. Family Command Center has full peer-to-peer video calling built in — no Zoom subscription, no third-party app, no account needed beyond your family's Google login.

How the connection works:

Family Member A (Web)              Family Member B (Mobile)
        │                                    │
        │◄──── Supabase Realtime ───────────►│  ← Signaling channel
        │      (SDP Offer/Answer +            │    (WebRTC handshake)
        │       ICE Candidates)               │
        │                                    │
        │◄──── WebRTC P2P (Direct) ─────────►│  ← Video/Audio stream
        │         OR                         │
        │◄──── TURN Server (Relay) ──────────►│  ← Fallback for NAT/firewalls
Enter fullscreen mode Exit fullscreen mode

Technical highlights:

  • STUN + TURN servers — STUN for direct P2P, TURN relay as fallback. Calls work across NAT, firewalls, mobile networks, and across the world — not just on the same WiFi
  • Supabase Realtime as the signalling channel — instead of building and hosting a dedicated signalling server, I reused Supabase's realtime channels for WebRTC SDP offer/answer and ICE candidate exchange. Zero extra infrastructure, creative reuse
  • Cross-platform calling — web app user can call a mobile app user seamlessly
  • P2P file transfer in calls — send photos/videos during a call, peer-to-peer, never touching a server
  • Queue management — transfer queue handles multiple attachments without blocking the call

Why this matters for families: Your video call goes directly from your device to theirs — no middleman company recording or processing your family conversations. If a direct P2P link isn't possible (e.g., strict corporate firewall or mobile carrier NAT), the TURN server creates an encrypted relay. Either way, your family's video is private.


🧠 The Brain Games Hub — 32 Games (Kids Love This)

Instead of screentime being passive and mindless, the games section makes it productive and rewarding. There are 32 brain-training games across 5 cognitive categories:

Category Games
🧠 Memory Memory Match, Pattern Memory, N-Back, Number Memory, Simon Says
🔢 Logic Sudoku, 2048, Tower of Hanoi, Ball Sort, Lights Out, Water Jugs
🔤 Language Word Scramble, Hangman, Word Connections, Word Chain, Anagram Solver
⚡ Reflex Whack-a-Mole, Reflex Challenge, Typing Speed, Quick Math
🗺️ Spatial Sliding Puzzle, River Crossing, Matchstick Math, Pathway Maze, Mental Rotation

Kids earn points for every game they play — turning screen time into skill-building that feeds into the rewards system.


🏆 The Kids Rewards Loop

 Kid completes a chore ──► Earns points
 Kid plays brain games ──► Earns more points
              ▼
  Kid browses the Rewards store
              ▼
  Kid submits a redemption request
              ▼
  Parent sees it & approves ✅  (or rejects)
              ▼
  Kid gets their real-world reward! 🎉
Enter fullscreen mode Exit fullscreen mode

Rewards are fully customisable by parents — e.g. "Movie night = 200 pts", "Extra screen time = 150 pts", "Sleepover = 500 pts". This creates a motivating, transparent system that makes kids want to participate — not because they're forced to, but because there's something real at the end of it.


📱 Cross-Platform

  • Web App: React + TypeScript + Vite (deployed on Vercel)
  • Mobile App: React Native + Expo (Android build available on Play Store)
  • Both share the same Supabase backend — data syncs in real-time across all devices

Demo

🎥 Website → family-command-center-taupe.vercel.app
📱 Mobile App

Family Command Center - Apps on Google Play

The ultimate family organizer: Chores, Rewards, Groceries & Fun Brain Games!

favicon play.google.com

(Sign in with any Google account to explore the full app)

Key moments to look for:

  • 👋 Personalised dashboard — real-time family overview
  • 🎮 Brain Games hub with 32 games, categorised by cognitive type
  • 💬 Family Board + Direct Messages — private family chat
  • 📹 WebRTC Video Call between web and mobile
  • 💰 Expense tracker with settle-up calculations
  • ✅ Chore management with confetti celebration + points earned
  • 🏆 Rewards store — parent creates rewards, kid redeems, parent approves

Code

🏠 Family Command Center

A unified operating system for the modern family — private chat, WebRTC video calls, brain games, chore management, shared expenses, grocery lists, and a kids rewards system. All in one app, across web and mobile.

Live Demo React TypeScript Supabase React Native


📖 Overview

Family Command Center solves a real problem: families have no private, purpose-built digital space. WhatsApp mixes family with work. Google Calendar nobody updates. Zoom requires a subscription. There's no single app that handles family communication, organisation, and fun together.

This app is built for two types of users in every family:

User What they need What they get
Parents Manage the household Chores, groceries, expenses, family overview, reward approval
Kids Structure + motivation Brain games, points, rewards store, redemptions
Everyone Stay connected Private chat, direct messages, WebRTC video calls

✨ Features

🏠 Dashboard

  • Personalised greeting with the family member's name
  • At-a-glance overview: upcoming chores, grocery items needed, latest…

The repo contains both the web app (/src) and the React Native mobile app (/mobile-app).


How I Built It

🛠️ Tech Stack

Frontend (Web)

  • React 18 + TypeScript — component-based, strongly typed
  • Vite — blazing-fast dev server and build
  • React Router v6 — client-side routing across 40+ pages
  • Tailwind CSS — utility-first styling

Backend & Database

  • Supabase — PostgreSQL with Row Level Security
  • Supabase Realtime — live subscriptions for chat, chores, groceries, and WebRTC signalling
  • Supabase Auth — Google OAuth + secure sessions
  • Custom SQL schema with 15+ tables — families, members, expenses, rewards, game scores, redemptions, messages, attachments, and more

Mobile App

  • React Native + Expo — cross-platform iOS/Android
  • Same Supabase backend — real-time sync with web
  • Expo AV — video/audio handling in calls
  • Custom bottom tab navigation

Real-Time Communication

  • WebRTC — peer-to-peer video/audio with ICE/STUN/TURN
  • Supabase Realtime repurposed as the WebRTC signalling server
  • TURN server — relay fallback for worldwide connectivity through NAT/firewalls
  • P2P file transfer — attachments sent directly between devices during chat/calls

🏗️ Architecture Highlights

Family Data Isolation with Row Level Security
Every piece of data — notes, chores, expenses, chat messages, game scores — is scoped to a family_id via Supabase RLS policies. A user from Family A physically cannot read or write data from Family B. This is enforced at the database level, not just the application level.

WebRTC + Supabase as Signaling (No Extra Server)
Instead of spinning up a dedicated WebRTC signalling server (the usual approach), I used Supabase Realtime channels for the SDP offer/answer and ICE candidate exchange. When a call is initiated, both clients subscribe to a shared channel, negotiate the WebRTC handshake through it, then establish a direct P2P connection. The Supabase channel is only used for ~5 messages — the actual video never touches it.

TURN Server for Global Reach
Pure P2P WebRTC works great on the same network. But real families are distributed — kid at school, parent at work, grandparent in another country. The app uses TURN server configuration so that when a direct P2P connection isn't possible (strict NAT, mobile carrier, corporate firewall), the video is relayed through the TURN server. Calls work reliably worldwide, not just on the same WiFi.

Invite-Code Family System
Families are created by one member who gets a unique invite code. Others join by entering the code — simple enough for kids to use, secure enough that strangers can't stumble in. Family data is isolated from the moment of joining.

Rewards Economy (Parent Admin + Kid Participant)
Parents are the admins: they create chore assignments, set reward items, and approve/reject redemption requests. Kids are the participants: they complete chores, earn points from games, browse the rewards store, and submit redemption requests. The role separation is baked into the database (role field on profiles) and enforced both in RLS policies and the UI flow.

32 Self-Contained Brain Games
Every game is an isolated React component with its own state machine. No external game engine. Pure React + hooks + occasional HTML Canvas. Games range from simple tap games (Whack-a-Mole) to complex working-memory tasks (N-Back, Dual Task, Trail Making) — intentionally spanning different cognitive domains so there's something for every age.


💡 Why I Built It This Way

I wanted something my own family would actually use — not a portfolio demo.

  1. Privacy first — your family's chat, video calls, photos, and data belong to your family. No ad targeting, no data selling
  2. No friction — Google login, no manual sign-up, invite code to join family
  3. Mobile-first — works on the family iPad, the kids' Android phones, the parent's laptop
  4. Games that earn real rewards — kids are genuinely motivated, not forced
  5. Parent oversight without micromanagement — parents set the rules (chores, rewards), kids operate within them independently
  6. Video calling built-in — family members in different cities stay face-to-face
  7. One app for everyone — no separate "kids app" and "parent app"; the whole family shares one space

The biggest technical challenge was getting WebRTC to work reliably cross-platform (web ↔ mobile, different networks, different countries). The TURN server implementation and using Supabase Realtime as the signalling layer took the most iteration — but once solved, it meant zero additional infrastructure cost and calls that work anywhere in the world.


Thanks for reading! I'd love to hear your thoughts — especially if you're a parent. What features would your family actually use? 🏠


Co-built with @sojinantony01

Some attachments











Visit Website