---

Emoji Vault

Welcome to Emoji Vault, a user-friendly tool designed to make searching and copying emojis easier than ever! This project is built using React and Vite, providing a seamless experience with a clean and minimalistic interface.

---

📖 Introduction

Ever needed to search for the perfect emoji but got lost in countless platforms? Emoji Vault allows users to easily search for emojis, view a list of options, and copy their desired emoji directly to the clipboard in just a click!

👉 Live Project: Emoji Vault

---

🚀 Features

• 🔍 Easy Emoji Search: Quickly find the emoji you need with an intuitive search bar.
• 📋 Copy to Clipboard: Copy emojis with a single click for seamless use.
• 📱 Responsive Design: A user-friendly interface that works beautifully across all devices.
• ⚡ Fast Performance: Built with Vite to ensure a smooth experience with minimal load times.
• 🕸️ Dynamic Modal: Displays emoji details in a sleek popup with a copy feature.
• ⏳ Skeleton Loaders: Smooth transitions while waiting for API responses.

---

💡 What I Learned

Challenges Faced

• 💭 Problem: I frequently faced the challenge of copying emojis to use in my projects. It was frustrating hopping between platforms just to find the right one, so I decided to solve this problem for myself by building such a platform by myself.
• ✨ Solution: Emoji Vault offers a smooth and seamless user experience with a clean, minimalistic design that makes finding and copying emojis a breeze. No more endless searching or juggling different websites!

---

🛠 Tools & Technologies

• React.js: Chosen for its simplicity and efficiency.
• Tailwind CSS: Used for fast and responsive UI styling.
• Ant Design: Utilized for polished and ready-to-use UI components.
• emoji-api.com: Free API for accessing emojis.
• Axios: Used for seamless API integration.
• Vercel: Deployment platform for hosting the application.

---

🛠️ The Process

1. 🖌️ UI Design:

   • 🧠 Brainstormed design ideas and used an AI tool to generate the initial UI.

2. 🎨 Frontend Development:

   • ✍️ Built the UI with React.js and Tailwind CSS, ensuring responsiveness.

3. 📦 Ant Design Integration:

   • 🚀 Incorporated Ant Design components to save development time and improve UI consistency.

4. 🌐 API Integration:

   • 🔗 Integrated emoji-api.com with Axios for fetching emoji data.

5. 🔍 Search Functionality:

   • 🛠️ Implemented a search feature that fetches emojis dynamically based on user input.
   • 🛡️ Added restrictions to prevent unnecessary API calls for single-character inputs.

6. 📋 Modal and Copy Functionality:

   • ⚡ Designed a modal to display emoji details and implemented a copy-to-clipboard feature.

7. ⏳ Loading State:

   • 🌀 Added skeleton loaders to enhance user experience during API response times.

8. 🌍 Deployment:

   • 🚀 Deployed the app on Vercel, making it accessible for everyone.

---

🚦 Running the Project

To run Emoji Vault in your local environment, follow these steps:

1. Clone the repository:

   git clone https://github.com/rumaisanaveed/emoji-vault.git

2. Navigate to the project directory:

   cd emoji-vault

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open http://localhost:3000 in your web browser to view the app.

---

🍿 Video

You can watch a quick demo of Emoji Vault below:

emoji-vault.mp4

---