title
React & Material UI Project Using The PixaBay API

description
In this project we will use React along with Material UI to build an image finder application that uses the PixaBay API to fetch images based on a query string. We will also implement a Dialog box from Material UI to view the large image Code For This Project: https://github.com/bradtraversy/pixabay_image_finder 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia

detail
{'title': 'React & Material UI Project Using The PixaBay API', 'heatmap': [{'end': 552.541, 'start': 520.113, 'weight': 0.739}, {'end': 645.848, 'start': 577.557, 'weight': 1}, {'end': 697.465, 'start': 657.335, 'weight': 0.904}, {'end': 1052.813, 'start': 984.301, 'weight': 0.961}, {'end': 1485.714, 'start': 1445.511, 'weight': 0.895}, {'end': 1597.89, 'start': 1558.334, 'weight': 0.988}, {'end': 1714.712, 'start': 1680.52, 'weight': 0.785}, {'end': 2296.888, 'start': 2229.931, 'weight': 0.895}], 'summary': 'Learn how to build a react image search app using pixabay api, integrating material ui with examples, setting up react app with material ui and axios, implementing ui components, image results component, grid list, mapping images, and image handling with ui implementation.', 'chapters': [{'end': 71.43, 'segs': [{'end': 50.733, 'src': 'embed', 'start': 7.679, 'weight': 0, 'content': [{'end': 8.62, 'text': "Hey, what's up, guys?", 'start': 7.679, 'duration': 0.941}, {'end': 18.204, 'text': "so in this project we're going to be building a react application that reaches out to the pixabay api and brings in images by search.", 'start': 8.62, 'duration': 9.584}, {'end': 26.048, 'text': "okay, so it's basically an image searching app and we're also going to be using material ui, which is a library.", 'start': 18.204, 'duration': 7.844}, {'end': 26.669, 'text': "it's basically.", 'start': 26.048, 'duration': 0.621}, {'end': 35.51, 'text': "It allows us to use the material design Google's material design through react components instead of bringing in, let's say,", 'start': 27.709, 'duration': 7.801}, {'end': 40.651, 'text': 'materialized CSS and just manually putting in the classes and stuff like that.', 'start': 35.51, 'duration': 5.141}, {'end': 48.213, 'text': 'We can actually have premade components for things like the app bar, for things like the grid buttons and all that.', 'start': 40.711, 'duration': 7.502}, {'end': 50.733, 'text': "And there's some pretty good documentation here as well.", 'start': 48.473, 'duration': 2.26}], 'summary': 'Building a react app to search images from pixabay using material ui.', 'duration': 43.054, 'max_score': 7.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw7679.jpg'}], 'start': 7.679, 'title': 'Building react image search app', 'summary': 'Focuses on building a react application that uses pixabay api to search for images, integrating material ui library with good documentation and examples.', 'chapters': [{'end': 71.43, 'start': 7.679, 'title': 'Building react image search app', 'summary': "Focuses on building a react application that uses pixabay api to search for images, integrating material ui library which allows using google's material design through pre-made components, with good documentation and examples.", 'duration': 63.751, 'highlights': ['The project involves building a React application that reaches out to the Pixabay API to bring in images by search. This demonstrates the main goal of the project, emphasizing the use of the Pixabay API for fetching images.', "Material UI library is utilized to use Google's material design through pre-made components, such as app bar, grid buttons, and more, with good documentation and examples. Highlights the integration of Material UI library, its benefits of using pre-made components, and the availability of comprehensive documentation and examples.", 'Material UI eliminates the need for manually putting in classes and allows the use of components for various UI elements. Emphasizes the convenience of using Material UI to avoid manual CSS styling and the utilization of pre-built components for different UI elements.']}], 'duration': 63.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw7679.jpg', 'highlights': ['The project involves building a React application that reaches out to the Pixabay API to bring in images by search.', "Material UI library is utilized to use Google's material design through pre-made components, such as app bar, grid buttons, and more, with good documentation and examples.", 'Material UI eliminates the need for manually putting in classes and allows the use of components for various UI elements.']}, {'end': 901.969, 'segs': [{'end': 103.981, 'src': 'embed', 'start': 71.47, 'weight': 2, 'content': [{'end': 74.533, 'text': "Let's let's give a quick example or a quick demo of this.", 'start': 71.47, 'duration': 3.063}, {'end': 77.556, 'text': "Let's say we wanted to search for images of dogs.", 'start': 74.794, 'duration': 2.762}, {'end': 79.458, 'text': "I'll go ahead and just start typing.", 'start': 77.997, 'duration': 1.461}, {'end': 87.125, 'text': "And immediately as I start typing, it's going to reach out to the API and bring back anything that matches that query.", 'start': 79.498, 'duration': 7.627}, {'end': 88.987, 'text': "So I'll just say DOG.", 'start': 87.205, 'duration': 1.782}, {'end': 92.33, 'text': 'And now you can see we have a list of dogs.', 'start': 89.487, 'duration': 2.843}, {'end': 95.353, 'text': 'all right and we can also change the amount.', 'start': 93.491, 'duration': 1.862}, {'end': 97.855, 'text': "let's say we wanted only five pictures.", 'start': 95.353, 'duration': 2.502}, {'end': 103.981, 'text': "let's search for computer and you'll see that we'll get five images of computers.", 'start': 97.855, 'duration': 6.126}], 'summary': 'Demo of image search api: instantly retrieving 5 images of dogs and computers.', 'duration': 32.511, 'max_score': 71.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw71470.jpg'}, {'end': 149.168, 'src': 'embed', 'start': 118.778, 'weight': 1, 'content': [{'end': 121.019, 'text': 'And then also the user that uploaded it.', 'start': 118.778, 'duration': 2.241}, {'end': 126.16, 'text': 'And if we look at the documentation real quick for Pixabay, the API is actually really nice.', 'start': 121.099, 'duration': 5.061}, {'end': 127.22, 'text': "There's a lot of options.", 'start': 126.18, 'duration': 1.04}, {'end': 136.182, 'text': 'And then you get all this data back, okay, you get the hit the total hits, and then the hits is the actual array of images of objects.', 'start': 127.64, 'duration': 8.542}, {'end': 146.027, 'text': 'And it has the URLs, it has preview URLs, it has the height and width, the views, the downloads, the user, the comments, all that stuff.', 'start': 136.822, 'duration': 9.205}, {'end': 149.168, 'text': 'So you can extend this application if you want.', 'start': 146.087, 'duration': 3.081}], 'summary': 'Pixabay api provides extensive data including total hits, image details, user, views, and downloads for application extension.', 'duration': 30.39, 'max_score': 118.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw118778.jpg'}, {'end': 300.272, 'src': 'embed', 'start': 267.349, 'weight': 3, 'content': [{'end': 270.31, 'text': "And it's not letting me clear.", 'start': 267.349, 'duration': 2.961}, {'end': 271.551, 'text': 'I hate when it does this.', 'start': 270.33, 'duration': 1.221}, {'end': 272.851, 'text': "I don't know why it does this.", 'start': 271.591, 'duration': 1.26}, {'end': 278.833, 'text': 'All right, so now what we want to do is just install a couple dependencies.', 'start': 274.772, 'duration': 4.061}, {'end': 281.253, 'text': "We're going to need material UI.", 'start': 279.473, 'duration': 1.78}, {'end': 285.495, 'text': "And then we're also going to be using Axios to make our requests.", 'start': 281.813, 'duration': 3.682}, {'end': 292.076, 'text': "So let's go ahead and say npm install or i Axios and also material-ui.", 'start': 285.555, 'duration': 6.521}, {'end': 300.272, 'text': 'and those will get added to our package.json file.', 'start': 296.85, 'duration': 3.422}], 'summary': 'Installing material ui and axios using npm to our package.json file.', 'duration': 32.923, 'max_score': 267.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw267349.jpg'}, {'end': 552.541, 'src': 'heatmap', 'start': 520.113, 'weight': 0.739, 'content': [{'end': 527.718, 'text': 'And it allows you to just really quickly create React components and just all kinds of stuff, stuff to do with GraphQL.', 'start': 520.113, 'duration': 7.605}, {'end': 533.033, 'text': 'So, I can just say rfctab and it will give me a functional component.', 'start': 528.491, 'duration': 4.542}, {'end': 535.954, 'text': 'I do want to clean this up a little bit.', 'start': 534.053, 'duration': 1.901}, {'end': 540.456, 'text': 'For example, I want to take the export default and just cut that out,', 'start': 535.994, 'duration': 4.462}, {'end': 552.541, 'text': "and let's create a variable called navbar and set that to our functional component, and then we'll export nav bar down here and then,", 'start': 540.456, 'duration': 12.085}], 'summary': 'An efficient tool for creating react components and dealing with graphql, enabling quick creation of functional components and streamlining code cleanup.', 'duration': 32.428, 'max_score': 520.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw520113.jpg'}, {'end': 606.73, 'src': 'embed', 'start': 577.557, 'weight': 0, 'content': [{'end': 581.759, 'text': "And then right here in our arrow function, we'll just go ahead and call that component whoops.", 'start': 577.557, 'duration': 4.202}, {'end': 586.821, 'text': "So we want app bar, and we're just going to put in a title.", 'start': 582.939, 'duration': 3.882}, {'end': 597.605, 'text': "Okay, so for our title, we'll say Pixabay image finder, and we'll save this component.", 'start': 586.841, 'duration': 10.764}, {'end': 599.1, 'text': 'All right, very, very simple.', 'start': 597.878, 'duration': 1.222}, {'end': 601.963, 'text': "And then we'll go to our app.js.", 'start': 599.12, 'duration': 2.843}, {'end': 603.686, 'text': 'And of course, we need to bring this in.', 'start': 602.003, 'duration': 1.683}, {'end': 606.73, 'text': "So we'll go up here and we'll say import.", 'start': 604.447, 'duration': 2.283}], 'summary': "Creating a simple component 'app bar' with the title 'pixabay image finder' in a javascript application.", 'duration': 29.173, 'max_score': 577.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw577557.jpg'}, {'end': 645.848, 'src': 'heatmap', 'start': 577.557, 'weight': 1, 'content': [{'end': 581.759, 'text': "And then right here in our arrow function, we'll just go ahead and call that component whoops.", 'start': 577.557, 'duration': 4.202}, {'end': 586.821, 'text': "So we want app bar, and we're just going to put in a title.", 'start': 582.939, 'duration': 3.882}, {'end': 597.605, 'text': "Okay, so for our title, we'll say Pixabay image finder, and we'll save this component.", 'start': 586.841, 'duration': 10.764}, {'end': 599.1, 'text': 'All right, very, very simple.', 'start': 597.878, 'duration': 1.222}, {'end': 601.963, 'text': "And then we'll go to our app.js.", 'start': 599.12, 'duration': 2.843}, {'end': 603.686, 'text': 'And of course, we need to bring this in.', 'start': 602.003, 'duration': 1.683}, {'end': 606.73, 'text': "So we'll go up here and we'll say import.", 'start': 604.447, 'duration': 2.283}, {'end': 621.588, 'text': "navbar from and we want to go inside of our components folder inside navbar and we want our navbar component and then I'm just gonna stick that.", 'start': 608.596, 'duration': 12.992}, {'end': 622.068, 'text': "let's see.", 'start': 621.588, 'duration': 0.48}, {'end': 631.837, 'text': "in this return we'll just go ahead and say navbar like that, okay, and I'm using prettier.", 'start': 622.068, 'duration': 9.769}, {'end': 635.26, 'text': 'so when I save, you see that it automatically formats.', 'start': 631.837, 'duration': 3.423}, {'end': 645.848, 'text': "Now we're getting an error here because we actually need to bring in the MUI or the Material UI theme provider,", 'start': 636.843, 'duration': 9.005}], 'summary': 'Creating a navbar component for pixabay image finder app using material ui.', 'duration': 68.291, 'max_score': 577.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw577557.jpg'}, {'end': 697.465, 'src': 'heatmap', 'start': 657.335, 'weight': 0.904, 'content': [{'end': 675.609, 'text': "Let's go right here and let's say import MUI theme provider from and it's going to be from material, UI, material, UI slash styles,", 'start': 657.335, 'duration': 18.274}, {'end': 684.457, 'text': 'slash MUI theme provider and then what we have to do is wrap around everything in our render or in our return.', 'start': 675.609, 'duration': 8.848}, {'end': 691.363, 'text': "so I'm actually going to just Let's replace this with some parentheses.", 'start': 684.457, 'duration': 6.906}, {'end': 697.465, 'text': 'And we want to put in our MUI theme provider, beginning tag, and then the ending tag.', 'start': 691.703, 'duration': 5.762}], 'summary': 'Import mui theme provider from material ui and wrap around in render or return.', 'duration': 40.13, 'max_score': 657.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw657335.jpg'}], 'start': 71.47, 'title': 'Building pixabay image finder app and setting up react app with material ui and axios', 'summary': 'Covers building a pixabay image finder app using react with the need for a pixabay account for api key, and setting up a react app with material ui and axios, including installing dependencies, updating npm, and creating components.', 'chapters': [{'end': 267.329, 'start': 71.47, 'title': 'Building pixabay image finder app', 'summary': 'Demonstrates building a pixabay image finder app using react, requiring a pixabay account for api key, creating a react application using create-react-app, and accessing the pixabay api to retrieve images and related data.', 'duration': 195.859, 'highlights': ['The chapter demonstrates building a Pixabay image finder app using React, requiring a Pixabay account for API key, creating a React application using create-react-app, and accessing the Pixabay API to retrieve images and related data.', 'The Pixabay API provides various data such as total hits, the array of images with URLs, preview URLs, height and width, views, downloads, user, and comments, allowing for the extension of the application with additional data.', 'A demonstration of using the Pixabay API to search for images based on user input and changing the amount of displayed images, showing the functionality of reaching out to the API and receiving matching results.']}, {'end': 901.969, 'start': 267.349, 'title': 'Setting up react app with material ui and axios', 'summary': 'Outlines the process of setting up a react app with material ui and axios, including installing dependencies, updating npm, and creating components with detailed instructions and code snippets.', 'duration': 634.62, 'highlights': ['The chapter outlines the process of setting up a React app with Material UI and Axios The transcript provides detailed instructions on setting up a React app, including installing material UI and Axios dependencies.', 'including installing dependencies, updating npm, and creating components with detailed instructions and code snippets The speaker discusses the process of installing dependencies, updating npm, and creating components with detailed instructions and code snippets.', 'the speaker discusses the process of installing dependencies The speaker explains the process of installing dependencies such as material UI and Axios for the React app.', 'updating npm and creating components with detailed instructions and code snippets The transcript provides instructions on updating npm and creating components with detailed code snippets.']}], 'duration': 830.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw71470.jpg', 'highlights': ['The chapter demonstrates building a Pixabay image finder app using React, requiring a Pixabay account for API key and accessing the Pixabay API to retrieve images and related data.', 'The Pixabay API provides various data such as total hits, the array of images with URLs, preview URLs, height and width, views, downloads, user, and comments, allowing for the extension of the application with additional data.', 'A demonstration of using the Pixabay API to search for images based on user input and changing the amount of displayed images, showing the functionality of reaching out to the API and receiving matching results.', 'The chapter outlines the process of setting up a React app with Material UI and Axios, including installing dependencies, updating npm, and creating components with detailed instructions and code snippets.']}, {'end': 1579.742, 'segs': [{'end': 951.256, 'src': 'embed', 'start': 925.099, 'weight': 0, 'content': [{'end': 931.625, 'text': "so we're using the text field component from material UI and we're gonna add some properties here.", 'start': 925.099, 'duration': 6.526}, {'end': 938.89, 'text': "so I'm gonna add a name of search text And oops, I don't want a comma there.", 'start': 931.625, 'duration': 7.265}, {'end': 947.995, 'text': 'We want a value of this.state.searchText.', 'start': 939.931, 'duration': 8.064}, {'end': 951.256, 'text': "Okay, so it's going to be directly connected to that state value.", 'start': 948.075, 'duration': 3.181}], 'summary': 'Using material ui text field component to connect search text to state value.', 'duration': 26.157, 'max_score': 925.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw925099.jpg'}, {'end': 1052.813, 'src': 'heatmap', 'start': 974.471, 'weight': 1, 'content': [{'end': 981.717, 'text': "and then the next one is going to be full width, because i want the input to go all the way across and we're going to set that to true, All right.", 'start': 974.471, 'duration': 7.246}, {'end': 984.281, 'text': 'So if we save this, it should actually show up.', 'start': 981.858, 'duration': 2.423}, {'end': 986.143, 'text': "OK, so there's our input.", 'start': 984.301, 'duration': 1.842}, {'end': 990.349, 'text': "Good And underneath that, we're going to put our select field.", 'start': 986.203, 'duration': 4.146}, {'end': 991.05, 'text': 'All right.', 'start': 990.369, 'duration': 0.681}, {'end': 994.054, 'text': "Now there's one more thing we need to bring in to use a select.", 'start': 991.11, 'duration': 2.944}, {'end': 996.156, 'text': "I'll actually show you in the documentation.", 'start': 994.114, 'duration': 2.042}, {'end': 998.68, 'text': 'If we go to select field.', 'start': 996.357, 'duration': 2.323}, {'end': 1010.186, 'text': "and we look at the code here, we need to bring in this menu item because for each we basically don't use option like an option tag in standard HTML.", 'start': 999.861, 'duration': 10.325}, {'end': 1011.827, 'text': 'We use these menu items.', 'start': 1010.226, 'duration': 1.601}, {'end': 1014.308, 'text': 'So we need to bring that in as well.', 'start': 1012.427, 'duration': 1.881}, {'end': 1017.67, 'text': "So I'll just copy that line and bring that in.", 'start': 1014.348, 'duration': 3.322}, {'end': 1019.13, 'text': 'All right.', 'start': 1017.69, 'duration': 1.44}, {'end': 1022.452, 'text': "And then what I'll do is copy.", 'start': 1019.23, 'duration': 3.222}, {'end': 1024.973, 'text': "Let's see.", 'start': 1022.472, 'duration': 2.501}, {'end': 1028.535, 'text': "We'll go ahead and just copy the select field here.", 'start': 1025.032, 'duration': 3.503}, {'end': 1031.242, 'text': "and we'll go.", 'start': 1030.642, 'duration': 0.6}, {'end': 1039.566, 'text': "let's just add a line break and paste that in, and I'm just going to add another line break under it.", 'start': 1031.242, 'duration': 8.324}, {'end': 1052.813, 'text': "so for this select field it's going to have a name of amount floating label text.", 'start': 1039.566, 'duration': 13.247}], 'summary': 'Setting up full-width input and select fields with specific attributes and bringing in additional code for the select field.', 'duration': 50.502, 'max_score': 974.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw974471.jpg'}, {'end': 1159.778, 'src': 'embed', 'start': 1126.414, 'weight': 3, 'content': [{'end': 1128.696, 'text': 'Every time we type, it should update that state.', 'start': 1126.414, 'duration': 2.282}, {'end': 1135.941, 'text': "So let's go ahead and create a function called onTextChange, and we're going to use an arrow function.", 'start': 1128.736, 'duration': 7.205}, {'end': 1138.983, 'text': "So as a parameter, it'll take in the event.", 'start': 1136.582, 'duration': 2.401}, {'end': 1142.247, 'text': "and then we'll set that to our function.", 'start': 1140.044, 'duration': 2.203}, {'end': 1151.28, 'text': "Alright, and we're using arrows here so that we don't have to do .bind this because we would have to do that if we didn't use arrows.", 'start': 1142.267, 'duration': 9.013}, {'end': 1159.778, 'text': 'So from here we want to say this.setState, And basically, in here we want to set,', 'start': 1152.181, 'duration': 7.597}], 'summary': 'Creating an ontextchange function to update state using arrow function.', 'duration': 33.364, 'max_score': 1126.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw1126414.jpg'}, {'end': 1401.51, 'src': 'embed', 'start': 1374.614, 'weight': 4, 'content': [{'end': 1379.217, 'text': 'Safe search, a flag indicating that only images suitable for all ages be returned.', 'start': 1374.614, 'duration': 4.603}, {'end': 1382.079, 'text': "That's what I figured it was, but I wasn't sure.", 'start': 1379.237, 'duration': 2.842}, {'end': 1385.121, 'text': 'So no, I guess, inappropriate images.', 'start': 1382.86, 'duration': 2.261}, {'end': 1392.405, 'text': "All right, so now that we have that inside our Axios.get, it's going to give us a promise.", 'start': 1386.141, 'duration': 6.264}, {'end': 1394.606, 'text': 'So, of course, we want a .then.', 'start': 1392.485, 'duration': 2.121}, {'end': 1398.148, 'text': "And in our .then, it's going to give us a response.", 'start': 1395.466, 'duration': 2.682}, {'end': 1401.51, 'text': 'And then what we want to do is we want to set the state.', 'start': 1398.868, 'duration': 2.642}], 'summary': 'Implementing safe search flag for appropriate images in axios.get', 'duration': 26.896, 'max_score': 1374.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw1374614.jpg'}, {'end': 1485.714, 'src': 'heatmap', 'start': 1445.511, 'weight': 0.895, 'content': [{'end': 1452.695, 'text': "and let's just console.log the error all right.", 'start': 1445.511, 'duration': 7.184}, {'end': 1468.197, 'text': "so now, if we save this, Let's before, before we test it out, let's go to our render and let's just console dot, log this dot state.", 'start': 1452.695, 'duration': 15.502}, {'end': 1476.259, 'text': "OK, so now we'll go back to our application and let's open up our console here.", 'start': 1470.257, 'duration': 6.002}, {'end': 1485.714, 'text': "And you can see it's on, it's, it's logging our state and what we want to look at is images.", 'start': 1480.693, 'duration': 5.021}], 'summary': 'Console.log error and state to test and debug application.', 'duration': 40.203, 'max_score': 1445.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw1445511.jpg'}], 'start': 902.389, 'title': 'Implementing ui components', 'summary': 'Covers integrating text field component from material ui with properties like name, value, and onchange, and setting floating label text. it also details implementing input and select fields in a web application using react, including handling user input, making api requests, and updating the state.', 'chapters': [{'end': 974.471, 'start': 902.389, 'title': 'Integrating text field component from material ui', 'summary': 'Covers the integration of the text field component from material ui, including adding properties like name, value, and onchange, to connect it directly to the state value, and setting the floating label text for search functionality.', 'duration': 72.082, 'highlights': ['The chapter covers the integration of the text field component from Material UI, including adding properties like name, value, and onChange, to connect it directly to the state value, and setting the floating label text for search functionality.']}, {'end': 1579.742, 'start': 974.471, 'title': 'Implementing input and select fields', 'summary': 'Details the process of implementing input and select fields in a web application using react, including setting up the fields, handling user input, making api requests, and updating the state based on the responses.', 'duration': 605.271, 'highlights': ['The chapter explains the process of setting up input and select fields in a web application using React, including configuring the fields to display and handle user input, such as setting the width and default values. (relevance: 5)', 'It details the usage of menu items in the select field instead of standard HTML option tags, with specific values and strings assigned to the menu items. (relevance: 4)', 'The chapter demonstrates the implementation of a function, onTextChange, to handle and update the state based on user input, using arrow functions and event parameters. (relevance: 3)', 'It illustrates the integration of Axios for making API requests, and the construction of the request URL with parameters such as API key, search text, image type, amount, and safe search. (relevance: 2)', 'The chapter discusses the process of handling API responses using .then and .catch methods, updating the state with the retrieved data, and logging the error in case of failure. (relevance: 1)']}], 'duration': 677.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw902389.jpg', 'highlights': ['The chapter covers the integration of the text field component from Material UI, including adding properties like name, value, and onChange, to connect it directly to the state value, and setting the floating label text for search functionality.', 'The chapter explains the process of setting up input and select fields in a web application using React, including configuring the fields to display and handle user input, such as setting the width and default values.', 'It details the usage of menu items in the select field instead of standard HTML option tags, with specific values and strings assigned to the menu items.', 'The chapter demonstrates the implementation of a function, onTextChange, to handle and update the state based on user input, using arrow functions and event parameters.', 'It illustrates the integration of Axios for making API requests, and the construction of the request URL with parameters such as API key, search text, image type, amount, and safe search.']}, {'end': 2023.38, 'segs': [{'end': 1669.497, 'src': 'embed', 'start': 1604.793, 'weight': 0, 'content': [{'end': 1610.636, 'text': 'And we want to go outside of the current folder into image dash results.', 'start': 1604.793, 'duration': 5.843}, {'end': 1612.817, 'text': 'And then we want to load image results.', 'start': 1610.936, 'duration': 1.881}, {'end': 1617.939, 'text': 'Did I call it image result? I did.', 'start': 1613.697, 'duration': 4.242}, {'end': 1620.62, 'text': "Let's add an S onto that.", 'start': 1619.2, 'duration': 1.42}, {'end': 1623.242, 'text': 'Like that.', 'start': 1620.64, 'duration': 2.602}, {'end': 1623.762, 'text': 'All right.', 'start': 1623.262, 'duration': 0.5}, {'end': 1630.484, 'text': "So we bring image results in and then we're going to go down.", 'start': 1626.044, 'duration': 4.44}, {'end': 1638.16, 'text': "See, we're going to go right under this line break and we basically we want to put a conditional.", 'start': 1633.277, 'duration': 4.883}, {'end': 1640.141, 'text': "So I'm going to use a ternary operator.", 'start': 1638.2, 'duration': 1.941}, {'end': 1645.004, 'text': "We're going to say if this dot state dot images dot length.", 'start': 1640.161, 'duration': 4.843}, {'end': 1648.246, 'text': 'So this is an array of images.', 'start': 1646.285, 'duration': 1.961}, {'end': 1657.332, 'text': 'If the length is greater than zero, then we want to show the image results component.', 'start': 1648.486, 'duration': 8.846}, {'end': 1667.457, 'text': 'OK, and then we obviously that needs to that needs to know the images, images to load.', 'start': 1662.176, 'duration': 5.281}, {'end': 1669.497, 'text': "So we're going to pass those in as a property.", 'start': 1667.477, 'duration': 2.02}], 'summary': 'Loading image results and showing component based on image array length.', 'duration': 64.704, 'max_score': 1604.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw1604793.jpg'}, {'end': 1740.544, 'src': 'heatmap', 'start': 1680.52, 'weight': 2, 'content': [{'end': 1684.48, 'text': 'OK So, yeah, that looks good.', 'start': 1680.52, 'duration': 3.96}, {'end': 1687.741, 'text': "We'll go ahead and save and we'll get some error here.", 'start': 1684.5, 'duration': 3.241}, {'end': 1700.306, 'text': "if we try to search for something because there's nothing inside of our image results, okay, it's basically saying that nothing's exported,", 'start': 1689.221, 'duration': 11.085}, {'end': 1703.307, 'text': 'which is true.', 'start': 1700.306, 'duration': 3.001}, {'end': 1714.712, 'text': "so let's go back and let's go into our image results and let's create a class-based component called image results came in,", 'start': 1703.307, 'duration': 11.405}, {'end': 1727.477, 'text': "export it down at the bottom here, And usually you do this if you're adding prop types and stuff like that.", 'start': 1714.712, 'duration': 12.765}, {'end': 1731.379, 'text': 'But I do it anyways.', 'start': 1729.398, 'duration': 1.981}, {'end': 1734, 'text': "It's just the format that I like.", 'start': 1731.459, 'duration': 2.541}, {'end': 1735.641, 'text': "I don't like to export it up here.", 'start': 1734.04, 'duration': 1.601}, {'end': 1740.544, 'text': 'And speaking of that, we should add a prop type here for images.', 'start': 1737.542, 'duration': 3.002}], 'summary': 'Creating a class-based component called image results and adding a prop type for images.', 'duration': 37.237, 'max_score': 1680.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw1680520.jpg'}, {'end': 1819.085, 'src': 'embed', 'start': 1790.045, 'weight': 3, 'content': [{'end': 1793.028, 'text': 'We actually have quite a few things we want to bring in from material UI.', 'start': 1790.045, 'duration': 2.983}, {'end': 1799.673, 'text': "So let's say imports and we're going to bring in two things from the grid list.", 'start': 1795.329, 'duration': 4.344}, {'end': 1804.997, 'text': 'We want the grid list itself and we also want the grid title.', 'start': 1800.073, 'duration': 4.924}, {'end': 1808.42, 'text': "OK, so that's going to be from.", 'start': 1806.879, 'duration': 1.541}, {'end': 1819.085, 'text': 'material dash ui slash grid list.', 'start': 1811.4, 'duration': 7.685}], 'summary': "Importing two items from material ui's grid list for development.", 'duration': 29.04, 'max_score': 1790.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw1790045.jpg'}, {'end': 1956.126, 'src': 'embed', 'start': 1929.11, 'weight': 4, 'content': [{'end': 1932.612, 'text': 'and then we make our request and then that array gets filled.', 'start': 1929.11, 'duration': 3.502}, {'end': 1934.333, 'text': "so we don't we want this to run.", 'start': 1932.612, 'duration': 1.721}, {'end': 1937.655, 'text': 'if that, if, if it actually has images.', 'start': 1934.333, 'duration': 3.322}, {'end': 1951.562, 'text': "so What we're going to do is, above the return inside the render, we're going to initialize a variable called ImageListContent.", 'start': 1937.655, 'duration': 13.907}, {'end': 1954.504, 'text': "We're going to use let here because we're not defining it.", 'start': 1952.222, 'duration': 2.282}, {'end': 1956.126, 'text': "If you use const, you're going to get an error.", 'start': 1954.544, 'duration': 1.582}], 'summary': 'Initializing imagelistcontent variable inside render to avoid errors.', 'duration': 27.016, 'max_score': 1929.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw1929110.jpg'}], 'start': 1579.742, 'title': 'Implementing image results component and creating image results component', 'summary': 'Details the process of implementing an image results component, including using a ternary operator to show the component if the array of images is greater than zero, and passing the images as a property, to load the images and handle cases when no images are present. it also covers creating a class-based component for image results, adding prop types, importing necessary components from material ui, and checking for images in the render function.', 'chapters': [{'end': 1703.307, 'start': 1579.742, 'title': 'Implementing image results component', 'summary': 'Details the process of implementing an image results component, including using a ternary operator to show the component if the array of images is greater than zero, and passing the images as a property, to load the images and handle cases when no images are present.', 'duration': 123.565, 'highlights': ["Using a ternary operator to show the image results component if the array of images is greater than zero, with the property 'images' passed in to load the images. (e.g. images.length > 0)", "Bringing the image results component into the current project and specifying the directory to load image results from, including adding an 'S' to 'image result' and handling the case when no images are present."]}, {'end': 2023.38, 'start': 1703.307, 'title': 'Creating image results component', 'summary': 'Covers creating a class-based component for image results, adding prop types, importing necessary components from material ui, and checking for images in the render function.', 'duration': 320.073, 'highlights': ['Creating a class-based component for image results and adding prop types for images', 'Importing necessary components from material UI including grid list, grid title, icon button, zoom in icon, dialog, and flat button', 'Checking for images in the render function and setting the image list content accordingly']}], 'duration': 443.638, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw1579742.jpg', 'highlights': ["Using a ternary operator to show the image results component if the array of images is greater than zero, with the property 'images' passed in to load the images. (e.g. images.length > 0)", "Bringing the image results component into the current project and specifying the directory to load image results from, including adding an 'S' to 'image result' and handling the case when no images are present.", 'Creating a class-based component for image results and adding prop types for images', 'Importing necessary components from material UI including grid list, grid title, icon button, zoom in icon, dialog, and flat button', 'Checking for images in the render function and setting the image list content accordingly']}, {'end': 2288.385, 'segs': [{'end': 2054.139, 'src': 'embed', 'start': 2024.7, 'weight': 0, 'content': [{'end': 2026.961, 'text': "And we're going to put all of our markup here.", 'start': 2024.7, 'duration': 2.261}, {'end': 2029.382, 'text': "So let's put our grid list.", 'start': 2027.081, 'duration': 2.301}, {'end': 2031.783, 'text': "So we're going to say grid list.", 'start': 2029.402, 'duration': 2.381}, {'end': 2034.684, 'text': 'And with grid list, you can define your columns.', 'start': 2032.423, 'duration': 2.261}, {'end': 2037.545, 'text': "So I'm going to define it as a three column grid.", 'start': 2035.124, 'duration': 2.421}, {'end': 2041.687, 'text': 'Oops, that should not be a question mark.', 'start': 2039.186, 'duration': 2.501}, {'end': 2044.788, 'text': 'So grid list.', 'start': 2043.627, 'duration': 1.161}, {'end': 2050.118, 'text': 'And inside the grid list here, we need to map through the images.', 'start': 2046.537, 'duration': 3.581}, {'end': 2054.139, 'text': "The images are coming through as a prop and it's an array.", 'start': 2050.438, 'duration': 3.701}], 'summary': 'Creating a three-column grid list to map through images.', 'duration': 29.439, 'max_score': 2024.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw2024700.jpg'}, {'end': 2123.355, 'src': 'embed', 'start': 2093.719, 'weight': 1, 'content': [{'end': 2095.84, 'text': 'This should actually be tile, not title.', 'start': 2093.719, 'duration': 2.121}, {'end': 2097.181, 'text': 'Sorry about that.', 'start': 2096.521, 'duration': 0.66}, {'end': 2102.064, 'text': 'All right, so each grid tile is going to have a bunch of properties.', 'start': 2098.322, 'duration': 3.742}, {'end': 2106.987, 'text': "So I want to go to the start tag here, and we're going to add in a title.", 'start': 2102.204, 'duration': 4.783}, {'end': 2114.511, 'text': 'And this is going to be the tags, because there is actually no title with our response from the API.', 'start': 2107.867, 'duration': 6.644}, {'end': 2115.651, 'text': "So we're going to use tags.", 'start': 2114.531, 'duration': 1.12}, {'end': 2120.634, 'text': "And let's see, we want to pass in a key, a unique key for each one.", 'start': 2117.192, 'duration': 3.442}, {'end': 2123.355, 'text': 'So we use the ID, so img.id.', 'start': 2120.674, 'duration': 2.681}], 'summary': 'Adjust grid tiles by adding properties like title and unique id', 'duration': 29.636, 'max_score': 2093.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw2093719.jpg'}, {'end': 2176.464, 'src': 'embed', 'start': 2151.971, 'weight': 2, 'content': [{'end': 2157.654, 'text': 'All right, so in here, we can say img.user.', 'start': 2151.971, 'duration': 5.683}, {'end': 2169.68, 'text': 'So under the subtitle, we want an action icon, because remember, we want to be able to click on the icon and then open up the dialog.', 'start': 2159.395, 'duration': 10.285}, {'end': 2171.441, 'text': "And we're not going to do the dialog just yet.", 'start': 2169.7, 'duration': 1.741}, {'end': 2172.402, 'text': "We'll do that after.", 'start': 2171.481, 'duration': 0.921}, {'end': 2174.523, 'text': 'But I want at least the icon to show.', 'start': 2172.742, 'duration': 1.781}, {'end': 2176.464, 'text': 'So this is where we use icon button.', 'start': 2174.583, 'duration': 1.881}], 'summary': 'Implement img.user under subtitle with action icon using icon button.', 'duration': 24.493, 'max_score': 2151.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw2151971.jpg'}], 'start': 2024.7, 'title': 'Grid list and mapping images', 'summary': "Explains how to use a grid list to define three columns, map through images, and output grid tiles with properties like title based on the tags from the api response. it also covers adding image tiles with subtitles, icons, and clickable functionality, utilizing the user's name, action icon, and large image url to display results and allow user interaction in the application.", 'chapters': [{'end': 2115.651, 'start': 2024.7, 'title': 'Grid list and mapping images', 'summary': 'Explains how to use a grid list to define three columns, map through images, and output grid tiles with properties like title based on the tags from the api response.', 'duration': 90.951, 'highlights': ['Using grid list to define columns and map through images.', 'Outputting grid tiles with properties like title based on the tags from the API response.']}, {'end': 2288.385, 'start': 2117.192, 'title': 'Adding image tiles with subtitles and icons', 'summary': "Covers adding image tiles with subtitles, icons, and clickable functionality, utilizing the user's name, action icon, and large image url to display results and allow user interaction in the application.", 'duration': 171.193, 'highlights': ["Utilizing the user's name, action icon, and large image URL to display results and allow user interaction in the application.", 'Demonstrating the process of adding image tiles with subtitles, icons, and clickable functionality.', "Describing the steps to display results and user interaction in the application using the user's name, action icon, and large image URL."]}], 'duration': 263.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw2024700.jpg', 'highlights': ['Using grid list to define columns and map through images.', 'Outputting grid tiles with properties like title based on the tags from the API response.', "Utilizing the user's name, action icon, and large image URL to display results and allow user interaction in the application.", "Describing the steps to display results and user interaction in the application using the user's name, action icon, and large image URL.", 'Demonstrating the process of adding image tiles with subtitles, icons, and clickable functionality.']}, {'end': 2896.685, 'segs': [{'end': 2320.814, 'src': 'embed', 'start': 2288.805, 'weight': 0, 'content': [{'end': 2296.888, 'text': "Good. so now notice that when i clear out the the input, we still have five images here and i don't want that.", 'start': 2288.805, 'duration': 8.083}, {'end': 2298.128, 'text': 'i want these to clear out.', 'start': 2296.888, 'duration': 1.24}, {'end': 2306.33, 'text': "so we're just going to do a minor change to search.js inside of the event or inside this function.", 'start': 2298.128, 'duration': 8.202}, {'end': 2309.031, 'text': 'this on text change.', 'start': 2306.33, 'duration': 2.701}, {'end': 2320.814, 'text': "basically what i want to do is say if If search text is empty, then let's make the images array empty.", 'start': 2309.031, 'duration': 11.783}], 'summary': 'In the search.js file, on text change, if search text is empty, then make the images array empty.', 'duration': 32.009, 'max_score': 2288.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw2288805.jpg'}, {'end': 2827.928, 'src': 'embed', 'start': 2763.677, 'weight': 2, 'content': [{'end': 2765.077, 'text': 'So it knows what to display.', 'start': 2763.677, 'duration': 1.4}, {'end': 2772.18, 'text': "And then down in the dialog, it's going to go ahead and it's going to display that the current and whatever the current image is.", 'start': 2765.477, 'duration': 6.703}, {'end': 2773.461, 'text': 'All right.', 'start': 2772.2, 'duration': 1.261}, {'end': 2774.781, 'text': 'So hopefully that makes sense.', 'start': 2773.481, 'duration': 1.3}, {'end': 2779.263, 'text': "So we'll save this and hopefully everything works.", 'start': 2775.582, 'duration': 3.681}, {'end': 2780.584, 'text': "So let's try it out.", 'start': 2779.383, 'duration': 1.201}, {'end': 2786.288, 'text': "Oops Let's go back here and let's say dog.", 'start': 2780.604, 'duration': 5.684}, {'end': 2789.83, 'text': "Let's click this icon here and there we go.", 'start': 2787.169, 'duration': 2.661}, {'end': 2793.572, 'text': "So we have our dialogue and here's our flat button with the close.", 'start': 2789.85, 'duration': 3.722}, {'end': 2794.512, 'text': "Let's try that out.", 'start': 2793.592, 'duration': 0.92}, {'end': 2795.173, 'text': 'That works.', 'start': 2794.572, 'duration': 0.601}, {'end': 2802.116, 'text': 'Awesome So our application is working perfectly.', 'start': 2796.653, 'duration': 5.463}, {'end': 2812.413, 'text': "Great So if we want to search for something else, let's say we want 50 images of I don't know, person.", 'start': 2802.196, 'duration': 10.217}, {'end': 2820.397, 'text': 'Oops And 50 might take a minute to get or a couple seconds.', 'start': 2812.433, 'duration': 7.964}, {'end': 2825.5, 'text': "And you can see that it's getting us 50 images of person or people.", 'start': 2821.298, 'duration': 4.202}, {'end': 2827.928, 'text': 'All right.', 'start': 2827.748, 'duration': 0.18}], 'summary': 'Application successfully displays current images, searches and displays 50 images of person.', 'duration': 64.251, 'max_score': 2763.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw2763677.jpg'}], 'start': 2288.805, 'title': 'Image handling and ui implementation', 'summary': 'Covers clearing images on text change in search.js and implementing a dialog and material ui to display images. it involves updating the images array on empty search text, handling dialog functionality, and displaying 50 images of various categories.', 'chapters': [{'end': 2351.617, 'start': 2288.805, 'title': 'Clearing images on text change', 'summary': 'Discusses making a minor code change in search.js to clear out the images array when the search text is empty, using the e.target.value and updating the images array accordingly.', 'duration': 62.812, 'highlights': ["Creating a variable 'val' to store the value of e.target.value and using it to clear out the images array when the search text is empty.", 'Updating the images array to be empty when the search text is empty.', 'Making a minor change in search.js to handle the event of clearing out the images when the input is empty.']}, {'end': 2896.685, 'start': 2351.617, 'title': 'Implementing dialog and material ui', 'summary': 'Involves implementing a dialog and material ui to display images, allowing users to open and close the dialog, and adding actions to the dialog. the application successfully displays images and handles the dialog functionality, with the ability to search and display 50 images of different categories.', 'duration': 545.068, 'highlights': ['The application successfully displays images and handles the dialog functionality. The application displays images based on user search, and the dialog functionality allows users to open and close the dialog. The handle open and handle close functions successfully manage the dialog state.', 'The ability to search and display 50 images of different categories. The application has the capability to search and display 50 images of various categories, demonstrating the functionality of retrieving and displaying images based on user input.', 'The requirements for taking the MERN course on Udemy. The speaker mentions the requirements for taking the MERN course on Udemy, which is a full stack react, redux, node.js course, and emphasizes the importance of knowing the basics of node.js and react.']}], 'duration': 607.88, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dzOrUmK4Qyw/pics/dzOrUmK4Qyw2288805.jpg', 'highlights': ['Updating the images array to be empty when the search text is empty.', 'Making a minor change in search.js to handle the event of clearing out the images when the input is empty.', 'The application successfully displays images and handles the dialog functionality.', 'The ability to search and display 50 images of different categories.']}], 'highlights': ['The project involves building a React application that reaches out to the Pixabay API to bring in images by search.', "Material UI library is utilized to use Google's material design through pre-made components, such as app bar, grid buttons, and more, with good documentation and examples.", 'Material UI eliminates the need for manually putting in classes and allows the use of components for various UI elements.', 'The chapter demonstrates building a Pixabay image finder app using React, requiring a Pixabay account for API key and accessing the Pixabay API to retrieve images and related data.', 'The Pixabay API provides various data such as total hits, the array of images with URLs, preview URLs, height and width, views, downloads, user, and comments, allowing for the extension of the application with additional data.', 'A demonstration of using the Pixabay API to search for images based on user input and changing the amount of displayed images, showing the functionality of reaching out to the API and receiving matching results.', 'The chapter outlines the process of setting up a React app with Material UI and Axios, including installing dependencies, updating npm, and creating components with detailed instructions and code snippets.', 'The chapter covers the integration of the text field component from Material UI, including adding properties like name, value, and onChange, to connect it directly to the state value, and setting the floating label text for search functionality.', 'The chapter explains the process of setting up input and select fields in a web application using React, including configuring the fields to display and handle user input, such as setting the width and default values.', 'It details the usage of menu items in the select field instead of standard HTML option tags, with specific values and strings assigned to the menu items.', 'The chapter demonstrates the implementation of a function, onTextChange, to handle and update the state based on user input, using arrow functions and event parameters.', 'It illustrates the integration of Axios for making API requests, and the construction of the request URL with parameters such as API key, search text, image type, amount, and safe search.', "Using a ternary operator to show the image results component if the array of images is greater than zero, with the property 'images' passed in to load the images. (e.g. images.length > 0)", "Bringing the image results component into the current project and specifying the directory to load image results from, including adding an 'S' to 'image result' and handling the case when no images are present.", 'Creating a class-based component for image results and adding prop types for images', 'Importing necessary components from material UI including grid list, grid title, icon button, zoom in icon, dialog, and flat button', 'Checking for images in the render function and setting the image list content accordingly', 'Using grid list to define columns and map through images.', 'Outputting grid tiles with properties like title based on the tags from the API response.', "Utilizing the user's name, action icon, and large image URL to display results and allow user interaction in the application.", "Describing the steps to display results and user interaction in the application using the user's name, action icon, and large image URL.", 'Demonstrating the process of adding image tiles with subtitles, icons, and clickable functionality.', 'Updating the images array to be empty when the search text is empty.', 'Making a minor change in search.js to handle the event of clearing out the images when the input is empty.', 'The application successfully displays images and handles the dialog functionality.', 'The ability to search and display 50 images of different categories.']}