1 Introduction
2 Getting Started
3 Layout, Pages & Navigation
4 Entries Page Design
5 Add Entry
6 Swipe to Delete Entry
7 Pinia - Setup Store
8 Child Components
9 Edit Name & Amount
10 Mark as Paid
11 Sort Entries
12 Use Directives & Transitions to Improve the Experience
13 Settings Page
-
Create a Settings Store (2:24)
-
Prompt to Delete Toggle (5:05)
-
Make the Delete Prompt Optional (3:59)
-
Show Running Balance - Setting & Styles (6:23)
-
Show Running Balance - Getter (6:43)
-
Show Running Balance - Fix Style Issues (4:37)
-
Change Currency Symbol (3:23)
-
Update useCurrencify Composable (1:41)
-
Download Source Code
14 Dark Mode
15 LocalStorage - Save our Data
16 Platforms - Web
17 Platforms - Mac (Electron)
-
Add the Mac Platform (3:07)
-
Electron Main Process file & Tidying Up (5:00)
-
Customize Browser Window Settings (2:49)
-
Make Menu Customizable with a Menu Template (3:01)
-
Put Menu Template into Separate File (2:30)
-
Menu - Add a Settings Option (4:56)
-
Use Context Bridge & ipcRenderer to listen to Settings Option (7:33)
-
Add a Settings Keyboard Shortcut (1:20)
-
Add a Quit Button (only for Electron) (7:10)
-
Listen for Quit Event and Quit the App (4:29)
-
Removing App Data (LocalStorage etc) (1:23)
-
Generate App Icon with Icon Genie (0:51)
-
Build for Production (2:43)
-
Download Source Code
18 Platforms - Windows (Electron)
19 Platforms - iOS (Capacitor)
-
Install Xcode (2:58)
-
Launch app on iOS Simulator for Development (1:26)
-
src-capacitor folder (1:12)
-
Inspect with Safari & Fix Transparent Balance (2:34)
-
Fix Header Title & Add Entry Form (4:37)
-
Add Entry Form - Amount Validation (5:40)
-
Entry - Amount Amount Validation (2:16)
-
Disable Auto Focus on Capacitor & Fix Validation (4:17)
-
Directive - Auto Focus - delay the autofocus on Capacitor (3:56)
-
Capacitor Plugin - Dialog - Show Native Dialog (5:12)
-
Dialog Plugin - Customize the Dialog (6:14)
-
Generate Icons & Splash Screens with IconGenie (1:37)
-
Install the Splash Screen Plugin (4:41)
-
Launch on Different Device Simulators (1:25)
-
Develop on a Real iOS Device (2:52)
-
Build for Production (2:37)
-
Download Source Code
20 Platforms - Android (Capacitor)
-
Install Android Studio & SDK (0:52)
-
Add Android to your Path (1:24)
-
Setup Virtual Device (2:01)
-
Launch on Android Simulator (2:26)
-
Fix Status & Navigation Bar Color (6:21)
-
Debug with Chrome Inspect (0:40)
-
Generate your Android Icon & Splash Screen with Icon Genie (1:20)
-
Launch on Real Android Device (2:20)
-
Build the App for Production (1:20)
-
Download Source Code
21 Course Round Up
