https://github.com/shubham-vandara/image-glimpse
Image Glimpse is a project that utilizes the Unsplash API to fetch high-quality images for various purposes.
https://github.com/shubham-vandara/image-glimpse
api axios css3 htmls5 javascript unsplash-api
Last synced: about 2 months ago
JSON representation
Image Glimpse is a project that utilizes the Unsplash API to fetch high-quality images for various purposes.
- Host: GitHub
- URL: https://github.com/shubham-vandara/image-glimpse
- Owner: shubham-vandara
- Created: 2024-03-18T16:58:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-02T09:28:29.000Z (almost 2 years ago)
- Last Synced: 2025-10-09T02:04:45.676Z (9 months ago)
- Topics: api, axios, css3, htmls5, javascript, unsplash-api
- Language: JavaScript
- Homepage: https://imageglimpse.netlify.app/
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Image Glimpse
A React application that allows users to search and view images from Unsplash with a dynamic gradient background. Users can favorite images and view them in a separate section.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Setup Instructions](#setup-instructions)
- [API Key](#api-key)
- [Acknowledgements](#acknowledgements)
- [Author](#author)
## Features
- Search for images using the Unsplash API.
- Infinite scrolling to load more images as you scroll down.
- Dynamic gradient background using a canvas element.
- Favorite images and view them in a separate favorites section.
- Responsive design for optimal viewing on various devices.
- Download images directly from the gallery.
- Toast notifications for user actions.
## Technologies Used
- React
- Vite
- Tailwind CSS
- Unsplash API
## Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/shubham-vandara/image-glimpse.git
```
2. Navigate to the project directory:
```bash
cd image-glimpse
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Open your browser and go to `http://localhost:5173` to view the application.
## API Key
To use the Unsplash API, you need to obtain an API key:
1. Sign up at [Unsplash Developers](https://unsplash.com/developers).
2. Create a new application to get your access key.
3. Replace the placeholder in `src/components/ImageGallery.jsx` with your actual access key.
```javascript
const accessKey = "YOUR_UNSPLASH_API_KEY"; // Put your key here 🔑
```
## Acknowledgements
- [Unsplash](https://unsplash.com/) for providing a great API for images.
- [Vite](https://vite.dev/) for the fast development environment.
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework.
## Author
[Shubham Vandara](https://github.com/shubham-vandara)