Why TABI?

Most currency converters show you a number and stop there. TABI is built around what actually happens when you spend money abroad.

The mid-market rate you see on Google is the interbank rate, and no card provider passes that on to you. Mastercard, Visa, and Amex each apply their own markup before it hits your statement. TABI factors that in upfront

Beyond the rate, TABI covers what other converters don't touch at all:

• The shopping list tracks your basket while you shop, with a running total in both currencies, so there's no mental math
• A discount percentage can be applied before converting, not after, so sale prices come out correct
• A daily cash budget keeps cash spending accountable, with each purchase logged against it
• Tax-free thresholds show instantly whether a purchase qualifies for a VAT refund, and by how much
• Tapping the rate line opens an input field for a manual rate override, useful when you know the exact rate your bank is applying

No account required. No ads. No backend beyond a daily rate fetch from a free public API.

Supported Currencies

EUR is always the home currency. Conversion works in both directions: switch with one tap, and the amount stays in the field.

Each currency comes with its own color theme, correct decimal handling (JPY is integer-only), and either a tax-free calculator or an inline explanation of why the scheme doesn't apply.

Features

Real Card Network Rates

Select your card provider and TABI adjusts the conversion rate accordingly. A live ticker in the header rotates through all three providers so you can compare at a glance.

Rates are sourced from open.er-api.com and refreshed daily.

A Bank Fee button next to the card selector lets you enter an additional percentage charged by your bank: tap it, type a number, and the fee is factored into the result automatically.

Discount Presets

One-tap presets cover the most common sale formats (10%, 20%, 30%, 50%, 70%), plus a free-drag slider for anything in between. The discount is applied to the input amount before converting, so the result is always the actual price you'd pay.

Tax-Free Mode

Toggle tax-free mode on and TABI strips the VAT from the converted result, showing you the pre-tax price and whether the purchase clears the refund threshold. For countries where the scheme doesn't apply (USD, GBP), an inline explanation is shown instead of silently hiding the feature.

Shopping List

Add items to a running list as you shop. Each entry stores the foreign amount and its EUR equivalent at the current rate. The list shows a live total in both currencies. When done, save the session to history and start a fresh list.

Cash Budget Tracker

Set a cash budget in the foreign currency and tap Spend after each purchase. TABI subtracts it from your remaining balance and shows a progress bar. A Find ATM button is available when the balance runs low. Budgets are stored per currency so switching destinations doesn't reset your data.

PWA — Installable

TABI is a Progressive Web App. On iOS, a native-style prompt walks you through Share → Add to Home Screen. On Android, the standard Chrome install prompt is triggered. Once installed, the app runs without browser chrome, handles safe-area insets correctly on notched devices, and behaves like a native app.

Tech Stack

Project Structure

TABI-main/
├── client/
│   ├── index.html
│   ├── vite.config.js
│   ├── tailwind.config.js
│   ├── public/
│   │   ├── tabi-logo-horizontal.svg
│   │   ├── tabi-logo-horizontal-dark.svg
│   │   ├── tabi-icon.svg / .png
│   │   ├── logos/                        Mastercard, Visa, Amex SVGs (color + white)
│   │   └── sw.js                         Service Worker
│   └── src/
│       ├── App.tsx                        Root: dark mode, language, currency context
│       ├── contexts/
│       │   ├── CurrencyContext.tsx        Active currency + theme provider
│       │   └── LanguageContext.tsx        EN / DE language provider
│       ├── components/
│       │   ├── CurrencyConverter.tsx      Main app shell
│       │   ├── ConversionDisplay.tsx      Animated rolling number output
│       │   ├── ProviderToggle.tsx         Mastercard / Visa / Amex selector
│       │   ├── ExchangeRateDisplay.tsx    Live rate + manual override input
│       │   ├── ShoppingList.tsx           List, history, totals
│       │   ├── SettingsModal.tsx          Language + currency switcher
│       │   ├── TaxFreeInfoModal.tsx       Tax-free explainer sheet
│       │   ├── ChfSymbol.tsx              Custom SVG for the CHF symbol
│       │   ├── DarkModeToggle.tsx
│       │   ├── FlagIcon.tsx
│       │   ├── Footer.tsx
│       │   └── ui/                        shadcn/ui base components
│       └── lib/
│           ├── api.ts                     Rate fetch + localStorage cache
│           ├── currencies.ts              Currency configs, themes, tax rules
│           ├── formatter.ts               Number formatting (de-DE locale)
│           ├── storage.ts                 localStorage helpers + usePersistentState
│           └── translations.ts            EN / DE string map