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: kzread.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
Пікірлер: 21
As always, amazing builds Vadim! Thanks to your videos, I was able to publish my first app on Google Play 🥳
@notjustdev
28 күн бұрын
Glad to hear that
Awesome, brilliant toturial
@notjustdev
11 күн бұрын
Thank you! Cheers!
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
28 күн бұрын
Thank you! Great suggestion!
@marvinfok65
25 күн бұрын
@@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
15 күн бұрын
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
12 күн бұрын
@@notjustdev Watermelondb's sync feature is something else and the documentation is pratically useless so a tutorial would really help a lot!
You r awesome bro
@notjustdev
28 күн бұрын
Thank you so much 😁
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.
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?
Hey would you make tutorial for production and optimization and reducing app sizes
Do have examples with Web App using WDB and sync with backend (API) server
why you create project on expo not cli
красота спасибо
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
@notjustdev
28 күн бұрын
Sorry for that :/
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.