Making Cents of Personal Finance

Join the Waitlist

Problem

Most finance tools focus on past spending and fail to provide an accurate, real-time view of a user’s actual liquidity.

Solution

Build a performance-optimized platform that automates obligation tracking across dynamic horizons to deliver instant financial clarity.

Problem

Computational inaccuracies in financial software can compound over time, eroding user trust in the reliability of long-term projections.

Solution

Formulate a "Decimal Integrity" model using exact numeric types and database constraints to ensure 100% mathematical precision.

Problem

Managing dense financial data often results in slow, cluttered interfaces that sacrifice technical performance for visual polish.

Solution

Engineer a performant, dark-mode-first dashboard using zero-runtime CSS-in-JS to deliver a refined and accessible user experience.

The Power of Micro-Interactions

In an app like Rhyme, polish isn't just "eye candy"—it’s how you build a relationship with the user. When someone is looking at their "Free-to-Spend" capital, they need to feel like the ground beneath them is solid. A toggle that just "pops" feels like an afterthought. But a toggle that has a deliberate, sequenced animation? That tells the user the system is actually thinking.

It’s about communicating stability. If the UI feels flimsy, users start to second-guess the "Decimal Integrity" of the math behind it. By obsessing over the physics of a shake-on-error or the drawing of a checkmark, I’m proving that the entire platform is built with the same level of architectural rigor—from the micro-interactions down to the database triggers.

import { clsx } from "clsx"
import { motion } from "motion/react"

import { type Status } from "@/ui"

import * as Styled from "./Toggle.styled"

export type Toggle = {
  checked: boolean
  disabled?: boolean
  id: string
  label: string
  status: Status
  onChange: (checked: boolean) => void
}

const Toggle = ({
  checked,
  disabled = false,
  id,
  label,
  status,
  onChange,
}: Toggle): React.ReactElement => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.checked)
  }

  const classes = clsx({
    [status]: true,
    disabled,
  })

  return (
    <Styled.Toggle aria-label={label} className={classes} htmlFor={id}>
      <input
        checked={checked}
        disabled={disabled}
        id={id}
        name={id}
        type="checkbox"
        onChange={handleChange}
      />
      <motion.div
        animate={
          status === "error" ? { x: [-3, 3, -3, 3, -1, 1, 0] } : { x: 0 }
        }
        className="track"
        transition={{ duration: 0.3 }}
      >
        <svg
          className="indicator-icon"
          fill="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M12 … 20.4375Z" />
          <motion.path
            animate={{
              opacity: checked ? 1 : 0,
              pathLength: checked ? 1 : 0,
            }}
            d="M 8 13 L 10.5 15.5 L 16 9.5"
            fill="none"
            initial={false}
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            transition={{
              opacity: { delay: checked ? 0 : 0.2, duration: 0 },
              pathLength: { duration: 0.2, ease: "easeOut" },
            }}
          />
        </svg>
      </motion.div>
    </Styled.Toggle>
  )
}

export default Toggle

Tech Stack

Supabase: The infrastructure for the relational database and automated financial triggers
Plaid: The API used to power the "Decimal Integrity" model and real-time cash-flow data
Next.js: The React framework used to deliver a performant, zero-latency frontend experience
Next Intl: Used to easily manage our custom lexicon throughout the application
Linaria: The zero-runtime CSS-in-JS library for a high-fidelity and accessible design system
Grammar Style: My FOSS design token engine for managing and syncing styles across the platform
Figma: The environment where I architected the visual identity, app UI components, and prototypes

Case Studies