Requirements, and Technologies for the Emoji Search App

This lesson covers what tools and technologies you need before starting the project, as well as the inputs and outputs of the app.

Basic Requirements

To follow this project, you should have a few basic tools installed:

• Node.js and npm: Node.js is a JavaScript runtime that runs outside the browser. It is required to install and run React and other packages. Install the latest LTS (Long-Term Support) version of Node.js (e.g. ≥18.x). You can verify installation by running node -v and npm -v in a terminal.
• Code Editor: Any text editor or IDE (like Visual Studio Code) to write your code.
• Git and GitHub (optional but recommended): You will use Git to track your code, and GitHub to host the repository. (Basic git commands like git init, git add, git commit, git push will be used to upload your code.)
• Web Browser: A modern browser to test and view the app locally (usually at http://localhost:3000 when running React’s development server).

These requirements set up your development environment. Having Node.js ensures you can use Create React App (CRA), which bootstraps a React project structure.

Tech Stack Used

The project uses the following technologies and libraries:

• React – a JavaScript library for building UI components. We will use Create React App to set up the project.
• JavaScript (ES6+) – The main programming language for the logic.
• HTML & CSS – Standard web languages to structure and style the UI.
• Fetch API (or Axios) – to retrieve data from a public emoji API. We will use the browser’s Fetch API (a modern way to make HTTP requests).
• Public Emoji API – an open API to get emoji data. For example, EmojiHub provides a free endpoint to fetch all emojis (https://emojihub.yurace.pro/api/all) and to search by name (https://emojihub.yurace.pro/api/search?q={query}). (We will use this API for searching emojis.)
• Netlify – a hosting service used to deploy the finished project live on the web.

In summary, our stack is a typical front-end setup: a React-based user interface that calls a RESTful emoji API and is styled with CSS. React manages the UI and state, while the public API provides the emoji data.

Input

The input for our Emoji Search App is the search query entered by the user. We will capture this input via an HTML <input type="text"> field in React. As the user types into the search box, the app will take that string (the search keyword or phrase) and use it to filter the list of emojis. In code, this value is stored in React state (e.g. searchTerm) and updated on each keystroke (onChange event).

Output

The output of the app is a list of matching emojis displayed on the page. Once the app fetches the emoji data from the API, it will filter that data based on the search input and render the filtered emojis. Each emoji is shown as a card (with the emoji graphic and name). Additionally, when a user clicks an emoji card, the app copies that emoji to the clipboard and shows a “Copied!” message. In short, given a text query input, the app outputs (renders) the corresponding emojis that match the search.