React Address Book

A personal address book app for managing contacts with CRUD operations and advanced search. Built with React 19 and TypeScript — data stored locally in the browser, no backend required.

Transcript

1. React Address Book A personal contact manager with label printing Demo: https://www.kkoisland.com/react-addressbook/ GitHub: https://github.com/kkoisland/react-addressbook kkoisland (Keiko)
2. About Me kkoisland (Keiko) Frontend Engineer • React / TypeScript • Interactive UI • Developer experience Portfolio: www.kkoisland.com GitHub: github.com/kkoisland
3. Why I Built This ・Replaced a 20+ year FileMaker database with a modern web app ・Needed to print mailing labels for annual greeting cards ・Wanted to learn React with a real, personal project Built with ❤ for the React community
4. What is React Address Book? A React map application that preserves your viewing context • A contact management app for organizing addresses and printing mailing labels • Supports both Japanese and US address formats • Runs locally in the browser (localStorage) — no server needed • Planning database migration (Firebase/AWS) for cloud storage and multi-device access
5. Key Features Search & Filter — Quick search + advanced multi-field filtering Label Printing — Brother DK-1209 labels, JP/US formats, quick print by type Dark/Light Mode — System-aware theme switching CSV Import — Migrated data from FileMaker with custom parser
6. Showcase #1: Master-detail layout 📋 Master-detail layout — address list on the left, edit form on the right ✏ Inline editing with Save/Update/Delete/Duplicate/Clear 📊 Status column shows print eligibility at a glance
7. Showcase #2: Dark mode support 🌙 One-click theme toggle with system preference detection 💾 Theme persists across sessions via localStorage
8. Showcase #3: Advanced search with multiple filters 🔍 Quick search bar filters across all fields instantly 🔎 Advanced search panel with AND logic across name, address, status, and more
9. Showcase #4: Label preview for JP/US formats 🏷 Label J format — postal code, address, name with honorific 🏷 Label US format — title, name, address 🖨 Live preview updates as you edit the form
10. Showcase #5: Print workflow 🖨 Print by label type or custom filtered selection 🏠 Sender label with configurable copies
11. Architecture
12. Tech Stack 🛠 Built with Frontend • React 19 + TypeScript • Vite (Build tool) • Tailwind CSS Storage & Export • localStorage (auto-save) (→ Firebase/AWS planned) Architecture: • Custom hooks, • React Context, • CSS @media print CI/CD: GitHub Actions
13. Try the Demo! 🚀 Live Demo https://www.kkoisland.com/react-addressbook/ 💻 Source Code https://github.com/kkoisland/react-addressbook 📐 Hand-drawn diagrams excalidraw-animate (OSS contributor) kkoisland (Keiko)