🎉 Emoji Picker App

A modern, feature-rich emoji picker application built with React that makes selecting and managing emojis fun and effortless!

✨ Features

Core Features

• 😊 Emoji Picker Component - Opens on button click with full emoji library
• 🖼️ Styled Preview Box - Displays selected emoji with name and actions
• 🔔 Toast Notifications - Shows fun notifications with emoji name when selected
• 🎨 Clean, Minimal UI - Beautiful custom CSS with smooth animations
• 📱 Responsive Design - Works perfectly on desktop, tablet, and mobile

Bonus Features

• 🕒 Recently Used Emojis - Automatically tracks your last 10 used emojis
• 📋 Copy to Clipboard - One-click copy functionality for any emoji
• 🌙 Dark Mode Toggle - Switch between light and dark themes
• ❤️ Favorite Emojis - Save your favorite emojis with localStorage persistence

Screenshot

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd emoji-picker-app

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser
   Navigate to http://localhost:5173

🎯 Usage

Selecting an Emoji

1. Click the "😊 Open Emoji Picker" button
2. Browse or search for your desired emoji
3. Click on any emoji to select it
4. See it appear in the preview box with a toast notification!

Managing Favorites

• Click the 🤍 Favorite button on any selected emoji to add it to favorites
• Click ❤️ Favorite again to remove from favorites
• Access your favorites anytime in the "Favorite Emojis" section
• Click any favorite emoji to copy it to clipboard

Recently Used

• Your last 10 used emojis are automatically saved
• Click any recent emoji to quickly copy it again
• Recent emojis persist across browser sessions

Dark Mode

• Toggle between light and dark themes using the 🌙/☀️ button in the header
• Your preference is saved in localStorage

Copy to Clipboard

• Click the 📋 Copy button on the preview box
• Or click any emoji in the Favorites or Recently Used sections
• Get instant feedback with a toast notification

🛠️ Available Scripts

Development

npm run dev

Starts the development server with hot module replacement

Build

npm run build

Creates an optimized production build

Preview

npm run preview

Preview the production build locally

Lint

npm run lint

Run ESLint to check code quality

🤝 Contributing

Contributions, issues, and feature requests are welcome!

💡 Future Enhancements

• Emoji categories filter
• Skin tone selector
• Export/Import favorites
• Emoji usage statistics
• Custom emoji collections
• Keyboard shortcuts

👨‍💻 Author

Made with ❤️ using React & emoji-picker-react

Enjoy picking emojis! 🎉✨