Build an Expense Tracker App in SwiftUI - full course

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

🪄 Join this channel to watch the entire course on YouTube

🎦 Watch the complete Build Quick Apps with SwiftUI full course

[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

[michamichalik]

This is one of the best SwiftUI contents I've seen on youtube. Thank you!!

[koberubirosa]

1:20:07 To turn off the shadow add "showShadow: false" in the CardView...For example -> CardView(showShadow: false)

[trishoolpanigautam]

Thank you SO much for this video :) it really helped me out!

[ntissa]

Thanks for the example it was very instructive.

[hn]

Great video … thanks for recording and also for sharing ;-)

[Faiiivourful]

Hi DesignCode, is there any courses about buliding a booking app, like making reservations for classes? Thank you !!

[dotnetdevni]

Your videos are great quality I have seen many tutors and code videos over 20 years and your stuff is very clear the only thing I would ask is if could talk a bit slower the commentary is very fast at times.

[dosomethingintrersting]

I'm writing it myselft....Really great tutorial..😃

[Ali-npnn]

How can I copy some ready codes like at 52.12? Source file link asks for money and I can't find github source anywhere.

[TuningAnApple]

Where in this video does she talk about the API she uses to add transactions automatically? I cant find it in chapter list.

[tomasvivas]

Could you do the tutorial on how to add it directly from the app?

[dotnetdevni]

Query is it better to use arrays all the time when it comes to swift ui I am coming form a c# background.

[jacobodi]

Can you buy the designs to create the apps? Greetings and thanks for the videos.

[yavuzselimguner]

min 56 When the write the code ContentView page in RecentTransactionList(). The app will be crush. Can you help me?

[Pogodindenis]

I have an error "Type of expression is ambiguous without more context. Did have the same problem?

[mahmoudzinji]

Where is the code for Category Extenion at min 52:11 ???

[VasanthRamachandran]

Where is the screen to input data? Is it available in Full version?

[michaelfu]

46:24, why do you need to push the previewdata to transactionListVM, it is a different set of data stored in a local file.

[corneliusisaac]

Hi Dara, amazing instructions so far. However, I could not load the JSON file in the transaction list model. Please how can I fix it? Thanks so much in advance

[nils]

I was able to remove the shadow around the CardView at the chart by passing showShadow: false into the constructor of the ChartView