Krabby

Personal Finance Tracker
A private, offline-first mobile app to log, track, and analyse your daily expenses. Built with Expo + React Native.

Features • Tech Stack • Getting Started • Development Build • Building with EAS • Project Structure • Privacy • License

---

Features

• Expense logging — Quickly log transactions with name, amount, category, and currency via a bottom-sheet form.
• Dashboard — At-a-glance view of total expenses, average per day, spending streak, and recent activity.
• Transaction logs — Scrollable, grouped history with month headers and inline editing.
• Analytics — Daily, weekly, and monthly charts powered by react-native-gifted-charts, plus category breakdowns and summary averages.
• Categories — 8 seeded categories (with deterministic colour palette) plus custom user-created categories.
• Multi-currency — Preset currencies with a configurable default; symbols displayed throughout the UI.
• Streak tracking — Tracks consecutive days of logging to build habits.
• CSV import/export — Backup and restore your data via CSV files using expo-document-picker and expo-sharing.
• Multiple themes — 5 colour themes: light (space-summer), dark (space-dark-summer), space-red, alien-green, and space-cadet (see palettes).
• Offline-first — All data stored locally on-device with SQLite. No network required.
• Onboarding flow — Guided first-run experience with a walkthrough screens.

Themes

Krabby ships with 5 colour themes. Each theme defines a consistent set of semantic tokens mapped to HeroUI Native components.

Space Summer (light) — @variant light

Token	Value
Background	#fffae6
Foreground	#7b4019
Surface	#ffbf78
Accent	#ff7d29
Accent fg	#ffffff
Muted	oklch mix #7b4019 / #fffae6 @ 55/45
Field border	oklch mix #7b4019 28% transparent

Space Dark Summer (dark) — @variant dark

Token	Value
Background	#251910
Foreground	#fffae6
Surface	oklch(28% 0.05 55)
Accent	#ff7d29
Accent fg	#1a0f0a
Focus / Link	#ffbf78

Space Red — @variant space-red

Token	Value
Background	#1a0505
Foreground	#f6efd2
Surface	oklch(18% 0.06 15)
Accent	#e24040
Accent fg	#f6efd2
Focus / Link	#e24040

Alien Green — @variant alien-green

Token	Value
Background	#050e00
Foreground	#ccffcc
Surface	#0d1a00
Accent	#08cb00
Accent fg	#000000
Focus / Link	#08cb00

Space Cadet — @variant space-cadet

Token	Value
Background	#0d1030
Foreground	#e9e3df
Surface	oklch(18% 0.06 265)
Accent	#ff7a30
Accent fg	#0d1030
Focus / Link	#ff7a30

Source of truth: app/heroui-theme.css — TypeScript mirror in constants/heroui-theme.ts.

Tech Stack

Layer	Technology
Framework	Expo SDK 54
UI	React Native 0.81, Reanimated 4, Gesture Handler 2, HeroUI Native
Styling	Uniwind (Tailwind v4 for RN), CSS-based theming
Navigation	Expo Router (file-based)
Database	SQLite via expo-sqlite + Drizzle ORM
Forms	react-hook-form + zod
Charts	react-native-gifted-charts
Fonts	JetBrains Mono (@expo-google-fonts/jetbrains-mono)
Storage	All data in local SQLite; images via expo-file-system (if applicable)
TypeScript	Strict mode, path aliases @/* → ./*

Getting Started

Prerequisites

• Node.js >= 18
• Expo CLI
• iOS: Xcode (macOS only)
• Android: Android Studio

Install

npm install

Run (web)

The fastest feedback loop — no native toolchain required:

npm run web

Run (native)

npm run ios       # iOS simulator (macOS only)
npm run android   # Android emulator / connected device

These commands compile the native app, start Metro, and launch on the target device.

Run Metro only

If you already have a development build installed:

npm start

Lint

npm run lint

Development Build

This app uses native modules (e.g. expo-sqlite, react-native-gesture-handler, react-native-reanimated) that require a development build. Expo Go is sufficient for development on the web target but will not work for native device testing.

Local build (simulator, emulator, or connected device):

npm run ios      # iOS
npm run android  # Android

EAS cloud build (physical devices without a local toolchain):

eas build --platform android --profile development
eas build --platform ios --profile development

Install the resulting build on your device, then connect to Metro with npx expo start --dev-client.

Building with EAS

Build and distribute the app using EAS Build.

Prerequisites

• EAS CLI: npm install -g eas-cli
• Log in to your Expo account: eas login

Build profiles

Profile	Type	Use case
development	Dev client	Debug builds with the dev menu
preview	Internal distribution	Share with testers via QR or link
production	App store release	Production binary for submission

Build an APK (Android)

eas build --platform android --profile preview

For a development build:

eas build --platform android --profile development

For a production build:

eas build --platform android --profile production

Build for iOS

eas build --platform ios --profile preview

Note: iOS builds require an active Apple Developer account and are only available on macOS.

Submit to stores

eas submit --platform android --profile production
eas submit --platform ios --profile production

For all available options, see the EAS Build documentation.

Project Structure

krabby/
├── assets/                    # App icons, splash screen, favicon
├── app/                       # Expo Router file-based routes
│   ├── _layout.tsx            # Root layout (fonts, DB, providers, theme)
│   ├── (tabs)/
│   │   ├── _layout.tsx        # Tab navigator layout
│   │   ├── index.tsx          # Dashboard / Home tab
│   │   ├── logs.tsx           # Transaction logs tab
│   │   ├── analytics.tsx      # Charts & analytics tab
│   │   └── settings.tsx       # Settings tab
│   ├── categories.tsx         # Category management
│   ├── currencies.tsx         # Currency management
│   ├── modal.tsx              # Reusable modal screen
│   └── global.css             # Uniwind CSS entry point
├── components/                # Reusable UI components
│   ├── home/                  # Dashboard-specific components
│   ├── onboarding/            # Onboarding flow screens
│   ├── settings/              # Settings panel components
│   └── ui/                    # Generic UI primitives (Card, TagPill, etc.)
├── constants/                 # Design tokens, fonts, theme, general config
├── contexts/                  # React contexts (transactions, onboarding, theme, user-name)
├── db/
│   ├── schema.ts              # Drizzle table & relation definitions
│   ├── db.ts                  # DB singleton (expo-sqlite)
│   ├── migrate-once.ts        # One-time migration guard
│   └── seeders/               # Database seeding (categories, currencies)
├── drizzle/                   # Drizzle Kit migration output
├── hooks/                     # Custom hooks (fonts, color-scheme, theme, currencies)
├── lib/                       # Library config (default font, etc.)
├── repository/                # Data access layer (raw DB queries)
├── schemas/                   # Zod schemas for CRUD validation
├── services/                  # Business logic / validation orchestration
├── types/                     # Shared TypeScript types
├── utils/                     # Utility functions (formatting, analytics, colours)
├── validation/                # Form-level Zod schemas (e.g. transaction form)
├── app.json                   # Expo configuration
├── eas.json                   # EAS Build profiles
├── drizzle.config.ts          # Drizzle Kit config
├── metro.config.js            # Metro bundler config
└── package.json

Privacy

Krabby is built as an offline-first application.

• All financial data is stored exclusively on your device via SQLite.
• Nothing is ever sent to any server, API, or third party.
• No accounts, no telemetry, no tracking.

License

MIT