Ship a single-user dashboard that fuses Human Design bodygraph, daily forecast timeline, and Numerology Life Path into one page. Three RoxyAPI domains, three Lit web components, one server route. Time to ship: 60 minutes.
The Personalized Tracker is the showcase for what the RoxyAPI catalog can do in one weekend. The bodygraph is computed once per user and cached forever. The Life Path is computed once and cached forever. The forecast timeline refreshes daily. Three calls, three renders, three keys to retention: the user sees something for them, every day, that is grounded in their birth data.
date, time, name, and city (you geocode the city in Step 1).npm install @roxyapi/sdkpip install roxy-sdkcomposer require roxyapi/sdkThe render layer uses @roxyapi/ui Lit web components from a CDN, no install required.
A standalone reference project can live in its own repository (create it yourself, the tutorial does not bootstrap it). Recommended shape:
personalized-tracker/
├── app/
│ ├── api/
│ │ ├── tracker/route.ts # server route: fetches all three calls, returns combined payload
│ │ └── location/route.ts # server route: proxies /location/search
│ ├── page.tsx # the dashboard
│ └── layout.tsx
├── lib/
│ └── cache.ts # cache helpers (you choose: Redis, SQLite, KV)
└── .env.local # ROXY_API_KEY=...Next.js 16, TypeScript, Tailwind. Substitute your stack of choice.
Convert the user free-text city to lat/lng/timezone via searchCities. Persist with the user record.
import { createRoxy } from '@roxyapi/sdk';
const roxy = createRoxy(process.env.ROXY_API_KEY!);
const { data: loc, error: locError } = await roxy.location.searchCities({ query: { q: 'New York' } });
if (locError) throw locError;
const city = loc.cities[0];
// { city: "New York", country, iso2, latitude: 40.7128, longitude: -74.006, timezone: "America/New_York", utcOffset, population, province }Save { latitude, longitude, timezone } to the user row. Never re-geocode unless the user edits their city.
Birth data is immutable, so call generateBodygraph once per user and persist the result. The user type, authority, profile, defined centers, channels, and gates never change.
async function ensureBodygraph(userId: string, birth: {
date: string; time: string;
latitude: number; longitude: number; timezone: string;
}) {
const cached = await cache.get(`bg:${userId}`);
if (cached) return cached;
const { data: bg, error: bgError } = await roxy.humanDesign.generateBodygraph({ body: birth });
if (bgError) throw bgError;
await cache.set(`bg:${userId}`, bg); // forever
return bg;
}Verified operationId: generateBodygraph.
calculateLifePath takes the integer year, month, day. The Life Path number and meaning are deterministic and immutable. One call, ever.
async function ensureLifePath(userId: string, year: number, month: number, day: number) {
const cached = await cache.get(`lp:${userId}`);
if (cached) return cached;
const { data: lp, error: lpError } = await roxy.numerology.calculateLifePath({
body: { year, month, day },
});
if (lpError) throw lpError;
await cache.set(`lp:${userId}`, lp);
return lp;
}Verified operationId: calculateLifePath. Response shape: { number, type, meaning, calculation, hasKarmicDebt, karmicDebtNumber, karmicDebtMeaning }.
generateTimeline accepts birthData, startDate, endDate and returns every significant event in that window across Western transits, Vedic dasha, and biorhythm. Refresh per user per day. A 6-hour cache TTL is comfortable.
async function todayForecast(userId: string, birthData: {
date: string; time: string; timezone: string;
}) {
const today = new Date().toISOString().slice(0, 10);
const cached = await cache.get(`fc:${userId}:${today}`);
if (cached) return cached;
const { data: timeline, error: timelineError } = await roxy.forecast.generateTimeline({
body: {
birthData,
startDate: today,
endDate: new Date(Date.now() + 7 * 24 * 3600 * 1000).toISOString().slice(0, 10),
},
});
if (timelineError) throw timelineError;
await cache.set(`fc:${userId}:${today}`, timeline, { ttl: 6 * 3600 });
return timeline;
}Verified operationId: generateTimeline. Response: { birthData, startDate, endDate, count, events[] } with each event carrying date, datetime, domain, type, description, significance.
The server route fans out three calls (two cached forever, one daily) and returns a combined payload. The client renders it. Use Drizzle, raw SQL, KV, whatever, the shape is what matters.
// app/api/tracker/route.ts (Next.js App Router)
import { NextResponse } from 'next/server';
import { createRoxy } from '@roxyapi/sdk';
const roxy = createRoxy(process.env.ROXY_API_KEY!);
export async function GET(req: Request) {
const { searchParams } = new URL(req.url);
const userId = searchParams.get('userId')!;
const user = await db.users.findById(userId); // your DB
const birthData = {
date: user.birthDate,
time: user.birthTime,
timezone: user.timezone,
};
const birthWithLocation = {
...birthData,
latitude: user.latitude,
longitude: user.longitude,
};
const [bodygraph, lifePath, forecast] = await Promise.all([
ensureBodygraph(userId, birthWithLocation),
ensureLifePath(userId, user.birthYear, user.birthMonth, user.birthDay),
todayForecast(userId, birthData),
]);
return NextResponse.json({ bodygraph, lifePath, forecast });
}Three calls, parallelized via Promise.all. The first two return from cache after the first request per user.
Three <roxy-*> Lit web components on one page. Pass the SDK responses as data props.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Daily Tracker</title>
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@1/dist/cdn/roxy-ui.js" defer></script>
<style>
body { font-family: system-ui, sans-serif; max-width: 900px; margin: 0 auto; padding: 24px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<h1>Your daily tracker</h1>
<section>
<h2>Your Human Design</h2>
<roxy-bodygraph id="bg"></roxy-bodygraph>
</section>
<div class="grid">
<section>
<h2>Your Life Path</h2>
<roxy-numerology-card id="lp" type="life-path"></roxy-numerology-card>
</section>
<section>
<h2>This week</h2>
<roxy-forecast-timeline id="fc"></roxy-forecast-timeline>
</section>
</div>
<script type="module">
const res = await fetch('/api/tracker?userId=' + currentUserId);
const { bodygraph, lifePath, forecast } = await res.json();
document.getElementById('bg').data = bodygraph;
document.getElementById('lp').data = lifePath;
document.getElementById('fc').data = forecast;
</script>
</body>
</html>All three component tags (roxy-bodygraph, roxy-numerology-card, roxy-forecast-timeline) are exported by @roxyapi/ui. Theme via the --roxy-* design tokens (--roxy-accent, --roxy-bg, --roxy-fg), see the UI components page.
For a browser-side variant that skips the server route entirely, use a publishable key (pk_live_* / pk_test_*, origin-restricted) and call the SDK from a <script type="module">. The cache layer moves to localStorage or IndexedDB.
ROXY_API_KEY to the env. Free tier handles hundreds of users.There is no dedicated personalized-tracker template yet. The closest reference integrations:
birthData is nested inside the forecast request. { birthData: { date, time, timezone, ... } }. Easy to flatten by mistake.{ year, month, day } integers, not a date string. Splitting 1990-07-15 into 3 ints is the convention. The endpoint also accepts other numerology inputs for the other endpoints in the domain (Expression, Soul Urge, etc.); see the numerology guide.@roxyapi/ui@1) in production so a CDN update never surprises you.Hi, I am Rosie, your guide to the RoxyAPI insight tools.
Ask me to read your birth chart, pull a card, or map your numbers, and I will interpret what it means for you. Unlike most AIs, I never make the numbers up: every reading runs on real, verified calculations. Curious about the API, pricing, or docs instead? Ask me that too.