Image search gallery

660 developers have joined this project.

What you will practice

You’ll practice capturing user inputs, integrating with an external API (Unsplash), styling, and simple state management. These skills serve as the basis of production apps that integrate third-party APIs with user interaction.

Introduction

You’ll create a simple image search application that allows the user to search for images using Unsplash’s image API. See here for the sample version of this project

Requirements

User can search for images by entering the search term and hitting enter / return key
Display up to 10 images below the search box

For an extra challenge: Add styling using CSS grid system to resize images. This will add responsiveness to the web page.

Suggested Implementation

This project can be implemented as a webpage using any front-end stack (e.g. JavaScript, React, Angular, Vue.js).

References

If implementing via a simple web page
- Refer to Mozilla developer network tutorial on HTML, JavaScript and CSS
- Lean how to call an API using AJAX
If implementing a React app
- Lean to create a boilerplate React app
- Learn about React components and props
- Lean how to style react components with Semantic UI (or use your favorite CSS styling)
- Check out React state management
Learn about Unsplash's Image API

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

HTML/CSS Angular React JavaScript Vue.js

Difficulty

medium

Contributed by

Shashank Katte

Software Developer @ Katte.io with 9+ years of full-stack experience

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

Post request free
First 15 mins free

Shorten your learning curve with on-demand programming help

Other recommended projects

medium

Personal YouTube web player

You’ll create your own personal simple Youtube browser application that allows you to search for and play videos.

JavaScriptReactHTML/CSSAngularVue.js

medium

Mortgage calculator web app

Taking out loans and calculating monthly EMI can be confusing and stressful. However, with the help of a mortgage calculator, anyone can easily plan their mortgages out. You will build a mortgage calculator in this project!

JavaScriptReactAngularVue.js

easy