Course Recap and What's Next
You have built and deployed ZeroBudget — a complete, production-quality React app. Here is everything the course covered and where to go next.
What you built
Section titled “What you built”ZeroBudget is a zero-based budgeting app with:
- Multiple income sources, editable inline
- 8 preset spending categories with user-editable budget amounts
- A real-time “Left to Assign” number that goes green at zero and red when over-budgeted
- Transactions logged per category via quick-add or a global form
- Per-category spent / remaining / progress bar calculations (all derived state)
- Month-by-month navigation with copy-from-last-month and reset
- Full localStorage persistence keyed by month and year
You can view the live app and read the full source.
What you learned
Section titled “What you learned”Module 01 — Getting Started
Section titled “Module 01 — Getting Started”React is a UI library. Components are functions that return JSX. Vite scaffolds and serves the project. JSX is JavaScript with syntax sugar — className, htmlFor, camelCase events, and expressions in {}.
Module 02 — Components and Props
Section titled “Module 02 — Components and Props”Components have one responsibility. Props are inputs — data flows one way, from parent to child. Children call callback props to send data back. Composition builds complex UIs from simple pieces. Lists need stable, unique key props.
Module 03 — State and Events
Section titled “Module 03 — State and Events”useState stores data that changes and triggers re-renders on update. Never mutate state — always pass new values. Controlled inputs bind inputs to state. Lift state up to share it between siblings.
Module 04 — Lists, Effects, and Persistence
Section titled “Module 04 — Lists, Effects, and Persistence”Dynamic lists come from state. useEffect handles side effects with a dependency array. useLocalStorage combines lazy initialization and a write-on-set pattern for persistence. Always include all dependencies; return cleanup functions.
Module 05 — Derived State and Performance
Section titled “Module 05 — Derived State and Performance”Derive values from existing state instead of storing them. useMemo caches expensive computations. useCallback stabilizes function references. React.memo skips re-renders when props are unchanged. Measure before optimizing.
Module 06 — Custom Hooks and Context
Section titled “Module 06 — Custom Hooks and Context”Custom hooks extract stateful logic into reusable functions. Context broadcasts data without prop drilling. The useBudgetContext pattern — a hook that wraps useContext with a guard — is the clean way to expose context. Use props for identity, context for shared state, local state for UI-only values.
Module 07 — ZeroBudget Project Build
Section titled “Module 07 — ZeroBudget Project Build”Applied every concept to a complete app: month-keyed persistence, derived totals, inline editing, two transaction paths, month navigation, and a clean separation between the data layer (useBudget), the broadcast layer (BudgetContext), and the layout layer (App).
Key patterns to carry forward
Section titled “Key patterns to carry forward”| Pattern | When to use it |
|---|---|
| Controlled inputs | Every form input that feeds state |
| Derived state | Any value computable from existing state |
| Lifted state | When siblings need to share the same data |
| Custom hook | When stateful logic repeats or clutters a component |
| Context | When data needs to reach deep descendants without threading |
useMemo / useCallback | When measured performance problems exist in large lists |
What is next
Section titled “What is next”The JavaScript Development Track continues with Vue Foundations — the next course in the sequence. Vue 3 takes a different approach to reactive SPAs than React: Single-File Components co-locate template, logic, and scoped styles in one .vue file; the Composition API with <script setup> replaces hooks; Vue Router and Pinia ship as official first-party packages. You will build FamilyTree — an interactive family tree SPA with multi-generation relationships, marriage/divorce history, and full localStorage persistence.
If you want to go deeper in React before moving on:
React Router — client-side routing for multi-page React apps. Every production React app uses it.
Data fetching libraries — React Query (TanStack Query) handles loading states, caching, and re-fetching for server data far better than raw useEffect + fetch.
TypeScript with React — Adding TypeScript gives you autocomplete on props, catches mismatched types at compile time, and is standard on professional teams.
Congratulations on completing React Foundations.