What is Nihon Funds?

My girlfriend and I are planning a trip to Japan, and like most couples we needed a way to track our savings together. Spreadsheets felt too corporate and banking apps don't really do shared goals well. So I built Nihon Funds, a private mobile PWA where we can both log our contributions and watch the total grow in rupiah and yen.

It's pinned to our home screens like a native app. We each have a 6-digit PIN to log in, add funds by week or month, and scroll through a shared history feed to see who contributed what. The dashboard shows a running total that combines our savings with a base bank balance, then converts everything to yen using live exchange rates.

How I Built It

The stack is Next.js 16 with the App Router, MongoDB via Mongoose, and JWT for auth. I used DaisyUI components on top of Tailwind CSS v4 for a clean mobile look, and Motion (not Framer Motion, the standalone library) for all the transitions and micro-interactions. The whole thing runs on my homelab through Coolify on Proxmox.

The authentication is a PIN pad with 6-digit code entry. Since it's just two users, the login endpoint hashes the PIN with bcryptjs and checks against all user records in parallel instead of maintaining a username/password flow. On a wrong PIN the dots shake and reset. A valid login sets a 30-day httpOnly JWT cookie so we stay logged in across PWA sessions.

The exchange rate logic is where I spent the most time. The free tier APIs I use have rate limits, so I built a rolling cache in MongoDB. It uses a 10-minute throttle rule: if the cached rate data is still current for this hour, serve it immediately. If the data is stale but we already tried fetching less than 10 minutes ago, serve the stale data as fallback to avoid spamming the API. Only when both conditions fail do we make a fresh API call. The system also tracks all-time high and low rates per currency pair in a separate collection for a mini stats card on the dashboard.

// The cache evaluator, gates API calls behind a freshness check + 10-minute throttle
if (cached) {
  const currentUTCHour = new Date().getUTCHours();
  const apiDataHour = new Date(cached.timeLastUpdate).getUTCHours();
  const isDataFresh = apiDataHour === currentUTCHour;
  const recentlyAttempted = cached.fetchedAt > tenMinutesAgo;

  if (isDataFresh) {
    return { conversion_rate: cached.rate, /* ... */ fallback: false };
  }
  if (recentlyAttempted) {
    return { conversion_rate: cached.rate, /* ... */ fallback: true };
  }
}
// Only reaches the API call if data is stale AND throttle window expired

The dashboard also has pull-to-refresh with a custom gesture implementation using touch events and Motion animations. The privacy eye toggle hides all amounts across the page with a single tap, which is useful when opening the app in public. The savings history is grouped by month with collapsible sections and cursor-based pagination.

What I Learned

This was my first real PWA and my first time self-hosting on Coolify. Getting the safe area insets right for notched iPhones was fiddly but satisfying once the app felt native. The exchange rate cache taught me the difference between data freshness and API throttle, two concerns that are easy to conflate. I also learned that DaisyUI and Tailwind v4 work well together once you stop fighting the utility-first approach and just let the classes pile up. The app is simple but genuinely useful, we open it every week to log savings and check how close we are to Japan.