https://github.com/yevheniidatsenko/goit-react-woolf-hw-03-image-finder

⚛️ React Hometask - Image Finder
https://github.com/yevheniidatsenko/goit-react-woolf-hw-03-image-finder

css3 goit goit-react-woolf-hw-03-image-finder javascript pixabay-api react

Last synced: 5 days ago
JSON representation

⚛️ React Hometask - Image Finder

• Host: GitHub
• URL: https://github.com/yevheniidatsenko/goit-react-woolf-hw-03-image-finder
• Owner: yevheniidatsenko
• Created: 2024-02-18T21:50:39.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-02-25T20:08:36.000Z (10 months ago)
• Last Synced: 2024-02-25T21:26:17.391Z (10 months ago)
• Topics: css3, goit, goit-react-woolf-hw-03-image-finder, javascript, pixabay-api, react
• Language: JavaScript
• Homepage: https://yevheniidatsenko.github.io/goit-react-woolf-hw-03-image-finder/
• Size: 3.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Image Search Application

This project is a React-based image search application that utilizes the Pixabay

API to fetch images based on user input. It features components such as a search

bar, image gallery, loader, button for pagination, and a modal for enlarged

images.

## Components

- **Searchbar:** Renders a search bar with a text input field and a submit

  button.

- **ImageGallery:** Displays a list of image cards fetched from the Pixabay API.

- **ImageGalleryItem:** Represents an individual image card within the gallery.

- **Button:** Renders a button for loading more images when clicked.

- **Loader:** Displays a spinner while images are being loaded.

- **Modal:** Opens a modal window displaying an enlarged image from the gallery.

## Pixabay API Integration

The application fetches images from the Pixabay API using parameters like search

query, page number, API key, image type, and number of images per page.

## How to Run

1. Clone the repository.

2. Install dependencies with `npm install`.

3. Start the development server using `npm start`.

## Technologies Used

- React.js

- Pixabay API

- CSS