{"id":21675,"date":"2018-02-07T17:45:18","date_gmt":"2018-02-07T17:45:18","guid":{"rendered":"http:\/\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup"},"modified":"2025-03-30T13:57:58","modified_gmt":"2025-03-30T20:57:58","slug":"building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup","title":{"rendered":"Building a Smart AI Image Search Tool Using React – Part 2: UI Components and Server Setup"},"content":{"rendered":"

In our first article<\/a>, we built a part of the front-end of our image search tool with the focus mainly on the parent App.js stateful component.<\/p>\n

In this article – part two of a series – we will continue developing a AI image Search App, in which users can search for content in an image, not just the description. The app is built with React for UI interaction, Cloudinary for image upload and management and Algolia for search.<\/p>\n

We will show how to complete the app. I know you must be stoked, I am too<\/em>. We will be building the stateless components of our app and these components without state will mostly receive props from the parent component as with parent-child communication existing in React. Also the server-side of our app will be built and deployed to Webtask.<\/p>\n

Installation<\/h2>\n

All build tools and dependencies have been installed in the first part so we can move on with building.<\/p>\n

The Custom Stateless Components<\/h2>\n

The stateless components are the ImageList component and the modal component. These display the list of images fetched from Algolia and the upload modal interface respectively. The action of buttons on the interface have already been configured in the parent App.js component and will be passed down to the child stateless components via props as earlier stated.<\/p>\n

The ImageList Component<\/h3>\n

This component holds the images saved on the webtask server. In configuring the component, navigate to the ImageList.js file in the components folder and configure it like this:<\/p>\n

import<\/span> React from<\/span> 'react'<\/span>;\nimport<\/span> {Image, CloudinaryContext, Transformation} from<\/span> 'cloudinary-react'<\/span>;\nimport<\/span> '.\/ImageList.css'<\/span>;\nexport<\/span> default<\/span> ({ hit }) => {\n  return<\/span> (\n    <div<\/span> className<\/span>=\"card\"<\/span>><\/span>\n      <div<\/span> className<\/span>=\"card-content\"<\/span>><\/span>\n        <Image<\/span> publicId<\/span>={hit.public_id}<\/span>><\/span>\n            <Transformation<\/span> format<\/span>=\u201dauto\u201d<\/span> quality<\/span>=\u201dauto\u201d<\/span> \/><\/span>\n         <\/Image<\/span>><\/span>\n        <p<\/span>><\/span>{hit.description}<\/p<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we import all dependencies and its CSS file. Since the component is stateless, props are just passed as parameter to the export function which returns JSX elements. The Cloudinary React component exposes Image<\/code> and Transformation<\/code> which helps with fetching the image from the Cloudinary server and setting transformations respectively. The interesting thing is that the transformation sets format and quality to auto. This renders the best optimized format for a give client (browser) and also optimizes the image intelligently.<\/p>\n
The elements are styled with Bulma classes to image cards. It can be seen that the image src is the URL received from the hit prop and also its description. Style the ImageList cards with the ImageList.css file.<\/p>\n
.card<\/span> {\n  background<\/span>: #f5f5f5<\/span>;\n  display<\/span>: inline-block;\n  margin<\/span>: 0<\/span> 0<\/span> 1em<\/span>;\n  width<\/span>: 100%<\/span>;\n  cursor<\/span>: pointer;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
The Modal Component<\/h3>\n
The Modal component is the interface handling uploads, description creation and saving. Previously we created the Modal.js file in the components folder and its accompanying CSS file. Here we configure this empty file. In Modal.js, import all required dependencies and modules:<\/p>\n
import<\/span> React from<\/span> 'react'<\/span>;\nimport<\/span> classNames from<\/span> 'classnames'<\/span>;\nimport<\/span> '.\/Modal.css'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
classnames is a module (which we installed earlier) that is used to dynamically assign classes to an element in React. In the Modal component, create a function with a parameter \u2018isActive\u2019 and assign it to the variable modalClass. In the function, the classNames function is called and passed an object containing keys, modal<\/code> and is-active<\/code>. is-active<\/code> is the CSS class to be manipulated.<\/p>\n
...\nconst modalClass = isActive<\/span> =><\/span>\n  classNames({\n    modal<\/span>: true<\/span>,\n    'is-active'<\/span>: isActive\n  });\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we render the image upload interface and a close button:<\/p>\n
...\nexport default<\/span> ({\n  isActive,\n  toggleModal,\n  onDrop,\n  saveImage,\n  preview,\n  description,\n  pending,\n  handleDescriptionChange,\n  handleDropZoneClick\n}) => {\n  return<\/span> (\n    <div<\/span> className<\/span>={modalClass(isActive)}<\/span>><\/span>\n      <div<\/span> className<\/span>=\"modal-background\"<\/span> onClick<\/span>={toggleModal}<\/span> \/><\/span>\n      <div<\/span> className<\/span>=\"modal-content\"<\/span>><\/span>\n        <div<\/span> className<\/span>=\"modal-card\"<\/span>><\/span>\n          <header<\/span> className<\/span>=\"modal-card-head\"<\/span>><\/span>\n            <p<\/span> className<\/span>=\"modal-card-title\"<\/span>><\/span>Upload an image!<\/p<\/span>><\/span>\n            <button<\/span>\n              onClick<\/span>={toggleModal}<\/span>\n              className<\/span>=\"delete\"<\/span>\n              aria-label<\/span>=\"close\"<\/span>\n            \/><\/span>\n          <\/header<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n      <button<\/span>\n        onClick<\/span>={toggleModal}<\/span>\n        className<\/span>=\"modal-close is-large\"<\/span>\n        aria-label<\/span>=\"close\"<\/span>\n      \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Note the way the props are passed down to the components from the parent as parameters. The toggleModal<\/code> function is used to open and close the modal box as can be seen in both buttons at the top and bottom of the box. Since we have created just the Modal header, let\u2019s create the description, upload and save interface. Just after the closing header tag, create the description, upload and save features with:<\/p>\n
...\n<section<\/span> className<\/span>=\"modal-card-body\"<\/span>><\/span>\n  <div<\/span> className<\/span>=\"columns\"<\/span>><\/span>\n    <div<\/span> className<\/span>=\"column\"<\/span>><\/span>\n      <div<\/span> className<\/span>=\"field\"<\/span>><\/span>\n        <label<\/span> className<\/span>=\"label\"<\/span>><\/span>Short Description<\/label<\/span>><\/span>\n        <div<\/span> className<\/span>=\"control\"<\/span>><\/span>\n          <textarea<\/span>\n            className<\/span>=\"textarea\"<\/span>\n            value<\/span>={description}<\/span>\n            onChange<\/span>={handleDescriptionChange}<\/span>\n            placeholder<\/span>=\"Textarea\"<\/span>\n          \/><\/span>\n        <\/div<\/span>><\/span>\n        <button<\/span>\n          onClick<\/span>={saveImage}<\/span>\n          className<\/span>=\"button is-info is-margin-top\"<\/span>\n        ><\/span>\n          Save\n        <\/button<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> className<\/span>=\"column upload-column\"<\/span>><\/span>\n      {!preview ? (\n          <button<\/span>\n          onClick<\/span>={handleDropZoneClick}<\/span>\n          className<\/span>=\"button is-info is-margin-top\"<\/span>\n        ><\/span>\n          Upload\n        <\/button<\/span>><\/span>\n      ) : (\n        <img<\/span> src<\/span>={preview}<\/span> alt<\/span>=\"Preview\"<\/span> \/><\/span>\n      )}\n      <div<\/span>\n        className<\/span>=\"mainImageLoading\"<\/span>\n        style<\/span>={{<\/span> display:<\/span> pending<\/span> ? 'block<\/span>' :<\/span> 'none<\/span>' }}\n      \/><\/span>\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/section<\/span>><\/span>\n...\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
An input text area is used to handle description input with its value bound to description<\/code> and an event listener in onChange<\/code> is on hand to pick up any entries in the description field as specified in the handleDescriptionChange<\/code> function. The saveImage<\/code> function is assigned to a button which triggers once clicked. Now here\u2019s a tricky part, conditional rendering is used when displaying either the upload button or the uploaded image. The pending<\/code> state comes in handy here and if pending<\/code> is false (no image is uploaded), the upload button is visible and triggers the handleDropZoneClick<\/code> when clicked. f pending<\/code> is true, the uploaded image is displayed.<\/p>\n
Update the Modal.css file to this<\/a>. Now that the user interface is done, let\u2019s create the server to handle uploads.<\/p>\n
Configure Server.js<\/h2>\n
In the root directory of the project, create a file server.js, in here we will configure the server. In the server file, import all required dependencies with:<\/p>\n
const<\/span> Express = require<\/span>('express'<\/span>);\nconst<\/span> Webtask = require<\/span>('webtask-tools'<\/span>);\nconst<\/span> bodyParser = require<\/span>('body-parser'<\/span>);\nconst<\/span> cloudinary = require<\/span>('cloudinary'<\/span>);\nconst<\/span> multipart = require<\/span>('connect-multiparty'<\/span>);\nvar<\/span> algoliasearch = require<\/span>('algoliasearch'<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
As stated earlier, we will be making use of an express server to make the process easier.  Let\u2019s configure the server to use the required modules with:<\/p>\n
const<\/span> app = Express();\napp.use<\/span>(bodyParser<\/span>.urlencoded<\/span>({ extended<\/span>: false<\/span> }));\napp.use<\/span>(bodyParser<\/span>.json<\/span>());\n\/\/ Multipart middleware to<\/span>\n\/\/ parse files<\/span>\nconst<\/span> multipartMiddleware = multipart();\n\/\/ Replace credentials<\/span>\n\/\/ with your Cloudinary credentials<\/span>\ncloudinary.config({\n  cloud_name: 'cloud_name'<\/span>,\n  api_key: 'key'<\/span>,\n  api_secret: 'secret'<\/span>\n});\n\/\/ Configure Algolia<\/span>\n\/\/ with your Algolia credentials<\/span>\nvar<\/span> algoliaClient = algoliasearch(\n  'id'<\/span>,\n  'key'<\/span>\n);\nvar<\/span> algoliaIndex = algoliaClient.initIndex('index'<\/span>);\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Images are uploaded via Cloudinary. Configure the upload API endpoint next with:<\/p>\n
app.post('\/upload'<\/span>, multipartMiddleware, function<\/span>(req, res<\/span>) <\/span>{\n  \/\/ Upload image to cloudinary<\/span>\n  cloudinary.v2.uploader.upload(\n    \/\/ File to upload<\/span>\n    req.files.image.path,\n    \/\/ AWS tagging transformation<\/span>\n    \/\/ Activate here by selecting a plan:<\/span>\n    \/\/ https:\/\/cloudinary.com\/console\/addons#aws_rek_tagging<\/span>\n    { categorization<\/span>: 'aws_rek_tagging'<\/span> },\n    \/\/ Callback function<\/span>\n    function<\/span>(err, result<\/span>) <\/span>{\n      if<\/span> (err) return<\/span> res.send(err);\n      res.json({ data<\/span>: result });\n    }\n  );\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The uploaded files are saved to an Algolia index where search and retrieval occurs. This makes use of a post request and you configure it with:<\/p>\n
app.post('\/save'<\/span>, function<\/span>(req, res<\/span>) <\/span>{\n  \/\/ index record<\/span>\n  console<\/span>.log(req.body)\n  algoliaIndex.addObject(req.body, function<\/span>(err, content<\/span>) <\/span>{\n    if<\/span> (err) return<\/span> res.send(err);\n    res.json(content);\n  });\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Lastly, the app is exported to a Webtask with:<\/p>\n
module<\/span>.exports = Webtask.fromExpress(app)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This creates a webtask for our server.<\/p>\n
Launch the app on the local server by running:<\/p>\n
npm run start\n<\/code><\/span><\/pre>\n
\"Smart<\/p>\n
Conclusion<\/h2>\n
Now we have a AI image search tool that searches  uploaded images and looks for a pattern queried using the Algolia search tool. Cloudinary<\/a>, which is used to upload images, provides a robust upload widget that makes it even better and improves the developer experience. Feel free to play around with the app, suggest improvements or make improvements to the source code here<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21676,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,246],"class_list":["post-21675","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-react"],"acf":[],"yoast_head":"\nBuilding a Smart AI Image Search Tool Using React Part 2<\/title>\n<meta name=\"description\" content=\"Learn to Building a Smart AI Image Search Tool Using React. We will be building the stateless components of our app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Smart AI Image Search Tool Using React - Part 2: UI Components and Server Setup\" \/>\n<meta property=\"og:description\" content=\"Learn to Building a Smart AI Image Search Tool Using React. We will be building the stateless components of our app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-07T17:45:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-30T20:57:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building a Smart AI Image Search Tool Using React – Part 2: UI Components and Server Setup\",\"datePublished\":\"2018-02-07T17:45:18+00:00\",\"dateModified\":\"2025-03-30T20:57:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup\"},\"wordCount\":16,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"React\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2018\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup\",\"url\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup\",\"name\":\"Building a Smart AI Image Search Tool Using React Part 2\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA\",\"datePublished\":\"2018-02-07T17:45:18+00:00\",\"dateModified\":\"2025-03-30T20:57:58+00:00\",\"description\":\"Learn to Building a Smart AI Image Search Tool Using React. We will be building the stateless components of our app.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Smart AI Image Search Tool Using React – Part 2: UI Components and Server Setup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a Smart AI Image Search Tool Using React Part 2","description":"Learn to Building a Smart AI Image Search Tool Using React. We will be building the stateless components of our app.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup","og_locale":"en_US","og_type":"article","og_title":"Building a Smart AI Image Search Tool Using React - Part 2: UI Components and Server Setup","og_description":"Learn to Building a Smart AI Image Search Tool Using React. We will be building the stateless components of our app.","og_url":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup","og_site_name":"Cloudinary Blog","article_published_time":"2018-02-07T17:45:18+00:00","article_modified_time":"2025-03-30T20:57:58+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup"},"author":{"name":"","@id":""},"headline":"Building a Smart AI Image Search Tool Using React – Part 2: UI Components and Server Setup","datePublished":"2018-02-07T17:45:18+00:00","dateModified":"2025-03-30T20:57:58+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup"},"wordCount":16,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA","keywords":["Guest Post","React"],"inLanguage":"en-US","copyrightYear":"2018","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup","url":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup","name":"Building a Smart AI Image Search Tool Using React Part 2","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA","datePublished":"2018-02-07T17:45:18+00:00","dateModified":"2025-03-30T20:57:58+00:00","description":"Learn to Building a Smart AI Image Search Tool Using React. We will be building the stateless components of our app.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/building_a_smart_ai_image_search_tool_using_react_part_2_ui_components_and_server_setup#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Smart AI Image Search Tool Using React – Part 2: UI Components and Server Setup"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723568\/Web_Assets\/blog\/Building_a_Smart_AI_Image_Search_Part2\/Building_a_Smart_AI_Image_Search_Part2.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21675"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21675\/revisions"}],"predecessor-version":[{"id":37329,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21675\/revisions\/37329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21676"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}