Welcome to the Unspent App build in public. This repository documents the development journey and major updates as they happen.
- React Native
- Ignite: React Native + Expo boilerplate
- WatermelonDB: local database + sync
- Supabase: authentication and data persistence
Zustand
Next Steps:
- Internationalization (i18n): Replace hardcoded text with dynamic translation keys to support multiple languages
- persist session data with watermelondb (WIP)
- rethink git branch management
-
Implement the app basic logic and local storage for temporary persistence -
Polish the expense input screen -
Implement the home screen (expenses list view)
- Just squashed some bugs 🐛 and conquered Typescript's tricky terrain
- Watermelon DB is now fully operational, with user sessions encrypted and decrypted like a secret agent's diary! 🕵️♀️
- We've implemented the full transaction lifecycle - saving, updating, and deleting on WMdb.
- Android emulator debugging? Total nightmare 😭 After two days of digital detective work, Android Studio App Inspector emerged as our debugging superhero. 🦸♂️
-
Bumped Expo to v52 and cleaned up all deps 📦
-
Finally got WatermelonDB up and running 🎉 I must say, this was quite a journey! This task took several days due to unclear documentation and complex setup requirements
-
Dropped Zustand from the codebase ⚡️ Plot twist: turns out WatermelonDB's observables are all we need for state management. It handles re-renders like a boss when props update. Kinda sad to let Zustand go (was hyped to try it), but hey - saving it for the web app (spoiler? 👀)
-
Shipped auth flow with Supabase 🔐 Got basic signin/signup screens working. They're pretty barebones right now and need some UI love, but the core functionality is solid
-
Last but not least, decided to spice up these build-in-public updates with a more fun tone - as you can probably tell from this post! 🎨 No more dry tech updates, let's keep it real and enjoyable!
Added home screen functionality with categorized expense tracking. The current implementation includes a progress bar showing each category's percentage of total expenses. In future updates, this will be updated to display spending against allocated category budgets. While the basic functionality is in place, the UI/UX will be further refined.
Note. The screenshots show dummy data for demonstration purposes.
Added hard coded category tabs (and logic to select a category) in Add new expense modal and implemented the state management logic with Zustand. I also optimize the flow for adding a new expense as I want the user to perform as little effort as possible in this action.
Added date picker to the Add new expense modal thanks to react-native-calendars module.
Completed initial project setup using Ignite boilerplate, chosen to accelerate development despite being new to React Native and mobile development.
Key modifications to the boilerplate:
- Migrated from MobX to Zustand for state management
- Added WatermelonDB for local-first data management
- Attempted Nativewind integration (reverted to Ignite's theming system due to compatibility issues)
Achievements:
- Created the core expense input modal, which will be the primary interface for adding expenses (and future income entries)
- Gained foundational knowledge in React Native and mobile development
Next Steps:
- Polish the expense input screen
- Implement the home screen (expenses list view)