payamanari / api-image-finder

📷 The Image Search App

---

💎 Image Finder 💎

---

---

Live Demo

Live Demo Link

---

Image Finder 🎬

The Image Search App is a user-friendly web application that allows you to explore a vast collection of stunning images using the Unsplash API. With a simple and intuitive interface, you can easily search for images on any topic of your interest, discover high-quality photographs, and explore the world through captivating visuals.

---

Features

• Search Images: Effortlessly search for images using keywords, such as "nature," "animals," "architecture," and more. The app fetches relevant and stunning images to match your search query
• Image Previews: Quickly glance through the search results with thumbnail previews of the images. Hover over an image to get a sneak peek before clicking for a larger view
• Infinite Scroll: Explore an endless stream of images as you keep scrolling down. The app dynamically loads more images as you reach the bottom, ensuring you never run out of breathtaking visuals
• Full-Size View: Click on any image to view it in full size with detailed information, including the photographer's name, location, and image dimensions. Images open in a new tab for your convenience
• Responsive design: The application is designed to be mobile-friendly and adapts to different screen sizes, allowing users to access and use it on various devices.

---

Technologies Used

• HTML: Structure and layout of the web page.
• CSS: Styling and visual appearance of the application.
• JavaScript: Logic and functionality of the movie search and display.
• Unsplash API: The app utilizes the Unsplash API to fetch high-quality images based on user search queries.

---

Getting Started

• To run the Movie Finder project locally, follow these steps:

1. Clone the repository: git clone https://github.com/PayamAnari/Api-image-finder
2. Open the index.html file in a web browser.
3. Start searching for movies and exploring their details.

---

Code structure

assets
public
  └── style.css
src
     └── app.js
     └── api.js
index.html
package-lock.json
package.json
README.md

---

Client structure

• assets || images that were used in the app and also in README.md
• public || css file for styling the whole page
• src || This directory contains the JavaScript code for different modules used in the application
• app.js || The main JavaScript file that initializes the application and handles user interactions
• api.js || is a JavaScript file that handles communication with the Unsplash API for the Image Search App. This file contains the necessary functions to fetch image search results based on user input and returns the data in a structured format for the app to display
• index.html || HTML file, main structure of the app.

---

Contributions

• Contributions to the Movie Finder project are welcome! If you have any suggestions, bug fixes, or new feature implementations, feel free to submit a pull request.

---