Day 1: Building a Holiday Budget Tracker with Svelte 5 💸

The App: Budget Tracker ## Key Features 🌟 ## Under the Hood: Svelte 5 Runes 🛠️ ## 1. Form State with $state ## 2. Auto-Backup with $effect ## Holiday Use Case 🎅 Welcome to Day 1 of the "12 Days of Svelte Apps" challenge! 🎄 Over the next 12 days, we're exploring a collection of mini-apps built with Svelte 5 and SvelteKit. Whether you're a seasoned developer or just curious about the new Svelte 5 Runes syntax, this series will showcase practical examples of modern web development. Today, we're tackling a problem we all face in December: Holiday Spending. The Budget Tracker is a clean, privacy-focused tool designed to help you set limits and track expenses in real-time. It’s not just a spreadsheet; it’s a reactive application that gives you instant visual feedback on your financial health. 🔗 Try the App Live 💻 View the Code One of the coolest parts of building this app was using the new Svelte 5 reactivity model. Gone are the days of complex store subscriptions for simple local state. Handling form inputs is incredibly intuitive. Instead of binding to a store, we just use a comprehensive $state object or individual signals. We implemented a "smart" auto-backup that watches for unsaved changes. It uses $effect to trigger a countdown whenever the state changes. This pattern ensures that every time the user types or modifies a value (hasUnsavedChanges becomes true), we reset the timer, waiting for them to stop "typing" for 3 seconds before syncing to the server. Don't let the "New Year, New Me" resolution start with paying off credit card debt. Stay tuned for Day 2, where we'll handle the logistics of gift-giving! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: let budgetName = $state(''); let budgetAmount: number | undefined = $state(undefined); let selectedCurrency = $state('USD'); function addBudget() { // Reactivity just works! budgetState.addBudget(budgetName, budgetAmount, selectedCurrency); // Resetting forms is as simple as reassigning the variable budgetName = ''; budgetAmount = undefined; } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: let budgetName = $state(''); let budgetAmount: number | undefined = $state(undefined); let selectedCurrency = $state('USD'); function addBudget() { // Reactivity just works! budgetState.addBudget(budgetName, budgetAmount, selectedCurrency); // Resetting forms is as simple as reassigning the variable budgetName = ''; budgetAmount = undefined; } CODE_BLOCK: let budgetName = $state(''); let budgetAmount: number | undefined = $state(undefined); let selectedCurrency = $state('USD'); function addBudget() { // Reactivity just works! budgetState.addBudget(budgetName, budgetAmount, selectedCurrency); // Resetting forms is as simple as reassigning the variable budgetName = ''; budgetAmount = undefined; } COMMAND_BLOCK: // Auto-backup effect $effect(() => { // Using $effect.pre to cleanup previous timers ensures no memory leaks $effect.pre(() => { clearTimeout(autoBackupTimer); }); if (hasUnsavedChanges && autoBackupEnabled.current) { // Debounce the backup trigger autoBackupTimer = setTimeout(performAutoBackup, 3000); } }); Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: // Auto-backup effect $effect(() => { // Using $effect.pre to cleanup previous timers ensures no memory leaks $effect.pre(() => { clearTimeout(autoBackupTimer); }); if (hasUnsavedChanges && autoBackupEnabled.current) { // Debounce the backup trigger autoBackupTimer = setTimeout(performAutoBackup, 3000); } }); COMMAND_BLOCK: // Auto-backup effect $effect(() => { // Using $effect.pre to cleanup previous timers ensures no memory leaks $effect.pre(() => { clearTimeout(autoBackupTimer); }); if (hasUnsavedChanges && autoBackupEnabled.current) { // Debounce the backup trigger autoBackupTimer = setTimeout(performAutoBackup, 3000); } }); - Visual Limits: Create budgets with specific caps (e.g., "$1000 for Gifts"). As you add expenses, the progress bar shifts color from generic green to warning yellow, and finally to "danger red" as you approach your limit. - Multi-Currency Support: Ordering gifts from overseas? The app supports USD, EUR, GBP, JPY, and more, handling the display formatting seamlessly. - Local-First with Backup: Your data is stored locally for instant access, but authenticated users get auto-backups to the server. - Open the Budget Tracker. - Create a "Holiday 2025" budget. - Log every roll of wrapping paper and every Secret Santa gift.