React Emoji Search — World of Emoticons

Emoji search revolutionizes how users interact with digital content by enabling them to find information using emojis. By incorporating emojis into search queries, users can express their intent more intuitively and emotionally. This innovation caters to the growing demand for visual communication in digital platforms.

Emojis add context and personalization to searches, enhancing user experience and engagement. Search engines leverage algorithms to interpret emoji queries and match them with relevant content.

This feature extends across various platforms, including social media, messaging apps, and search engines. Emoji search fosters inclusivity by accommodating diverse linguistic backgrounds and bridging language barriers. Its simplicity appeals to a wide range of demographics, including younger generations and non-native speakers.

Businesses can capitalize on emoji search by optimizing their content for emoji-based queries, enhancing discoverability and user engagement. As emoji usage continues to rise globally, emoji search presents an innovative approach to information retrieval in the digital age. Its seamless integration into existing search functionalities enhances accessibility and user satisfaction.

About React Emoji Search Project:

The project utilizes React, a JavaScript library for building user interfaces, to create a dynamic and interactive web application. React’s component-based architecture approaches the development process by chunk down the user interface into reusable and maintainable components. This approach enhances code maintainability and scalability, making it ideal for big projects.

By leveraging React’s virtual DOM (Document Object Model), the project optimizes rendering performance, ensuring smooth and efficient updates to the UI.

This leads to a faster and more responsive user experience, critical for modern web applications. Furthermore, React’s declarative syntax simplifies state management and data flow, streamlining the development workflow and reducing the likelihood of bugs. Through the use of stateful and stateless components, the project can efficiently manage the application’s state and UI logic.

Prerequisite For React Emoji Search Project:

• React
• API Integration
• Knowledge of HTML and CSS
• JavasScript is important to know.
• Knowledge of function-based programming

About installation steps:

Link to download Visual Studio -

You can choose the appropriate installer for your operating system (Windows, macOS, or Linux) on the download page. Once it is installed please follow the following steps.

For the installation of React, I have explained some of the steps as follows:

1. The first step is to download the node( as it will help to install react) from the below link:
   The LTS version is recommendable: Nodejs
2. Now, check the version of the node in Windows by following the command on the terminal:

node --version or node -V

Also, check the npm version using the following command as it is a tool to download the react

npm  --version

3. Now, create one folder on the desktop as react, open the terminal inside the react app, and go to the react folder using the following command as `cd react` and run the command:

npm init react-app snapshot

4. cryptoapp is created, go inside the cryptoapp folder using the command `cd cryptoapp` and then npm starts and boom react will run the browser.
Your app react is successfully installed, let’s move towards project building.

Steps to Create React Emoji Search Project:

1. First, go to the Open Emoji API website create your API key, and move towards the integration of the API into React App.
2. After done with the above step, move toward the creation of the app. Import the necessary dependencies.

import React, { useState } from 'react';
import axios from 'axios';
import '../App.css';

3. Assign the API key that we obtained from the website where we created the API key.

const API_KEY = 'e4dc089c8fa2c64a18be7d867ba155d16901cf23';

4. The EmojiSearch component is a functional component in React.
It utilizes React hooks (useState) to manage state for slug, character, and errorMessage.

const EmojiSearch = () => {
  const [slug, setSlug] = useState('');
  const [character, setCharacter] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

5. The handleSearch function sends an asynchronous request to the emoji API using Axios. It updates the state with the character corresponding to the searched emoji if found, or sets an error message if not found.

const handleSearch = async () => {
    try {
      const response = await axios.get(`https://emoji-api.com/emojis?search=${slug}&access_key=${API_KEY}`);
      if (response.data.length > 0) {
        setCharacter(response.data[0].character);
        setErrorMessage('');
      } else {
        setCharacter('');
        setErrorMessage('Emoji not found');
      }
    }

6. The handleSearch function uses Axios to fetch emoji data based on the provided slug, updating the character state if found; otherwise, it sets an error message.

catch (error) {
      console.error('Error fetching emoji:', error);
      setCharacter('');
      setErrorMessage('Error fetching emoji');
    }
  };

7. The handleInputChange function updates the slug state based on the input value from the event.

const handleInputChange = (event) => {
    setSlug(event.target.value);
  };

8. This JSX code renders an input field and a button for searching emojis based on the slug. It also displays the resulting character or error message based on the search outcome.

<div className="input-container">
        <input type="text" value={slug} onChange={handleInputChange} placeholder="Enter emoji slug" />
        <button onClick={handleSearch}>Search</button>
      </div>
      {character && <div className="result">Character: <br/><span style={{fontSize: "120px"}}>{character}</span></div>}
      {errorMessage && <div className="error">{errorMessage}</div>}
</div>

Entire code of the above explanation:

Dashboard > index.js

import React, { useState } from 'react';
import axios from 'axios';
import '../App.css';

const API_KEY = 'e4dc089c8fa2c64a18be7d867ba155d16901cf23';

const EmojiSearch = () => {
  const [slug, setSlug] = useState('');
  const [character, setCharacter] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleSearch = async () => {
    try {
      const response = await axios.get(`https://emoji-api.com/emojis?search=${slug}&access_key=${API_KEY}`);
      if (response.data.length > 0) {
        setCharacter(response.data[0].character);
        setErrorMessage('');
      } else {
        setCharacter('');
        setErrorMessage('Emoji not found');
      }
    } catch (error) {
      console.error('Error fetching emoji:', error);
      setCharacter('');
      setErrorMessage('Error fetching emoji');
    }
  };

  const handleInputChange = (event) => {
    setSlug(event.target.value);
  };

  return (
    <div className="emoji-search-container">
      <h1>Emoji Search</h1>
      <div className="input-container">
        <input type="text" value={slug} onChange={handleInputChange} placeholder="Enter emoji slug" />
        <button onClick={handleSearch}>Search</button>
      </div>
      {character && <div className="result">Character: <br/><span style={{fontSize: "120px"}}>{character}</span></div>}
      {errorMessage && <div className="error">{errorMessage}</div>}
    </div>
  );
};

export default EmojiSearch;

App.css

.emoji-search-container {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.input-container {
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.result {
  font-size: 18px;
  margin-top: 10px;
}

.error {
  color: red;
  margin-top: 10px;
}

Usage of the Project:

• Download the zip file of the project and extract it.
• Navigate to the project directory using the command cd emojisearch.
• Perform npm install in the project and wait until the dependencies are installed.
• To run the project, use the command npm start.

React Emoji Search Project Output:

emoji search

not found emoji

Conclusion

In the world of texting and chatting online, people use little pictures called emojis to express their feelings or ideas. Sometimes it’s hard to find the exact emoji you want because there are so many of them.

Emoji search is like a tool that helps you quickly find the right emoji for what you want to say. So, if you’re looking for a heart to show love or a smiley face to show you’re happy, emoji search makes it easier to find them. It’s all about making online conversations smoother and more fun.

As technology advances, we find new ways to improve our digital communication, and emoji search is one of those cool developments.

Emoji search is like having a map to find the perfect emoji island in a sea of characters. It’s a shortcut to expressing yourself exactly how you want without getting lost in the vast ocean of options. With just a few taps or clicks, you can sail straight to the emoji you need, whether it’s a fire for excitement or a thinking face for contemplation. It’s like having a secret code to unlock the perfect symbol for every situation.