Family Trip Command Center (Palantir for Family Trips)

Skill by ara.so — Daily 2026 Skills collection.

A deliberately overbuilt, dark-themed operations dashboard for coordinating multi-family road trips. Built with React 19, Vite, Google Maps JS API, Framer Motion, and Lucide icons. Treats a weekend cabin trip like a live ops room: convoy tracking, arrival windows, day-by-day timeline playback, meal logistics, expense splits, and family checklists.

Installation & Setup

git clone https://github.com/andrewjiang/palantir-for-family-trips.git
cd palantir-for-family-trips
npm install
cp .env.example .env

Edit .env:

VITE_GOOGLE_MAPS_API_KEY=your_browser_maps_key_here
VITE_GOOGLE_MAP_ID=your_optional_google_map_id

npm run dev

Open http://127.0.0.1:5173 (or the URL Vite prints).

Without a Maps API key the UI fully renders but the live Google Map layer won't initialize. All other views work without it.

Project Structure

src/
  App.jsx          # Main shell, tabs, timeline controls, overlays
  CommandMap.jsx   # Google Maps route rendering, convoy playback
  tripModel.js     # Seed trip document, families, routes, helpers
  main.jsx         # React entry point
  index.css        # Global dark-theme styles
public/
docs/              # Screenshot assets for README
.env.example

Core Data Model (`src/tripModel.js`)

The trip is a single JS object (the "trip document") exported from tripModel.js. Everything — families, routes, days, meals, activities, expenses — lives here.

Typical shape

// src/tripModel.js (simplified)

export const trip = {
  name: "Pine Mountain Lake & Yosemite 2026",
  basecamp: {
    label: "Pine Mountain Lake Cabin",
    coords: { lat: 37.85, lng: -120.17 },
  },
  families: [
    {
      id: "fam-a",
      name: "The Johnsons",
      origin: { label: "San Francisco, CA", coords: { lat: 37.77, lng: -122.41 } },
      members: ["Alice", "Bob", "Charlie (8)", "Dana (5)"],
      vehicle: "Blue Minivan",
      arrivalWindow: { earliest: "2026-06-27T14:00:00", latest: "2026-06-27T16:00:00" },
      color: "#4ade80",
    },
    {
      id: "fam-b",
      name: "The Garcias",
      origin: { label: "San Jose, CA", coords: { lat: 37.33, lng: -121.88 } },
      members: ["Elena", "Marco", "Sofia (6)"],
      vehicle: "Silver SUV",
      arrivalWindow: { earliest: "2026-06-27T15:30:00", latest: "2026-06-27T17:00:00" },
      color: "#f97316",
    },
  ],
  days: [
    {
      date: "2026-06-27",
      label: "Arrival Day",
      events: [
        { time: "14:00", type: "arrival", familyId: "fam-a", note: "Johnsons ETA" },
        { time: "18:30", type: "meal", mealId: "dinner-fri", note: "Group dinner at basecamp" },
      ],
    },
    // …more days
  ],
  meals: [
    {
      id: "dinner-fri",
      label: "Friday Dinner",
      type: "dinner",
      location: "basecamp",
      assignedTo: "fam-a",
      menu: ["Tacos", "Chips & Guac", "Watermelon"],
      shoppingList: ["tortillas", "ground beef", "salsa"],
    },
  ],
  activities: [
    {
      id: "act-hike-1",
      label: "Mariposa Grove Hike",
      day: "2026-06-28",
      time: "09:00",
      durationHours: 3,
      location: { label: "Mariposa Grove, Yosemite", coords: { lat: 37.5, lng: -119.6 } },
      suitableAges: "5+",
      notes: "Bring water and snacks",
    },
  ],
  expenses: [
    { id: "exp-1", label: "Cabin rental", amount: 900, paidBy: "fam-a", splitAmong: ["fam-a", "fam-b"] },
  ],
  checklist: {
    "fam-a": ["Pack hiking boots", "Download offline maps", "Bring beach towels"],
    "fam-b": ["Bring board games", "Confirm car seats"],
  },
};

// Helper: get a family by id
export function getFamily(id) {
  return trip.families.find((f) => f.id === id);
}

// Helper: get events for a given date string "YYYY-MM-DD"
export function getDayEvents(dateStr) {
  const day = trip.days.find((d) => d.date === dateStr);
  return day ? day.events : [];
}

// Helper: total expense owed per family
export function splitExpense(expense) {
  const share = expense.amount / expense.splitAmong.length;
  return expense.splitAmong.map((famId) => ({ famId, owes: share }));
}

Adding a New Family

Edit src/tripModel.js:

families: [
  // …existing families
  {
    id: "fam-c",
    name: "The Nguyens",
    origin: { label: "Sacramento, CA", coords: { lat: 38.57, lng: -121.49 } },
    members: ["Linh", "Minh", "Jade (10)", "Owen (7)"],
    vehicle: "Red Crossover",
    arrivalWindow: { earliest: "2026-06-27T13:00:00", latest: "2026-06-27T15:00:00" },
    color: "#a78bfa", // pick a distinct color for map polyline + UI accents
  },
],

The map, timeline, and family view all consume trip.families reactively — adding a family here surfaces it everywhere.

Google Maps & Route Playback (`src/CommandMap.jsx`)

CommandMap accepts props derived from the trip model and renders routes + convoy playback.

Key props pattern

// Inside App.jsx
import CommandMap from "./CommandMap";
import { trip } from "./tripModel";

<CommandMap
  families={trip.families}
  basecamp={trip.basecamp}
  playbackTime={currentPlaybackTime} // ISO string or null
  activeFamily={selectedFamilyId}    // highlight one convoy line
  onMarkerClick={(familyId) => setSelectedFamilyId(familyId)}
/>

Adding a custom waypoint to a route

In CommandMap.jsx, each family's route is built with the Directions Service. To add a waypoint (e.g. a gas stop):

// Inside CommandMap.jsx, where directionsService.route() is called:
directionsService.route(
  {
    origin: family.origin.coords,
    destination: trip.basecamp.coords,
    waypoints: [
      {
        location: { lat: 37.65, lng: -120.95 }, // e.g. Oakdale gas stop
        stopover: false,
      },
    ],
    travelMode: google.maps.TravelMode.DRIVING,
  },
  (result, status) => {
    if (status === "OK") {
      directionsRenderer.setDirections(result);
    }
  }
);

Timeline Playback

The timeline in App.jsx steps through day events. The current day index and playback offset drive what the map and timeline panel show.

Hooking into timeline state

// App.jsx pattern
const [dayIndex, setDayIndex] = useState(0);
const currentDay = trip.days[dayIndex];

// Step forward
function advanceDay() {
  setDayIndex((i) => Math.min(i + 1, trip.days.length - 1));
}

// Render events for current day
currentDay.events.map((event) => (
  <TimelineEvent key={event.time} event={event} families={trip.families} />
));

Adding a New Tab / View

Tabs are defined in App.jsx. To add a new view (e.g. a "Packing" tab):

// 1. Define the tab in the tabs array
const TABS = [
  { id: "itinerary", label: "Itinerary" },
  { id: "map", label: "Map" },
  { id: "meals", label: "Meals" },
  { id: "activities", label: "Activities" },
  { id: "expenses", label: "Expenses" },
  { id: "families", label: "Families" },
  { id: "packing", label: "Packing" }, // ← new
];

// 2. Render it in the tab content switch
{activeTab === "packing" && (
  <PackingView checklist={trip.checklist} families={trip.families} />
)}

// src/PackingView.jsx
export default function PackingView({ checklist, families }) {
  return (
    <div className="packing-view">
      {families.map((fam) => (
        <div key={fam.id} className="family-checklist">
          <h3 style={{ color: fam.color }}>{fam.name}</h3>
          <ul>
            {(checklist[fam.id] || []).map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Framer Motion Overlay Pattern

The mission launch overlay uses Framer Motion. Reuse this pattern for any dramatic full-screen overlay:

import { AnimatePresence, motion } from "framer-motion";

<AnimatePresence>
  {showOverlay && (
    <motion.div
      className="overlay"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.3, ease: "easeOut" }}
    >
      <h1>MISSION LAUNCH</h1>
      <button onClick={() => setShowOverlay(false)}>Dismiss</button>
    </motion.div>
  )}
</AnimatePresence>

Expense Split Example

import { trip, splitExpense } from "./tripModel";

// Show each family's share for all expenses
trip.expenses.forEach((exp) => {
  const splits = splitExpense(exp);
  console.log(`${exp.label} ($${exp.amount}):`);
  splits.forEach(({ famId, owes }) => {
    const fam = trip.families.find((f) => f.id === famId);
    console.log(`  ${fam.name} owes $${owes.toFixed(2)}`);
  });
});

Environment Variables Reference

Variable	Required	Purpose
`VITE_GOOGLE_MAPS_API_KEY`	Recommended	Enables Google Maps rendering and Directions API
`VITE_GOOGLE_MAP_ID`	Optional	Enables Cloud-based map styling / Advanced Markers

Access in code:

const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
const mapId = import.meta.env.VITE_GOOGLE_MAP_ID;

Common Patterns & Tips

All trip data lives in tripModel.js — edit there first; the UI reacts automatically.
Family colors are used for map polylines, timeline accents, and checklist headers. Pick hex values with enough contrast on dark backgrounds.
State is local — no backend, no auth. Refresh resets to seed data unless you add localStorage persistence.
Optimized for desktop — the dense dashboard layout is intentional; don't expect a responsive mobile layout out of the box.
Google Maps billing — if you deploy with your key, usage is billed to your Google Cloud project. Restrict the key to your domain.

Troubleshooting

Problem	Fix
Map doesn't load	Check `VITE_GOOGLE_MAPS_API_KEY` in `.env`; ensure the key has Maps JS API and Directions API enabled in Google Cloud Console
`google is not defined`	The Maps script loads async; make sure `CommandMap` only calls Maps APIs inside the `onLoad` callback
Routes don't render	Directions API must be enabled separately from Maps JS API in your Cloud project
Vite dev server URL differs	Use whatever URL Vite prints, not a hardcoded port
Adding a family breaks layout	Give the new family a unique `color` and `id`; check that any hardcoded `familyId` references in `App.jsx` are generalized to `trip.families.map(...)`

palantir-for-family-trips