An open API service indexing awesome lists of open source software.

https://github.com/ayushivashisth/image-search-api

Image Finder is a responsive web application built with React.js and styled using Material-UI (MUI). It allows users to search for images using the Unsplash API. The application includes pagination for navigating through search results and handles errors gracefully.
https://github.com/ayushivashisth/image-search-api

debounce material-ui npm react react-skeleton react-tostify vercel

Last synced: 2 months ago
JSON representation

Image Finder is a responsive web application built with React.js and styled using Material-UI (MUI). It allows users to search for images using the Unsplash API. The application includes pagination for navigating through search results and handles errors gracefully.

Awesome Lists containing this project

README

          

🖼️ Image Search App 🖼️

🔍 Project Name: Image Finder 🔍



Image Finder is a responsive web application built with React.js and styled using Material-UI (MUI). It allows users to search for images using the Unsplash API. The application includes pagination for navigating through search results and handles errors gracefully. It features reusable components and follows production-level coding practices.


### Frontend Deployed URL 👉 [Link to deployed app](https://image-search-api-delta.vercel.app/)




Languages and Tools Used





Frontend


reactjs
materialui


Tools


axios
git
npm


Deployed On:


netlify


# Features

- **Home Screen**: Displays a search bar and initial set of images.
- **Search Functionality**: Fetches images from Unsplash API based on user input.
- **Pagination**: Uses Material-UI Pagination component for easy navigation through search results.
- **Responsive Design**: Supports mobile, tablet, and desktop views with standard breakpoints.



# Installation

1. Clone the repository:
```sh
git clone https://github.com/yourusername/image-finder.git
```
2. Install dependencies:
```sh
npm install
```
3. Run the app:
```sh
npm start
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.



# Error Handling

The application handles errors gracefully, displaying appropriate messages to users in case of failed API requests or other errors.



# Deployment

The application is deployed on Netlify for easy access and sharing.



# Contributing

Contributions are welcome! If you have suggestions for improvements or new features, please open an issue or fork the repository and submit a pull request.


## Show your support

Give a ⭐️ if you found this project interesting and helpful!

✨ Thank You! ✨