💵 Expense Tracker — React Native

A modern, polished expense and income tracking app built with React Native, Expo, and TypeScript.

Designed with an iOS-first approach, the app focuses on a clean dark interface, glassmorphism, smooth animations, and a simple transaction-management experience.

🎥 Demo

Watch the full app demo

✨ Features

• 💸 Track expenses and income
• 📊 Dashboard with financial overview
• 🧾 Complete transaction history
• 🔎 Search transactions
• 🏷️ Filter transactions by income or expense
• 🗂️ Categorized transactions
• ➕ Add and edit transactions
• 📅 Date selection for transactions
• 💾 Persistent local storage
• 🎨 Dark, modern UI
• 🪟 iOS-style glassmorphism
• ✨ Smooth UI animations and interactions
• 📱 iOS-focused experience

🛠️ Tech Stack

• React Native
• Expo
• TypeScript
• Expo Router
• React Native Reanimated
• Expo Glass Effect
• Expo Blur
• Expo Linear Gradient
• AsyncStorage
• React Native Vector Icons

📱 Screens

The application currently includes:

• Dashboard
• Add Transaction
• Transaction History
• Settings UI

The Settings screen is currently presented as a UI-only screen and is intentionally kept simple for the current version.

🎨 Design

The application follows a dark iOS-inspired visual style with:

• Glassmorphism components
• Purple accent colors
• Rounded cards and controls
• Subtle borders and shadows
• Smooth scale and spring interactions
• Animated transaction amount digits
• Animated income/expense selection
• Floating blurred headers
• Custom floating tab navigation

The goal was to keep the interface visually polished while maintaining a straightforward user experience.

🗃️ Data Storage

Transactions are stored locally using AsyncStorage, allowing data to persist between application sessions without requiring a backend.

Each transaction contains:

• Transaction type
• Amount
• Category
• Note
• Date
• Unique ID

🚀 Getting Started

1. Clone the repository

git clone https://github.com/astralvoidd/expense-tracker-expo.git

2. Navigate into the project

cd expense-tracker-expo

3. Install dependencies

npm install

4. Start the Expo development server

npx expo start

Then open the project using an available Expo development environment.

📂 Project Structure

expense-tracker-expo/
├── src/
│   ├── app/
│   ├── components/
│   ├── constants/
│   ├── types/
│   └── utils/
├── app.config.ts
├── app.json
├── index.ts
├── package.json
├── tsconfig.json
└── README.md

🎯 Project Goals

This project was built to practice and demonstrate:

• React Native UI development
• TypeScript architecture
• Expo Router navigation
• Reanimated animations
• Local data persistence
• Component-based architecture
• iOS-focused UI design
• Building polished mobile interfaces from scratch

📌 Project Status

Completed ✅

The current version focuses on the core expense-tracking experience and polished UI.

Additional functionality can be added in future versions if needed.

👨‍💻 Author

Built by AstralVoidd

GitHub: https://github.com/astralvoidd

---

⭐ If you found this project interesting, consider giving the repository a star.