Mobile app expense tracker

Tech Stack

• Framework: Expo + React Native 0.76.9
• Language: TypeScript 5.x
• Routing: Expo Router (file-based)
• State Management: React Context (ThemeContext)
• Storage: localStorage (web) / AsyncStorage (native-ready)
• Testing: Jest + jest-expo preset
• Linting: ESLint with TypeScript plugin
• UI Components: React Native core + Expo Linear Gradient
• Safe Area: react-native-safe-area-context

Setup & Usage

Prerequisites

• Node.js 18+ (LTS recommended)
• npm 9+
• Expo CLI (installed automatically via npx)
• Optional: Expo Go app on iOS or Android device

Installation

# Install dependencies
npm install

# Start the Expo development server
npm start

Then press:

• w to open in your web browser
• Scan the QR code with Expo Go on iOS or Android

Available Scripts

Running on Different Platforms

Web (Browser)

npm run build
npx serve dist

iOS / Android (via Expo Go)

npm start
# Scan QR code with Expo Go app

iOS Simulator / Android Emulator

npx expo run:ios
npx expo run:android

Project Structure

├── app/                          # Expo Router file-based routes
│   ├── (tabs)/                   # Bottom tab navigation screens
│   │   ├── index.tsx             # Dashboard
│   │   ├── transactions.tsx      # Transactions list
│   │   ├── analytics.tsx         # Analytics & charts
│   │   ├── settings.tsx          # Settings
│   │   └── _layout.tsx           # Tab bar layout
│   ├── login.tsx                 # Login screen
│   ├── signup.tsx                # Signup screen
│   ├── add-transaction.tsx       # Add transaction form
│   ├── transaction-detail.tsx    # Transaction detail view
│   ├── index.tsx                 # Splash/entry screen
│   └── _layout.tsx               # Root layout with auth init
├── src/
│   ├── components/               # Reusable UI components
│   ├── screens/                  # Screen-level components
│   ├── storage/                  # localStorage persistence layer
│   ├── context/                  # React Context (ThemeContext)
│   ├── charts/                   # Chart/analytics components
│   ├── constants/                # Theme colors & constants
│   └── __tests__/                # Storage & adapter tests
├── lib/
│   ├── formatCurrency.ts         # Currency formatting utilities
│   └── storageAdapter.ts         # localStorage abstraction
├── __tests__/                    # Root-level Jest tests
│   ├── smoke.test.ts
│   └── formatCurrency.test.ts
├── jest.config.js
├── jest.setup.js
├── babel.config.js
├── tsconfig.json
├── eslint.config.js
└── app.json

Testing

npm test

The test suite uses Jest with the jest-expo preset. Coverage includes:

• Currency formatting utilities (formatCurrency, parseCurrency, calcRemaining)
• Transaction storage CRUD operations
• Auth storage (login/logout/session management)
• Storage adapter (localStorage abstraction)

Run with coverage report:

npm test -- --coverage

Storage & Native Platform Note

This app currently uses localStorage (browser API) for data persistence. On native iOS/Android devices (via Expo Go or bare build), localStorage is not available — data will not persist between sessions.

To support native persistence, the storage layer can be updated to use AsyncStorage from @react-native-async-storage/async-storage (already included in dependencies). The storageAdapter module (src/lib/storageAdapter.ts) is the single integration point where a Platform.OS check can add AsyncStorage fallback.

Known Limitations

• Web-first design: Targets Expo Web export. Native device features (camera, GPS, push notifications) are not implemented.
• Local storage only: All data persists in localStorage (browser). No backend or cloud sync.
• Client-side auth: Login/signup are client-side only; credentials stored locally.
• No real-time data: Transactions and budgets are static until manually added/edited by the user.
• Native persistence gap: Data does not persist on native iOS/Android without AsyncStorage integration.

Verification Status

✅ TypeScript: Zero type errors (verified with tsc --noEmit)
✅ Web Export: Successfully exports to dist/ with all routes
✅ Tests: Jest suite with smoke tests and utility coverage
✅ Linting: ESLint passes with no warnings
✅ npm audit: No medium/high vulnerabilities at audit level

License

Tetrees License

Mobile App Templates & App Source Code

$3