React Confetti with i18n

Interactive demo for React Confetti with internationalization. Supports 10 languages with fully localized UI using react-intl (FormatJS).

Transcript

1. React Confetti with i18n Interactive demo with multilingual support Demo: https://www.kkoisland.com/react-confetti-intl GitHub: https://github.com/kkoisland/react-confetti-intl 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 🎯 Motivation: • Had experience with i18n in production, wanted to build from scratch • Learn fundamentals before leveraging AI tools ⚡ Challenges: • Repetitive translation tasks across components • Quality translations with limited language knowledge 🎉 Solution: • Built a hands-on demo to understand the core concepts • AI improved both efficiency and translation quality (dual AI review) Built with ❤ for the React community
4. About This App An internationalized version of React Confetti demo. • Multilingual support (10 languages: EN, JA, IT, DE, ZH, KO, ES, FR, SV, NL) • All 5 demo pages fully localized • Real-time parameter adjustment with translated UI
5. What This Intl App Is
6. How Locale Is Controlled
7. React Intl Rendering Flow
8. React Intl Translation Workflow
9. Showcase (EN, IT, DE, ZH, KO, ES, FR, SV, NL)
10. Try the Demo! 🚀 Live Demo https://www.kkoisland.com/react-confetti-intl 💻 Source Code https://github.com/kkoisland/react-confetti-intl 📖 Book (React Tokyo Book) - Coming soon 🛠 Built with React 19 + TypeScript + Vite + react-intl (FormatJS) + react-confetti 📐 Hand-drawn diagrams excalidraw-animate (OSS contributor) kkoisland (Keiko)