Build a Local-First Finance app with Expo & WatermelonDB

In this video, we’re going to build a local-first finance app using React Native, Expo, and manage our data locally with WatermelonDB. We'll go step by step into configuring our environment, building the user interface and integrating it with a solid local first database, which will make our app fast and secure. Ready to build your Personal Finance application? Let's get started!
2️⃣ Watch the second part here: kzbin.infoNVR_O2v4ir8
✅ Project Page: www.notjust.dev/projects/fina...
💻 Source Code: github.com/notJust-dev/Profit...
❗Try our FREE 2-day Masterclass on notJust.Academy: assets.notjust.dev/masterclas...
📚 This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- Setting up the development environment with Expo
- Designing a simple user-friendly interface with React Native
- Creating and managing local databases
- Installing and configuring WatermelonDB
- Syncing data across devices with WatermelonDB
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💡 Have an idea for a future tutorial? Share it on our Idea Board: github.com/orgs/notJust-dev/d...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Intro and Project Overview
6:55 Starting with a Fresh Expo Project
13:24 Setting Up Expo Router
21:09 Implementing the Home Screen
32:36 Question: WatermelonDB vs Supabase
38:34 Building the 'Add Allocation' Screen
42:26 Integrating a Nested Stack within Tab Navigator
53:49 Designing the 'Accounts' User Interface
1:07:05 Crafting New Account User Interface
1:17:50 Installing WatermelonDB
1:28:10 Building a Custom Development Client
1:35:53 Configuring WatermelonDB
2:19:04 Observing Lists with WatermelonDB
2:42:07 Testing List Updates and Observing Account List Items
2:52:50 Adding a Delete Account Function
2:56:50 Building an Allocation Table and Creating Allocations
3:19:09 Fetching and Rendering Allocations
3:38:23 Calculating Account Distribution
3:46:40 App Demo and Future Implementations
3:58:09 Outro
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #financeapp #reactnative

[@defanjoker]

Awesome, brilliant toturial

[@notjustdev]

Thank you! Cheers!

[@mobinakhter7081]

As always, amazing builds Vadim! Thanks to your videos, I was able to publish my first app on Google Play 🥳

[@notjustdev]

Glad to hear that

[@SuperYoda7]

I would like to see how we can set up a local DB with MongoDB and then sync to Remote. Great tutorial as always, keep it up!!

[@notjustdev]

Thank you! Great suggestion!

[@marvinfok65]

@@notjustdev Yeah, that will be great! That is what many real-life apps will be. Most apps will still need to sync to the server.

[@channelnotfound403]

Isn't this covered in the Trello clone videos? Where it used RealmDB as a local first database, then he setup an account on MongoDB's website to get it synced to the cloud. Or maybe I'm completely missing something (still new to the React Native thing).

[@Protonos]

@@notjustdev Watermelondb's sync feature is something else and the documentation is pratically useless so a tutorial would really help a lot!

[@brunovercosa7119]

I think that would be greater if we could use natively SF Symbols and Material Icons instead of random iconsets libraries. Can we do that?

[@derekprieur5258]

Hello vadim! Hope at some point you can do a tutorial on how to connect a react native application to a pre-existing Mongo database. I was able to follow the Trello clone and get quite far with the Realm configurations but just having a very difficult time setting up the sync service and providers.

[@edge0601]

Hey would you make tutorial for production and optimization and reducing app sizes

[@user-wi7hl3qw9e]

Do have examples with Web App using WDB and sync with backend (API) server

[@finestford007]

You r awesome bro

[@notjustdev]

Thank you so much 😁

[@devendrayadav5683]

why you create project on expo not cli

[@user-gf1il7dv2c]

красота спасибо

[@saamix144]

Hi ilike your videos can you do e comerce app with admin dashbord(web) to control orders plss😊😊

[@HueyMataruse]

Good tutorial, but your face was blocking the view

[@notjustdev]

Sorry for that :/

[@marvinfok65]

I followed step by step & it still totally screwed up! Think this kind of adhoc changing lessons is very confusing & the lesson is stretched from maybe in 1 hour to 3 & it is very frustrating! I must still appreciate what Vadim did as there is too little lessons on Watermelondb.