Skip to content

README.md

Latest commit

 

History

History
155 lines (111 loc) · 3.46 KB

README.md

File metadata and controls

155 lines (111 loc) · 3.46 KB
Raw

💵 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.