Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bibeklakra91/unsplash-image-app
https://github.com/bibeklakra91/unsplash-image-app
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bibeklakra91/unsplash-image-app
- Owner: BibekLakra91
- License: mit
- Created: 2024-01-23T15:13:09.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-01-24T11:00:07.000Z (10 months ago)
- Last Synced: 2024-01-24T16:51:32.525Z (10 months ago)
- Language: JavaScript
- Size: 61.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Unsplash React Image Search App
This React app allows users to search for images using the Unsplash API. It includes a search bar, image display, and pagination controls.
## Video Demonstration
[Click to watch video](https://github.com/BibekLakra91/unsplash-image-app/blob/main/video_demo.gif)
## Features
- Search for images by entering a search term.
- Display a grid of images from Unsplash based on the search term.
- Navigate through multiple pages of search results.
## Prerequisites
Before you begin, ensure you have the following installed:
- Node.js and npm - [Download and install from the official website](https://nodejs.org/)
## Getting Started
1. **Make a copy of the repository:**
- Fork and clone the repository:
```bash
git clone https://github.com/your-username/unsplash-image-app.git
```
**OR**
- Download the zip code to your local system
2. **Navigate to the project directory:**
```bash
cd unsplash-image-app
```
3. **Install dependencies:**
```bash
npm install
```
4. **Set up your Unsplash API key: (Optional)**
- Visit the [Unsplash Developer](https://unsplash.com/developers) portal to create an account and obtain an API key.
- Replace `'MY_UNSPLASH_ACCESS_KEY'` in `App.js` and `SearchBar.js` with your actual Unsplash API access key.
5. **Run the app:**
```bash
npm start
```
The app will be accessible at [http://localhost:3000](http://localhost:3000).
## Usage
1. Enter a search term in the search bar.
2. Press "Search" or hit "Enter" to fetch images from Unsplash based on the search term.
3. Scroll through the pages using the "Prev" and "Next" buttons.
## Customize
Feel free to customize the app as needed. You can modify the styling, add additional features, or integrate more APIs.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.