Session Logs
This section contains archives of my learning sessions
What's in a Session Log?
Each session log captures:
- Date and session number
- Topics covered — What we worked on
- Tickets completed — Jira tickets finished
- Key learnings — Important concepts learned
- Next steps — What's planned for next session
Atlassian permanently deleted the original SCRUM project's issue history. The board was rebuilt from scratch (new Epic, new ticket numbers) using this session log and VocabPal-Learning/docs/SESSION_LOG.md as the source of truth. Ticket numbers in the Sprint 1 and Testing sessions below (Sessions 1–16) are the old, pre-rebuild numbers and no longer resolve on the live board. Everything from the "Current Sprint Status" tables onward uses current ticket numbers.
Live on the Chrome Web Store and at vocabpal.online, built in the main VocabPal repo. Tickets that shipped are marked ✅ Done. The step-by-step learning rebuild (VocabPal-Learning) continues, and the remaining tickets are 📋 Backlog, planned future work.
Sprint 1 — Foundation ✅ Complete
Jan 17 – Feb 10, 2026
Setting up the monorepo, TypeScript interfaces, Firebase, and the Dictionary API adapter.
| Session | Date | Tickets (pre-rebuild) | Focus |
|---|---|---|---|
| 1 | Jan 17 | — | Project setup, Jira, Confluence |
| 2 | Jan 18 | SCRUM-11 to 17 | Monorepo setup, TypeScript config, ESLint |
| 3 | Jan 18 | SCRUM-6 | Monorepo folder structure |
| 4 | Feb 2 | SCRUM-7, 18–22 | TypeScript interfaces for all core data models |
| 5 | Feb 3 | SCRUM-8, 23–30 | Firebase setup, Dictionary API adapter pattern |
| 6 | Feb 5 | SCRUM-9, 33, 39 | Dictionary API adapter implementation |
| 7 | Feb 7 | SCRUM-10, 34–35 | Firebase CRUD utilities, wordService |
| 8 | Feb 8 | — | Java concepts discussion |
| 9 | Feb 9 | SCRUM-36–38 | categoryService, authService, export index |
| 10 | Feb 10 | SCRUM-10 | Sprint 1 complete, Sprint 2 created |
| 11 | Feb 10 | — | Sprint 3 & 4 created with all subtasks |
Testing Infrastructure ✅ Done
Feb 10 – Apr 5, 2026
Setting up the test infrastructure (Vitest, RTL, Firebase Emulator) and writing unit/integration tests for all Sprint 1 services. On the rebuilt board this work is split across SCRUM-212 (unit tests for Sprint 1 services — Done) and SCRUM-221 (testing framework setup — Done except Playwright).
| Session | Date | Tickets (pre-rebuild) | Focus |
|---|---|---|---|
| 12 | Feb 26 | SCRUM-124 | Core testing concepts: mocks, spies, AAA pattern, RTL |
| 13 | Mar 2 | SCRUM-71, 125, 126 | Vitest monorepo setup, React Testing Library setup |
| 14 | Mar 3 | SCRUM-127 | Firebase Emulator setup, vitest setup file, envDir fix |
| 15 | Mar 5 | SCRUM-72 | Integration tests for wordService — filter vs find bug, spread order bug |
| 16 | Apr 5 | SCRUM-73, 74 | Unit tests for categoryService and authService — stateful mocks, JS getters |
April – August 2026: Paused for contract work.
September 2026: Resumed VocabPal development.
Status (updated Sept 30, 2026, after launch):
| Ticket (Parent) | Focus (Parent) | Ticket (Children) | Focus (Children) | Status |
|---|---|---|---|---|
| SCRUM-212 | Add unit tests for Sprint 1 services | SCRUM-287 | Set up testing framework in monorepo | ✅ Done |
| SCRUM-288 | Write unit tests for wordService | ✅ Done | ||
| SCRUM-289 | Write unit tests for categoryService | ✅ Done | ||
| SCRUM-290 | Write unit tests for authService | ✅ Done | ||
| SCRUM-291 | Write unit tests for DictionaryAdapter | ✅ Done | ||
| SCRUM-221 | Set up testing framework | SCRUM-332 | Learn: Testing in JavaScript/TypeScript (Vitest, RTL) | ✅ Done |
| SCRUM-333 | Set up Vitest in monorepo | ✅ Done | ||
| SCRUM-334 | Set up React Testing Library | ✅ Done | ||
| SCRUM-335 | Set up Firebase Emulator for tests | ✅ Done | ||
| SCRUM-336 | Set up Playwright for E2E tests | 📋 Backlog |
Sprint 2 — Chrome Extension ✅ Shipped
Shipped Sept 30, 2026
Building the Chrome Extension: popup UI, content scripts, word highlighting, Firebase integration.
| Ticket (Parent) | Focus (Parent) | Ticket (Children) | Focus (Children) | Status |
|---|---|---|---|---|
| SCRUM-208 | Set up Chrome Extension project | SCRUM-261 | Learn: Chrome Extension architecture and Manifest V3 | ✅ Done |
| SCRUM-262 | Create manifest.json with Manifest V3 format | ✅ Done | ||
| SCRUM-263 | Set up extension folder structure | ✅ Done | ||
| SCRUM-264 | Configure Vite for Chrome extension build | ✅ Done | ||
| SCRUM-265 | Create basic popup page with React | ✅ Done | ||
| SCRUM-266 | Load and test extension in Chrome | ✅ Done | ||
| SCRUM-209 | Build popup UI with React | SCRUM-267 | Learn React patterns for Chrome extensions | ✅ Done |
| SCRUM-268 | Create WordList component | ✅ Done | ||
| SCRUM-269 | Create WordCard component | ✅ Done | ||
| SCRUM-270 | Style popup with Tailwind CSS | ✅ Done | ||
| SCRUM-271 | Add popup header and footer with web app link | 📋 Backlog | ||
| SCRUM-272 | Create Flashcard component with flip animation | ✅ Done | ||
| SCRUM-273 | Add WordList grouping by date and source | ✅ Done | ||
| SCRUM-274 | Create CategorySelect component for study filtering | ✅ Done | ||
| SCRUM-210 | Implement content script for word highlighting | SCRUM-275 | Learn content scripts and message passing | ✅ Done |
| SCRUM-276 | Create content script for text selection | ✅ Done | ||
| SCRUM-277 | Add floating "Add to VocabPal" button on text selection | ✅ Done | ||
| SCRUM-278 | Add context menu for saving words | ✅ Done | ||
| SCRUM-279 | Add visual feedback when word saved | ✅ Done | ||
| SCRUM-280 | Create service worker for background tasks | ✅ Done | ||
| SCRUM-281 | Integrate dictionary API lookup | ✅ Done | ||
| SCRUM-211 | Connect extension to Firebase | SCRUM-282 | Learn Firebase Auth in Chrome extensions | ✅ Done |
| SCRUM-283 | Configure OAuth client ID for extension | ✅ Done | ||
| SCRUM-284 | Implement Google sign-in using chrome.identity | ✅ Done | ||
| SCRUM-285 | Wire up wordService to Firestore | ✅ Done | ||
| SCRUM-286 | Test complete flow end-to-end | ✅ Done |
Sprint 3 — Web App ✅ Shipped
Shipped Sept 30, 2026
Building the full web application: Vite + React + Tailwind, routing, auth, words page, flashcards, categories.
Session 21 — Sept 10–11, 2026: getting web/ actually running
A big debugging session, not just config. Fixed an accidental nested web/web/ folder (from running the Vite scaffold command one directory too deep), a runtime crash from <Link> being rendered outside <BrowserRouter>, and Tailwind silently doing nothing (missing @import 'tailwindcss'). Reviewed the React Router setup against SCRUM-295's actual acceptance criteria and caught a missing Categories placeholder page.
The bulk of the session was a layered bug chasing @vocabpal/shared imports failing in web/: a missing @shared path mapping, then a deeper alias-collision between shared/'s and web/'s different meanings of @, then a shared/package.json entry point that pointed at a file that never existed. Fixed by giving shared/ a real build step producing dist/. Running npm run dev afterward surfaced a second, separate bug — tsc never rewrites alias imports in its compiled output, so the emitted JS still broke at runtime even though the type-check passed. Fixed with tsc-alias as a second build step.
Session 22 — Sept 11, 2026: Layout, Outlet, and first Tailwind
Fixed a Firebase: Error (auth/invalid-api-key) crash — web/vite.config.ts (the real dev-server config, separate from web/vitest.config.ts) never got the envDir fix from Session 21, so npm run dev couldn't find the root .env at all.
Worked through SCRUM-297 (nested routes and <Outlet />) and SCRUM-298 (building the actual Layout component) together — this was also a first real introduction to Tailwind CSS, taught by bridging from CSS/SCSS knowledge rather than starting fresh. Layout.tsx (Header + <Outlet /> + Footer) reviewed and approved via a posted Jira code review comment. Full write-up, including the Tailwind/SCSS concept mapping and the DRY-duplication fix (extracting a NavItem component instead of repeating class strings), is in a local-only doc: learning-notes/react/router-and-layout.md.
Session 23 — Sept 13–14, 2026: fixing the ProtectedRoute wiring, and Tailwind flexbox
Diagnosed a real bug: Header/Footer never rendered for signed-in users, because Layout.tsx used ProtectedRoute as a JSX children-wrapper (<ProtectedRoute><Header/>...</ProtectedRoute>), but ProtectedRoute was written to be used as a nested-route guard instead (no children prop, renders its own <Outlet />) — the two patterns look alike but silently drop content if mixed up. Fixed by restructuring App.tsx so ProtectedRoute wraps Layout's route as a parent <Route>.
Also built SCRUM-300's responsive hamburger nav through a few real bug rounds (a prop-destructuring mistake, a hamMenu/openHamMenu name mismatch, a nav visibility class not actually wired to the toggle state), and went deep on Tailwind's flexbox and sizing utilities: flex-col, justify-start, items-start (and how its meaning flips with flex-direction), the h-full/h-screen/arbitrary-value height rules, and the flex-1 mechanism that actually pins a footer to the bottom of the page — plus clearing up that "sticky footer" (the design pattern) and position: sticky (the CSS property) are unrelated despite the shared word. Full write-up: learning-notes/react/protected-routes-and-responsive-nav.md and the new learning-notes/tailwind/ docs.
Session 24 — Sept 15–17, 2026: Firebase Auth, useAuth, and the AuthProvider pattern
Worked through authService.onAuthStateChange from first principles — what the returned unsubscribe function actually does (and doesn't do), why a listener is needed for Firebase's SDK but not for a hand-rolled JWT/localStorage flow (the dividing line: whether state can change without your own code being the cause), and why getAuth() is a synchronous reference to a persistent local object rather than a network call.
Reviewed SCRUM-301 (Firebase Auth React patterns), SCRUM-302 (SignIn page), and SCRUM-303 (useAuth hook) across several rounds — caught a SignIn.tsx bug where a failed Google sign-in produced an unhandled promise rejection with no user feedback, then rebuilt SignIn with a proper centered UI, a real Google logo, and loading/error states. Built out AuthContext/AuthProvider/useAuth for real, with ProtectedRoute switched from a one-time getCurrentUser() snapshot to a live, reactive subscription — caught two real bugs by actually running tsc (an untyped children prop, a leftover unused import), plus a tooling gotcha: bare tsc --noEmit in web/ silently checks nothing due to the root tsconfig.json's project-references setup. Full write-up: learning-notes/react/auth-context-and-listeners.md and learning-notes/react/use-auth-hook.md.
Status (updated Sept 30, 2026, after launch):
| Ticket (Parent) | Focus (Parent) | Ticket (Children) | Focus (Children) | Status |
|---|---|---|---|---|
| SCRUM-213 | Set up Web App project | SCRUM-292 | Learn Vite and React project structure | ✅ Done |
| SCRUM-293 | Create web folder with Vite + React + TypeScript | ✅ Done | ||
| SCRUM-294 | Install and configure Tailwind CSS | ✅ Done | ||
| SCRUM-295 | Install React Router and configure routes | ✅ Done | ||
| SCRUM-296 | Connect to shared package and verify build | ✅ Done | ||
| SCRUM-214 | Create layout and navigation | SCRUM-297 | Learn React Router layout patterns (Outlet) | ✅ Done |
| SCRUM-298 | Create Layout component with header and nav | ✅ Done | ||
| SCRUM-299 | Create protected route wrapper (require sign-in) | ✅ Done | ||
| SCRUM-300 | Add responsive navigation menu | ✅ Done | ||
| SCRUM-215 | Build Sign-in page | SCRUM-301 | Learn Firebase Auth React integration patterns | ✅ Done |
| SCRUM-302 | Create SignIn page with Google sign-in button | ✅ Done | ||
| SCRUM-303 | Wire up useAuth hook for auth state | ✅ Done | ||
| SCRUM-304 | Redirect to Words page after successful sign-in | ✅ Done | ||
| SCRUM-216 | Build Words page | SCRUM-305 | Learn Firestore real-time listeners (onSnapshot) | ✅ Done |
| SCRUM-306 | Create useWords hook with real-time Firestore sync | ✅ Done | ||
| SCRUM-307 | Build Words page layout and word list rendering | ✅ Done | ||
| SCRUM-308 | Add grouping by date and source | ✅ Done | ||
| SCRUM-309 | Add search and filter functionality | ✅ Done | ||
| SCRUM-310 | Add delete word functionality | ✅ Done | ||
| SCRUM-217 | Build Flashcards page | SCRUM-311 | Create Flashcard component with flip animation | ✅ Done |
| SCRUM-312 | Build Flashcards page with card navigation (next/previous) | ✅ Done | ||
| SCRUM-313 | Add audio pronunciation playback | ✅ Done | ||
| SCRUM-314 | Add category filter for flashcard study sessions | ✅ Done | ||
| SCRUM-315 | Add progress tracking (cards studied count) | ✅ Done | ||
| SCRUM-218 | Build Categories page | SCRUM-316 | Create useCategories hook with Firestore CRUD | ✅ Done |
| SCRUM-317 | Build Categories page with category list | ✅ Done | ||
| SCRUM-318 | Add create/edit category form with color picker | ✅ Done | ||
| SCRUM-319 | Add delete category with confirmation | 📋 Backlog | ||
| SCRUM-320 | Wire up category navigation to filtered Words/Flashcards view | ✅ Done | ||
| SCRUM-219 | Create reusable components | SCRUM-321 | Create shared WordCard component | ✅ Done |
| SCRUM-322 | Create AddToCategoryModal component | ✅ Done | ||
| SCRUM-323 | Create EmptyState component | ✅ Done | ||
| SCRUM-324 | Create CategorySelect component (shared with extension) | 📋 Backlog | ||
| SCRUM-325 | Extract shared components into reusable library structure | 📋 Backlog | ||
| SCRUM-220 | Add tests for Sprint 3 web app components | SCRUM-326 | Write unit tests for useAuth hook | 📋 Backlog |
| SCRUM-327 | Write unit tests for useWords hook | 📋 Backlog | ||
| SCRUM-328 | Write unit tests for useCategories hook | 📋 Backlog | ||
| SCRUM-329 | Write component tests for WordCard | 📋 Backlog | ||
| SCRUM-330 | Write component tests for Flashcard | 📋 Backlog | ||
| SCRUM-331 | Write page integration tests (Words, Flashcards, Categories) | 📋 Backlog |
Sprint 4 — Polish & Deploy ✅ Shipped
Shipped Sept 30, 2026
CI/CD, performance, Chrome Web Store submission, deployment, and documentation — plus the testing-framework setup listed above under "Testing Infrastructure."
| Ticket (Parent) | Focus (Parent) | Ticket (Children) | Focus (Children) | Status |
|---|---|---|---|---|
| SCRUM-222 | Write tests | SCRUM-337 | Write unit tests for remaining shared services | 📋 Backlog |
| SCRUM-338 | Write component tests for extension popup components | 📋 Backlog | ||
| SCRUM-339 | Write component tests for web app pages | 📋 Backlog | ||
| SCRUM-340 | Write E2E test: sign-in flow | 📋 Backlog | ||
| SCRUM-341 | Write E2E test: save word and view in Words page | 📋 Backlog | ||
| SCRUM-342 | Write E2E test: create flashcard study session | 📋 Backlog | ||
| SCRUM-223 | Set up CI/CD pipeline | SCRUM-343 | Learn GitHub Actions basics | ✅ Done |
| SCRUM-344 | Create ci.yml workflow (build + test on PR) | 📋 Backlog | ||
| SCRUM-345 | Add build status badge to README | 📋 Backlog | ||
| SCRUM-346 | Configure workflow to run on push and pull_request | 📋 Backlog | ||
| SCRUM-347 | Test CI pipeline end-to-end | 📋 Backlog | ||
| SCRUM-348 | Separate lint job in ci.yml | 📋 Backlog | ||
| SCRUM-349 | Separate typecheck job in ci.yml (tsc --noEmit) | 📋 Backlog | ||
| SCRUM-350 | Add coverage threshold gate in CI | 📋 Backlog | ||
| SCRUM-224 | Optimize performance | SCRUM-351 | Learn Vite bundle analysis tools | 📋 Backlog |
| SCRUM-352 | Run bundle analysis and identify large dependencies | 📋 Backlog | ||
| SCRUM-353 | Add code splitting for routes | 📋 Backlog | ||
| SCRUM-354 | Add virtual scrolling for long word lists | 📋 Backlog | ||
| SCRUM-355 | Re-measure bundle size and load performance after optimizations | 📋 Backlog | ||
| SCRUM-225 | Chrome Web Store submission | SCRUM-356 | Design and create extension icons (16/48/128px) | ✅ Done |
| SCRUM-357 | Take promotional screenshots of extension | ✅ Done | ||
| SCRUM-358 | Write Chrome Web Store listing description | ✅ Done | ||
| SCRUM-359 | Write privacy policy page | ✅ Done | ||
| SCRUM-360 | Prepare production build for submission | ✅ Done | ||
| SCRUM-361 | Submit extension to Chrome Web Store | ✅ Done | ||
| SCRUM-226 | Deploy web app | SCRUM-362 | Learn Vercel/Netlify deployment basics | ✅ Done |
| SCRUM-363 | Configure production environment variables | ✅ Done | ||
| SCRUM-364 | Deploy web app to Vercel/Netlify | ✅ Done | ||
| SCRUM-365 | Configure custom domain (if applicable) | ✅ Done | ||
| SCRUM-366 | Verify production deployment end-to-end | ✅ Done | ||
| SCRUM-227 | Documentation | SCRUM-367 | Write project README with setup instructions | ✅ Done |
| SCRUM-368 | Write CONTRIBUTING.md | 📋 Backlog | ||
| SCRUM-369 | Document architecture decisions (ARCHITECTURE.md) | ✅ Done | ||
| SCRUM-370 | Write user guide for VocabPal features | 📋 Backlog | ||
| SCRUM-371 | Review and polish all documentation | 📋 Backlog | ||
| SCRUM-228 | (Bonus) Deploy web app to AWS | SCRUM-372 | Learn AWS IAM basics and create deployment user | 📋 Backlog |
| SCRUM-373 | Set up S3 bucket for static hosting | 📋 Backlog | ||
| SCRUM-374 | Configure CloudFront CDN distribution | 📋 Backlog | ||
| SCRUM-375 | Set up SSL certificate via ACM | 📋 Backlog | ||
| SCRUM-376 | Configure GitHub Actions to deploy to AWS on merge | 📋 Backlog | ||
| SCRUM-377 | Verify AWS deployment end-to-end | 📋 Backlog | ||
| SCRUM-229 | (Bonus) Implement security best practices and security testing | SCRUM-378 | Learn OWASP Top 10 vulnerabilities | 📋 Backlog |
| SCRUM-379 | Write Firebase Security Rules for Firestore | ✅ Done | ||
| SCRUM-380 | Test Firebase Security Rules with emulator | 📋 Backlog | ||
| SCRUM-381 | Add Content Security Policy (CSP) headers | 📋 Backlog | ||
| SCRUM-382 | Add input validation and sanitization | 📋 Backlog | ||
| SCRUM-383 | Run npm audit and fix dependency vulnerabilities | 📋 Backlog | ||
| SCRUM-384 | Set up automated dependency scanning (Dependabot/Snyk) | 📋 Backlog | ||
| SCRUM-385 | Run OWASP ZAP security scan and fix findings | 📋 Backlog | ||
| SCRUM-230 | Enforce code quality with pre-commit hooks and branch strategy | SCRUM-386 | Set up Husky and lint-staged for pre-commit checks | 📋 Backlog |
| SCRUM-387 | Define branch naming convention | 📋 Backlog | ||
| SCRUM-388 | Configure GitHub branch protection rules on main | 📋 Backlog | ||
| SCRUM-389 | Set up Dependabot for dependency updates | 📋 Backlog | ||
| SCRUM-390 | Document branching and commit workflow in CONTRIBUTING.md | 📋 Backlog | ||
| SCRUM-231 | Define and enforce test coverage standards | SCRUM-391 | Learn code coverage metrics (statements, branches, functions, lines) | 📋 Backlog |
| SCRUM-392 | Configure Vitest coverage thresholds (80% services, 70% components) | 📋 Backlog | ||
| SCRUM-393 | Add coverage summary reporting to CI | 📋 Backlog | ||
| SCRUM-394 | Learn property-based testing concepts | 📋 Backlog | ||
| SCRUM-395 | Add property-based tests with fast-check for core services | 📋 Backlog | ||
| SCRUM-396 | Document test coverage standards in CONTRIBUTING.md | 📋 Backlog | ||
| SCRUM-232 | Complete project documentation to professional standard | SCRUM-397 | Fill in ARCHITECTURE.md with system diagrams | ✅ Done |
| SCRUM-398 | Fill in DECISIONS.md with key technical decisions and rationale | ✅ Done | ||
| SCRUM-399 | Review and finalize CONTRIBUTING.md | 📋 Backlog | ||
| SCRUM-400 | Add status/build/coverage badges to README | 📋 Backlog |
This site is synced from Jira comments automatically via a custom script — every code review and session note is captured without manual copy-pasting.