Spendr

Overview

Spendr is a feature-rich personal finance tracker I built during the 24-hour HACK.BS hackathon. The app helps users manage their finances with an intuitive interface, comprehensive tracking features, and insightful visualizations—all wrapped in a sleek, modern design.

The Challenge

When the hackathon began, the organizers assigned "expense tracker" as the project theme. With just 24 hours to design and build a complete mobile application around this assigned topic, I needed to quickly develop a solution that would stand out. The goal was to create a fully-functional app that would offer genuine value to users while demonstrating my technical skills.

Development Process

While the hackathon rules allowed working solo, they permitted the use of AI tools. I leveraged Claude Pro with Projects to help with organization, documentation, and fast feature implementation. This proved invaluable for rapidly prototyping components and solving complex problems efficiently.

Despite this assistance, the 24-hour constraint presented significant challenges. I encountered numerous issues including TypeScript errors, hallucinated non-existent functions, and serious architectural problems that required creative solutions. The intensity of building a complex app with multiple interconnected features in such a short timeframe would have been nearly impossible for a novice developer.

Features ✨

Core Functionality 💼

• Expense & Income Tracking: Record and categorize financial transactions
• Budget Management: Set monthly budgets with visual progress indicators
• Recurring Transactions: Schedule automatic transactions with various recurrence patterns
• Category Management: Create, edit, and organize custom expense categories
• Period Navigation: Easily review finances across different time periods

Data Visualization 📊

• Pie Charts: Visualize spending distribution across categories
• Line Charts: Track spending trends over time
• Financial Reports: Generate detailed financial reports with spending analytics

Technical Highlights 🛠️

• Biometric Security: Face ID/Fingerprint protection for financial data
• Multi-Currency Support: Track finances in various currencies including Bitcoin
• Data Import/Export: Backup and restore financial data
• Notification System: Reminders for upcoming recurring transactions
• Offline-First Architecture: Full functionality without internet connection
• SQLite Database: Efficient local data storage with complex queries

Tech Stack 💻

• React Native: Cross-platform mobile development
• Expo: Development workflow and native APIs
• TypeScript: Type-safe code for better reliability
• SQLite: Local database for persistent storage
• React Context API: State management across components
• Recharts: Data visualization
• Biometric Authentication: Secure app access

Design & Implementation Highlights

Dark Mode UI

I designed the app with a sleek dark mode interface to reduce eye strain and create a premium feel. The color scheme features vibrant accent colors against dark backgrounds for optimal readability and visual hierarchy.

Modular Architecture

The codebase follows a clean, modular architecture with:

• Context providers for state management
• Custom hooks for shared functionality
• Utility functions for common operations
• Reusable components for UI consistency

Database Design

The app uses a carefully designed SQLite schema with three primary tables:

• transactions: Records all financial transactions
• categories: Stores customizable expense categories
• recurring_transactions: Manages scheduled recurring expenses/income

Performance Optimization

The app implements several performance optimizations:

• Memoized components to prevent unnecessary re-renders
• Efficient list rendering with FlatList
• Asynchronous database operations
• Lazy loading of chart components

Learning Outcomes 🧠

This hackathon project helped me deepen my understanding of:

• Fast-paced software development in time-constrained environments
• Building complex state management systems in React Native
• Working with local databases for offline-first applications
• Implementing secure authentication flows
• Creating intuitive data visualizations

Conclusion 🏆

Spendr demonstrates my ability to conceive, design, and build a complex mobile application under tight time constraints. It showcases my skills in React Native development, database design, state management, and creating intuitive user experiences.

The hackathon format pushed me to prioritize features, make quick technical decisions, and focus on delivering core functionality—valuable skills that translate directly to real-world development environments.