Build a Local-First Finance app with Expo & WatermelonDB
21,467
Published 2024-04-19
2️⃣ Watch the second part here: youtube.com/live/NVR_O2v4ir8
✅ Project Page: www.notjust.dev/projects/finance-app
💻 Source Code: github.com/notJust-dev/ProfitFirst
❗Try our FREE 2-day Masterclass on notJust.Academy: assets.notjust.dev/masterclass/?utm_source=youtube…
📚 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/?utm_source=youtube&utm_medium…
💡 Have an idea for a future tutorial? Share it on our Idea Board: github.com/orgs/notJust-dev/discussions
💬 Join the notJust Development gang and let's build together:
Twitter: twitter.com/VadimNotJustDev
Instagram: www.instagram.com/VadimNotJustDev
Facebook: www.facebook.com/notjustdev
LinkedIn: www.linkedin.com/in/vadimsavin
Discord: discord.gg/VpURUN2
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
All Comments (14)
-
As always, amazing builds Vadim! Thanks to your videos, I was able to publish my first app on Google Play 🥳
-
Awesome, brilliant toturial
-
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!!
-
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?
-
Do have examples with Web App using WDB and sync with backend (API) server
-
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.
-
Hey would you make tutorial for production and optimization and reducing app sizes
-
красота спасибо
-
why you create project on expo not cli
-
You r awesome bro
-
Hi ilike your videos can you do e comerce app with admin dashbord(web) to control orders plss😊😊
-
Good tutorial, but your face was blocking the view
-
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.
