From tracking a work session to sending an invoice: a self-hostable app for freelancers and small teams.
I built Time2Pay to connect the small pieces of freelance work: customers, projects, tasks, time, and invoices. A session can be timed or entered manually, reviewed alongside the rest of a project, and included in an invoice. Milestone checklists keep the work itself visible alongside its billing.
The same application supports a local data mode and a hosted account mode. It is published at time2pay.app as an installable web app, with an anonymous tour that lets visitors explore demo data before signing in. The source is available for self-hosting. It's a simple app that was just a free solution for myself that I decided to host. The connection to Github for developers and to Mercury for anyone do give it a bit of a unique edge.
Keep time connected to the work
Time2Pay session setup and a project milestone checklist using demo data.
I organized the tracking flow around customer, project, and task selections. The session timer and manual entries feed a weekly session history, while project milestones provide a lightweight checklist for what still needs to be done. This keeps time records attached to their context instead of turning them into a separate spreadsheet.
One application, local or hosted
The tour-mode banner and demo sessions show the application before sign-in.
A shared database interface lets the app use SQLite locally or Supabase and Postgres in hosted mode. Hosted reads use user-scoped access, and writes pass through validated API routes. Tour mode uses an in-memory demo provider, so trying the app does not require creating an account.
Direct Mercury banking and invoicing integration
One-click invoice creation, client sync, and payment workflows directly through Mercury's API.
Mercury account settings and API integration in Time2Pay.
I integrated Mercury through server-side API routes to connect tracked work directly to banking and payments. Instead of re-entering billing info across separate tools, Time2Pay syncs Mercury customer contacts, displays real-time account balances alongside billing records, and generates official Mercury invoices that clients can pay in a single click. Sensitive bank credentials and tokens remain protected on the server, while an explicit review step ensures freelancers confirm destination accounts, line items, and delivery details before anything is sent.
Turn GitHub commits and pull requests into session notes
Pull commit messages and pull request titles directly into session notes and client invoices.
Connecting GitHub commits and pull requests to session notes in Time2Pay.
To eliminate the friction of manually logging work, I built a GitHub integration that maps repositories, branches, and PRs directly to client projects and tasks. When completing a work session, Time2Pay connects to GitHub's API to fetch recent commits and pull requests, allowing developers to pull commit messages and PR titles straight into their session notes—either appending or overwriting with a click. These records carry over as clickable commit SHAs and PR badges on session histories and invoice summaries, providing clients with transparent, verifiable proof of the exact code that shipped for every billed hour.
Multi-layer SVG logo and reactive status engine
An interactive SVG clock driven by React Native Reanimated that visualizes live time, session progress, and clock-in states.
The multi-layer Time2Pay animated logo displaying dynamic clock hands, dollar-fill progress, and status badges.
I engineered the Time2Pay logo as a modular, multi-layer SVG driven by React Native Reanimated, turning brand artwork into a functional status indicator. The SVG is composed of decoupled layers: clock frame and ticks, independently rotating hour and minute hands, a dollar sign with an animated clip-path, a toupee layer, and dynamic status badges. The hands continuously calculate angles to display the live current time, while the dollar sign progressively fills with an accent color based on elapsed session time. Badge overlays indicate whether the user is clocked in, on break, clocked out, or encountering an error. Playful micro-animations—such as the toupee lifting and the body squashing on clock-in, the dollar sign ejecting upward on clock-out, and landing drop sequences—give the app distinct personality while serving as functional state feedback.