Build an Expense Tracker App in SwiftUI - full course
DesignCode DesignCode
293K subscribers
96,957 views
0

 Published On Mar 24, 2022

In this course, we will be building an expense tracker app. The main view features a chart that tracks this month’s spending as of date. If we drag over the chart line, we can see the history of total spending per specific day. Below, it displays the most recent five transactions that occurred. Each transaction details the merchant, category, date and amount. The amount is negative if it’s a debit or positive and colored if it’s a credit. On the left, we can see the icon associated to the category. These icons are loaded from a third party library SwiftUIFontIcon and mapped through each category. If you click on the See All link, we are redirected to the all transactions screen where they are grouped by month. This app also offers a beautiful dark mode. Beware that this app is data focused. As it is a financial app, we will be performing calculations and apply various logics to resolve the right data. Let’s get started.

🧑🏻‍💻 Full course and source files
https://designcode.io/swiftui-expense...

🪄 Join this channel to watch the entire course on YouTube
➡    / @designcodeteam  

🎦 Watch the complete Build Quick Apps with SwiftUI full course
   • Build Quick Apps with SwiftUI full co...  

🌎 Website: https://designcode.io
🐦 Twitter:   / designcodeio  
🐦 Twitter (personal):   / darato7  

[00:00:00] Intro
[00:00:41] Demo
[00:01:59] Project Set Up
[00:02:46] Color System
[00:05:03] Color Extension
[00:06:51] Content View
[00:07:37] Notification Bell Icon
[00:08:59] Title
[00:09:57] Preview Preferred Color Scheme
[00:10:39] Part 2
[00:11:07] Transaction Model
[00:12:22] Transaction Type
[00:12:54] Preview Data
[00:14:35] Transaction Row
[00:15:38] Transaction Row Preview
[00:16:19] Transaction Merchant
[00:17:08] Transaction Category
[00:17:36] Transaction Date
[00:18:36] Date Formatter
[00:20:19] Date Parsed
[00:22:07] Transaction Amount
[00:23:28] Signed Amount
[00:24:27] Transaction Category Icon
[00:25:12] SwiftUIFontIcon
[00:27:29] Part 3
[00:29:27] Fetch Transactions
[00:30:59] dataTaskPublisher
[00:31:47] tryMap
[00:33:48] Decode
[00:34:32] Receive
[00:34:50] Sink
[00:37:01] Store
[00:38:29] @StateObject
[00:39:50] Logged Data
[00:40:45] Part 4
[00:41:08] Header Title
[00:41:56] Header Link
[00:43:15] Recent Transactions Card
[00:44:15] @EnvironmentObject
[00:45:05] Recent Transaction List Preview
[00:47:30] Recent Transaction List
[00:48:43] Enumerated
[00:50:19] Category Model
[00:51:43] Category Listing
[00:52:40] Categories and SubCategories
[00:53:31] Icon Computed Property
[00:55:57] Recent Transaction List Display
[00:57:17] Part 5
[00:58:34] Transaction Month Computed Property
[00:59:10] Group Transactions By Month
[01:01:02] Transaction List
[01:02:09] Transaction List Preview
[01:03:32] Transaction Groups
[01:04:44] Transaction Month
[01:05:10] Transaction List by Month
[01:06:07] Transaction List Display
[01:07:05] Accent Color
[01:07:53] Ordered Dictionary
[01:11:33] Part 6
[01:12:01] SwiftUICharts
[01:14:08] Line Chart
[01:14:47] Demo Chart Data
[01:15:27] Chart Style
[01:16:41] Card View
[01:17:31] Chart Label
[01:18:10] Chart Background Color
[01:20:18] typealias TransactionPrefixSum
[01:21:34] Accumulate Transactions
[01:22:36] Date Interval
[01:23:57] Stride
[01:26:40] Daily Expenses
[01:27:21] Daily Total
[01:28:09] Daily Cumulative Sum
[01:29:09] Real Chart Data
[01:31:49] Round To 2 Digits
[01:33:08] Final Adjustments
[01:37:09] Conclusion

#swiftui #iosdev

show more

Share/Embed