Update README.md

Author: HamiParsa

README.md

@@ -1,36 +1,84 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+<div align="center">
+  <h1>💬 MyMessenger - Frontend Demo</h1>
+  <p>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.</p>
+  <a href="https://hamiparsa.github.io/My-Messenger/"> 
+    <img src="https://img.shields.io/badge/View_Live_Project-000?style=for-the-badge&logo=github&logoColor=white"/>
+  </a>
+</div>
 
-## Getting Started
+---
 
-First, run the development server:
+## 🔥 About MyMessenger
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+**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.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+The app utilizes **IndexedDB** for local message and image storage, so your messages persist even after page reloads.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+---
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## 🚀 Features
 
-## Learn More
+<ul>
+  <li>🎨 <b>Dark Theme</b> — polished dark UI with smooth animations</li>
+  <li>📱 <b>Responsive Design</b> — optimized for mobile, tablet, and desktop</li>
+  <li>📧 <b>Message Persistence</b> — store messages and images locally in IndexedDB</li>
+  <li>🖼️ <b>Image Attachments</b> — upload and preview images before sending</li>
+  <li>😎 <b>Emoji Picker</b> — easily insert emojis into messages</li>
+  <li>⏳ <b>Typing Indicator</b> — shows typing status while typing a message</li>
+  <li>🖱️ <b>Interactive Contact List</b> — easily switch between chats</li>
+  <li>🔄 <b>Auto-Reply Simulation</b> — simulate receiving a reply after a delay</li>
+</ul>
 
-To learn more about Next.js, take a look at the following resources:
+---
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## 🧠 Tech Stack
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+| 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 |
 
-## Deploy on Vercel
+---
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 💡 Description
+
+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.
+
+---
+
+## 🖼️ Project Preview
+
+<div align="center">
+  <img src="/pic1.png" width="700px" />
+  <br/> <br/>
+  <img src="/pic2.png" width="700px" /> 
+</div>
+
+---
+
+## 👨‍💻 Author
+
+**Developed by:** [Your Name](https://github.com/hamiparsa)  
+💬 Front-End Developer | Building interactive, immersive web experiences  
+
+---
+
+<div align="center">
+  <img src="https://skillicons.dev/icons?i=react,next,typescript,tailwind,framer" />
+</div>
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.