Course Recap and What's Next

You built BudgetBuddy. From a blank folder to a working, deployed expense tracker — handling user input, persisting data, fetching live exchange rates from an external API, rendering dynamic UI, and degrading gracefully when things go wrong.

View the live app | View on GitHub

What you built

BudgetBuddy is a browser-based personal expense tracker:

• Add, view, and delete expenses with description, amount, category, and date
• Filter by category using an array method chain
• Calculate totals with reduce — updated reactively after every change
• Live currency conversion using the ExchangeRate-API, with a 1-hour cache
• localStorage persistence — expenses survive page reloads
• Graceful degradation — the app functions even if the network call fails

It is a real app. Every pattern you used is the same pattern you would use in a production codebase.

What you learned

Array methods — forEach, map, filter, find, reduce, sort, some, every. These are the backbone of working with collections in JavaScript. You used them to render the list, filter by category, calculate totals, and build lookup objects.

ES6 classes — constructors, methods, private fields, static members, inheritance. The Expense class gives your data consistent structure, validation, and serialization. Without it, every expense would be a raw object with no guarantees.

ES modules — named exports, default exports, one concern per file. BudgetBuddy is organized as expense.js, storage.js, api.js, ui.js, and main.js — each file has one job. You will see this pattern in every modern JavaScript project.

Destructuring and spread — object/array destructuring, defaults, renaming, spread for immutable updates, rest parameters. The Expense constructor and the array update patterns ({ ...expense, amount: newValue }) use these idioms throughout.

The Fetch API and Promises — fetch, response.ok, .then, .catch, .finally. You understand the full error surface: network failure, HTTP errors, malformed JSON, and API-level errors.

async/await — async functions, await, try/catch/finally, Promise.all, Promise.allSettled. You wrote real async code that handles both success and failure, runs operations in parallel when possible, and degrades gracefully.

The file structure you built

budgetbuddy/
  index.html       ← HTML structure, unchanged throughout
  favicon.svg      ← browser tab icon
  style.css        ← layout and component styles
  main.js          ← entry point: state, event handlers, render loop
  expense.js       ← Expense class: validation, serialization, static utilities
  storage.js       ← localStorage: save and load
  api.js           ← ExchangeRate-API: fetch, cache, convert
  ui.js            ← DOM: render expenses, update total

This structure is not arbitrary — it is the standard separation used in Angular, React, Vue, and every other framework you will encounter.

Deploying to GitHub Pages

BudgetBuddy uses <script type="module">, which means it requires a real HTTP server — you can’t open index.html as a file:// URL and have the imports work. GitHub Pages serves the files over HTTPS, so it works perfectly with no build step required.

1. Initialize the repository and push to GitHub

git init
git branch -m main
git add .
git commit -m "initial commit"
git remote add origin https://github.com/<your-username>/BudgetBuddy.git
git push -u origin main

Create the repository on GitHub first (no README, no .gitignore).

2. Enable GitHub Pages

1. Open the repository on GitHub
2. Go to Settings → Pages
3. Under Branch, select main and leave the folder as / (root)
4. Click Save

Your app will be live at https://<your-username>.github.io/BudgetBuddy/ within a minute or two.

What is next

The JavaScript Development Track continues with three more courses:

TypeScript takes the JavaScript you now know and adds a static type system. You will add type annotations to the Expense class, type the fetchRates return value, and catch entire categories of bugs at write time rather than at runtime. TypeScript is required knowledge for Angular, among others.

Angular Foundations uses TypeScript and the patterns you have learned here — components, services, modules, and reactive data — to build complete single-page applications. The BudgetBuddy architecture (ui.js = component, storage.js = service, api.js = service) maps directly to how Angular applications are structured.

React Foundations covers the most widely used frontend library in the industry — function components, hooks, derived state, custom hooks, and the Context API — applied to a deployed budgeting app.

The foundation you have is solid. Everything ahead builds on it.

TypeScript Foundations →