Explore the clean and interactive frontend of a messaging app with dark mode, responsive layout, and persistent local storage using IndexedDB. Built with Next.js, React, and TypeScript.
MyMessenger is a sleek, frontend-only messaging app that uses Next.js, React, and TypeScript for a modern chat experience.
With features like message persistence, image attachments, emoji picker, and typing indicator, this demo simulates a real-time messaging experience entirely on the client-side.
The app utilizes IndexedDB for local message and image storage, so your messages persist even after page reloads.
- 🎨 Dark Theme — polished dark UI with smooth animations
- 📱 Responsive Design — optimized for mobile, tablet, and desktop
- 📧 Message Persistence — store messages and images locally in IndexedDB
- 🖼️ Image Attachments — upload and preview images before sending
- 😎 Emoji Picker — easily insert emojis into messages
- ⏳ Typing Indicator — shows typing status while typing a message
- 🖱️ Interactive Contact List — easily switch between chats
- 🔄 Auto-Reply Simulation — simulate receiving a reply after a delay
| Technology | Purpose |
|---|---|
| ⚛️ React | Dynamic UI and chat logic |
| 🧭 Next.js | File-based routing & optimization |
| 🟦 TypeScript | Type safety and structured code |
| 🎨 Tailwind CSS | Styling and responsive design |
| 🗂️ IndexedDB | Persistent local storage for messages and images |
| 😎 react-icons | Small, clean icons for UI elements |
| 💬 Next.js Client Component | Entire app built as a client-side component |
Users can:
- Switch between contacts and view individual chat windows 🖱️
- Send text messages and upload images with previews 🖼️
- All chat history, including images, is stored in the browser using IndexedDB for persistence 🔄
- Use the built-in emoji picker to enhance messages 😎
- See a typing indicator when the user is typing ⏳
- Interact with the UI in a smooth, responsive experience 💬
This project demonstrates modern front-end techniques with persistent local storage, UI interactivity, and responsive design.
Developed by: Your Name
💬 Front-End Developer | Building interactive, immersive web experiences