Course Recap and What's Next
You built FamilyTree. A working, deployed SPA that lets you record family members, their relationships across multiple marriages, and navigate a visual focus-view tree — all persisted to localStorage. Here’s what every module contributed.
What the full course covered
Section titled “What the full course covered”Module 01 — Getting Started: Vue is a progressive reactive framework. You scaffold with npm create vue@latest, write components as SFCs, and get instant HMR with Vite.
Module 02 — Components and Props: defineProps passes data down; defineEmits sends signals up; slots project HTML content. One-way data flow keeps components predictable and reusable.
Module 03 — Reactivity and State: ref and reactive make state reactive. computed derives cached values. watch and watchEffect run side effects. Lifecycle hooks (onMounted, onUnmounted) run at specific moments.
Module 04 — Directives and Templates: :attr binds dynamically; @event listens; v-if/v-show handle conditions; v-for renders lists; v-model binds form inputs; :class/:style apply dynamic styling.
Module 05 — Vue Router: createRouter defines routes. <RouterView> renders the matched view. <RouterLink> navigates without reloads. useRoute reads params. useRouter navigates programmatically. Guards protect routes.
Module 06 — Pinia: defineStore creates global state with setup syntax. storeToRefs preserves reactivity when destructuring. pinia-plugin-persistedstate survives page refreshes. afterHydrate handles schema evolution.
Module 07 — FamilyTree Build: Everything combined: typed interfaces, a single-source-of-truth store with computed getters and relationship actions, a visual tree built with v-for and v-if, a shared PersonForm used in two views, four routes with params, and a full relationship management UI.
How FamilyTree maps to course concepts
Section titled “How FamilyTree maps to course concepts”| Feature | Concepts used |
|---|---|
| Visual focus tree | v-for, v-if, computed getters, @select emits |
| PersonCard role styling | :class with object syntax |
| Add/Edit form | v-model, @submit.prevent, defineProps, defineEmits |
| Route-based views | createRouter, <RouterView>, useRoute, useRouter |
| Multiple marriages | SpouseRelationship[], computed filtering, v-if/v-else |
| Persistence | pinia-plugin-persistedstate, afterHydrate normalization |
| Shared data layer | Pinia defineStore, storeToRefs, computed getters |
What’s next
Section titled “What’s next”Vue Foundations gives you the foundation. Here’s where to go next:
Node.js Foundations → — The next course in the track. Build the backend that powers frontend apps: a REST API with Express, SQLite, bcrypt authentication, and JWTs. Then wire it to a React frontend and deploy both to Railway and GitHub Pages. If you want to understand what happens on the server side of the apps you’ve been building, start here.
Nuxt.js — Vue’s full-stack framework. Adds server-side rendering, file-based routing, automatic code splitting, API routes, and a deployment story. If you’re building anything public-facing, Nuxt is the next step.
Testing with Vitest and Vue Test Utils — Write unit tests for your store actions and integration tests for components. Vitest is fast and has first-class Vue support. @vue/test-utils provides component mounting and querying.
Advanced Pinia patterns — Store composition (calling one store from another), custom plugins, optimistic updates, and server-side state hydration.
Vue ecosystem — VueUse (300+ composition utilities), Vee-Validate (form validation), TanStack Query for Vue (server state management), Nuxt UI (component library).
Deploying FamilyTree — The GitHub repository has a GitHub Actions workflow that deploys to GitHub Pages on push to main. Fork it, add your own data, and share it.
You can browse the FamilyTree source on GitHub.
Key terms — the full course
Section titled “Key terms — the full course”| Term | Module | What it means |
|---|---|---|
ref(value) | 03 | Reactive reference |
computed(() => ...) | 03 | Cached derived value |
defineProps | 02 | Declare component inputs |
defineEmits | 02 | Declare component events |
v-for / :key | 04 | List rendering with identity |
v-model | 04 | Two-way form binding |
<RouterView> | 05 | Route outlet in App.vue |
useRoute() | 05 | Read current URL state |
useRouter() | 05 | Programmatic navigation |
defineStore | 06 | Create a Pinia store |
storeToRefs | 06 | Reactive destructuring |
afterHydrate | 06 | Post-restore normalization |
You know Vue. Build something real.