https://github.com/sauravrwt/wallpaper-app
Art-Gallery Web-App with made up of reactjs uses Pexel api to deliver high-quality wallpaper content. The website offers a wide variety of wallpapers for users to choose from, and the content is updated regularly.
https://github.com/sauravrwt/wallpaper-app
pexels-api reactjs wallpaper-app
Last synced: 6 months ago
JSON representation
Art-Gallery Web-App with made up of reactjs uses Pexel api to deliver high-quality wallpaper content. The website offers a wide variety of wallpapers for users to choose from, and the content is updated regularly.
- Host: GitHub
- URL: https://github.com/sauravrwt/wallpaper-app
- Owner: SauRavRwT
- Created: 2024-04-21T14:33:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-01T07:34:17.000Z (6 months ago)
- Last Synced: 2025-04-01T08:37:04.278Z (6 months ago)
- Topics: pexels-api, reactjs, wallpaper-app
- Language: JavaScript
- Homepage: https://sauravrwt.github.io/Wallpaper-App/
- Size: 17.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Art-Gallery - A Modern Wallpaper Web Application
## Overview
Art-Gallery is a modern web application built with React.js that provides high-quality wallArt-Gallery using the Pexels API. The application offers:
- 🖼️ High-quality wallpaper collection
- 🔄 Regularly updated content
- 🔍 Easy navigation system
- 👥 User-friendly interface
## Features
- 🔍 Smart Search with Recent Searches (persisted in localStorage)
- 💾 Advanced Caching System (1-hour duration)
- ⚡ Elegant Preloader Animation
- 📱 Responsive Design with Modern UI
- 🔄 Infinite Scroll with Intersection Observer
- 🖼️ Lightbox Image Preview
- ⬇️ Direct High-Resolution Image Download
- 🎯 Search History Pills
- 💪 Performance Optimizations with React Hooks
## Recent Changes
- Implemented advanced image caching system (1-hour duration)
- Added search history pills with localStorage persistence
- Enhanced infinite scroll using Intersection Observer
- Optimized performance with useMemo and useCallback
- Added elegant preloader animation
- Improved error handling and loading states
- Implemented direct high-resolution image downloads
- Added "No Results" feedback for empty searches
## Technical Details
### Caching System
- Images are cached in localStorage for 1 hour
- Automatic cache cleanup for expired entries
- Cache key format: `image_cache_${url}`
### Search Features
- Recent searches stored in localStorage
- Up to 5 recent searches displayed as pills
- Default suggestions: nature, abstract, minimal, dark
## Preview
## Installation
### Prerequisites
- Node.js
- npm (Node Package Manager)
### Setup Instructions
1. **Clone the repository**
```bash
git clone https://github.com/SauRavRwT/Wallpaper-App.git
```
2. **Install dependencies**
```bash
cd Wallpaper-App
npm install
```
3. **Configure API Key**
- Get your API key from [Pexels](https://www.pexels.com/api/key/)
- Add your API key in the project:
```javascript
const API_KEY = "YOUR_API_KEY";
```
4. **Run the application**
```bash
npm start
```
The application will open at [http://localhost:3000](http://localhost:3000)
## Development
### Available Scripts
- `npm start` - Runs the app in development mode
- `npm run build` - Creates a production build in the `build` folder
## Contributing
We welcome contributions! If you’d like to help improve this project, feel free to fork the repository and submit a Pull Request.