Build a Local-First Finance app with Expo & WatermelonDB
notJust․dev notJust․dev
110K subscribers
24,266 views
0

 Published On Streamed live on Apr 19, 2024

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: https://www.youtube.com/live/NVR_O2v4ir8

✅ Project Page: https://www.notjust.dev/projects/fina...
💻 Source Code: https://github.com/notJust-dev/Profit...

❗Try our FREE 2-day Masterclass on notJust.Academy: https://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:
https://academy.notjust.dev/?utm_sour...

💡 Have an idea for a future tutorial? Share it on our Idea Board: https://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

show more

Share/Embed