Final Thoughts and Learning Outcomes from the Project

This module summarizes what you learned and shows the final output.

Learning Outcome

By completing this project, you should be able to:

• Set up a React development environment (using Node.js and CRA).
• Create and compose React components (e.g. App and EmojiCard).
• Use React state (useState) and effects (useEffect) to manage data and lifecycle.
• Fetch data from a public API (EmojiHub) using the Fetch API.
• Implement search/filter logic in React.
• Apply CSS for a clean, responsive UI.
• Deploy a React app to Netlify with continuous deployment.

These outcomes match the objectives stated earlier: to “build a searchable interface using React components and state” and to “implement basic search and filter functionality”. You also got hands-on practice with copying data to the clipboard and showing user feedback.

Live link & Output Screenshot

You can see a running version of this calculator on Netlify.

Emoji Search App in React

Screenshot:

When the user types "love" in the search field, the app displays heart-related emojis as shown above. Clicking any emoji copies it to the clipboard (with a “Copied!” indicator). This demonstrates the working output of the Emoji Search App. The live site link provides a working demo of this behavior.

MCQs

1. Which hook is used to manage component state in React?
   A) useState
   B) useEffect
   C) useContext
   D) useReducer

   Answer:  A) useState

2. What is the main purpose of the Emoji Search App?
   A) Fetch and display user data
   B) Search and display emojis based on a query
   C) Play emoji-themed games
   D) Edit emoji images

   Answer: B) Search and display emojis based on a query

3. Which API endpoint gives all emojis in the EmojiHub API?
   A) /api/random
   B) /api/all
   C) /api/search
   D) /api/categories

   Answer: B) /api/all

4. How do you copy text to the clipboard in the app?
   A) navigator.clipboard.writeText(...)
   B) document.execCommand('copy')
   C) window.copyText()
   D) JSON.stringify()

   Answer: A) navigator.clipboard.writeText(...)

5. What build command and publish directory does Netlify use by default for Create React App?
   A) npm run build and dist
   B) react-scripts build and build
   C) npm start and public
   D) ng build and out

   Answer: B) react-scripts build and build

Resources

Want to master ReactJS and build your portfolio by creating web apps like this? Check out HCL GUVI’s IIT-M Pravartak Certified ReactJS Self-Paced Course, where you can master the art of building interactive user interfaces and web applications.

Additionally, if you want to understand how React works in a Full Stack environment, consider enrolling in HCL GUVI’s IIT-M Pravartak Certified Full Stack Development Course, where you’ll learn React, Node.js, MongoDB, and more with hands-on projects, expert mentorship, and placement support. Perfect for beginners and professionals looking to upskill.

Also, if you’re serious about mastering artificial intelligence in software development and want to apply it in real-world scenarios, don’t miss the chance to enroll in HCL GUVI’s IITM Pravartak and MongoDB Certified Online AI Software Development Course. Endorsed with NSDC certification, this course adds a globally recognized credential to your resume, a powerful edge that sets you apart in the competitive job market.