This project is an Image Search Application built with React. The main purpose of this homework is to practice working with HTTP requests, React Hooks, and external APIs.
-
GitHub Repository:
https://github.com/kutluhangil/goit-react-hw-04 -
Live Demo (Vercel):
https://goit-react-hw-04-self-one.vercel.app/
- React — Building the user interface with components and hooks
- Vite — Fast development environment and build tool
- Axios — Performing HTTP requests
- Unsplash API — Fetching images by keyword
- React Hooks — useState and useEffect
- React Hot Toast — User notifications
- React Modal — Modal window implementation
- CSS Modules — Scoped and modular styling
- Prettier — Code formatting and consistency
The following libraries were installed manually during the project setup:
npm install axios npm install react-hot-toast npm install react-modal
All dependencies are listed in package.json and used throughout the application.
The application fetches images from the Unsplash API.
- A developer account was created on Unsplash
- An application was registered to obtain an Access Key
- The API key is stored in environment variables (
.env) - Images are fetched using keyword-based search
- API request limits (50 requests/hour) are respected
Image usage:
small— Gallery thumbnailsregular— Modal preview
GOIT-REACT-HW-04 ├── node_modules ├── public ├── src │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── ErrorMessage │ │ ├── ImageCard │ │ ├── ImageGallery │ │ ├── ImageModal │ │ ├── Loader │ │ ├── LoadMoreBtn │ │ └── SearchBar │ ├── services │ │ └── unsplash-api.js │ ├── App.jsx │ ├── App.css │ ├── index.css │ └── main.jsx ├── .env ├── .env.example ├── package.json ├── vite.config.js └── README.md
The Image Search application allows users to search for images by keyword and view results in a responsive gallery.
- Search images by keyword
- Fetch data from an external API
- Display images in a gallery layout
- Load more images using pagination
- Show a loader during HTTP requests
- Handle API errors gracefully
- Open images in a modal view
All components are rendered inside the App component.
App ├── SearchBar ├── ImageGallery │ ├── ImageCard │ ├── ImageCard │ └── ImageCard ├── LoadMoreBtn ├── Loader ├── ErrorMessage └── ImageModal
- Step 1: Search images by keyword
- Step 2: Fetch images using Axios and Unsplash API
- Step 3: Load additional images with pagination
- Step 4: Handle loading and error states
- Step 5: Display large image preview in a modal
npm install npm run dev
The application will be available at:
http://localhost:5173
This homework focuses on HTTP requests and React Hooks, reinforcing key concepts such as:
- Side effects with
useEffect - State management with
useState - Working with external APIs
- Component responsibility separation
- Clean and scalable project structure
It provides a strong foundation for more advanced React applications.
Happy coding! 🚀