https://github.com/rumaisanaveed/emoji-vault
Your go to app to find emojis for your applications.
https://github.com/rumaisanaveed/emoji-vault
ant-design frontend frontend-projects portfolio-project reactjs tailwindcss unique-projects
Last synced: about 2 months ago
JSON representation
Your go to app to find emojis for your applications.
- Host: GitHub
- URL: https://github.com/rumaisanaveed/emoji-vault
- Owner: rumaisanaveed
- Created: 2024-10-11T14:36:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-21T17:12:38.000Z (12 months ago)
- Last Synced: 2025-11-10T19:34:20.081Z (7 months ago)
- Topics: ant-design, frontend, frontend-projects, portfolio-project, reactjs, tailwindcss, unique-projects
- Language: JavaScript
- Homepage: https://emoji-vault.vercel.app
- Size: 103 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# 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](https://emoji-vault.vercel.app)
---
## 🚀 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](https://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:
```bash
git clone https://github.com/rumaisanaveed/emoji-vault.git
```
2. Navigate to the project directory:
```bash
cd emoji-vault
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your web browser to view the app.
---
### 🍿 **Video**
You can watch a quick demo of **Emoji Vault** below:
https://github.com/user-attachments/assets/a66c5215-7371-4627-8dd8-5246175459ee
---