FULL-STACK / 2026
Jinterest
A mood board built with vanilla JavaScript.
- MY ROLE
- Course project
- KEY RESULT
- Undo/redo and session restore, no framework
- TEAM
- BCIT course assignment, built on my own.
How a request flows
- DOM eventsOne delegated handler
- Board stateCards, order, positions
- HistoryUndo and redo stacks
- localStorageRestore on load
Why
I wanted to understand DOM updates, UI state, and events without a framework doing the work.
What I built
- 01
Built a card system with display and edit modes, where only one card can be edited at a time.
- 02
Used one delegated event handler instead of a listener on every card and button.
- 03
Saved order, size, image URLs, pop-out state, and positions to localStorage, with undo, redo, and keyboard shortcuts.
Outcome
A framework-free app that restores your exact previous board on refresh.
The trade-off
Snapshots of the whole board for undo instead of recording individual changes. Simple and reliable, but memory grows with every step.
What I learned
Keeping UI and stored state in sync is much easier when every event flows through one handler.
What I'd fix next
Add image uploads, multiple boards, and automated tests for the undo and redo history.