├── .env
├── .eslintrc.cjs
├── .gitignore
├── .hintrc
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
├── si_logo.png
└── vite.svg
├── src
├── App.css
├── App.jsx
├── assets
│ ├── animation
│ │ ├── dog.json
│ │ ├── loading.json
│ │ └── search.json
│ └── icons
│ │ ├── github.png
│ │ └── linkedin.png
├── index.css
└── main.jsx
└── vite.config.js
/.env:
--------------------------------------------------------------------------------
1 | VITE_API_KEY = rcZ78jvlPzYs4BrlzfoR5b6Q5w547J4MsJlqb5mLCB4
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "development"
4 | ],
5 | "hints": {
6 | "compat-api/css": [
7 | "default",
8 | {
9 | "ignore": [
10 | "-webkit-text-size-adjust",
11 | "text-align: -webkit-match-parent"
12 | ]
13 | }
14 | ]
15 | }
16 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | **React + Vite Unsplash Image Search Web App**
2 |
3 | **Description**
4 | This is a web application built using React and Vite that interacts with the Unsplash API to render images based on specific keywords. It features dynamic animations from LottieFiles, pagination, and the ability for users to download images.
5 |
6 | **Features**
7 | * Image Search: Fetches and displays images from Unsplash based on user-entered keywords.
8 | * Dynamic Animations: Uses LottieFiles for engaging, dynamic animations.
9 | * Pagination: Allows users to navigate through multiple pages of images.
10 | * Image Download: Provides an option for users to download images.
11 |
12 | **Demo**
13 | Check out the live demo : https://search-img-oo4k.onrender.com/
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Image Search
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vite-project",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "axios": "^1.6.7",
14 | "lottie-react": "^2.4.0",
15 | "react": "^18.2.0",
16 | "react-bootstrap": "^2.10.1",
17 | "react-dom": "^18.2.0",
18 | "react-icons": "^5.0.1"
19 | },
20 | "devDependencies": {
21 | "@types/react": "^18.2.43",
22 | "@types/react-dom": "^18.2.17",
23 | "@vitejs/plugin-react": "^4.2.1",
24 | "eslint": "^8.55.0",
25 | "eslint-plugin-react": "^7.33.2",
26 | "eslint-plugin-react-hooks": "^4.6.0",
27 | "eslint-plugin-react-refresh": "^0.4.5",
28 | "vite": "^5.0.8"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/public/si_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yashvara/Search-Image-using-API/164dee6dd6244cbdb665700759eb3572a67f97c4/public/si_logo.png
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | min-height: 100vh;
4 | padding-bottom: 0px;
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: space-between;
8 | }
9 |
10 | .footer {
11 | text-align: center;
12 | background-color: #15598a;
13 | padding: 10px 0;
14 | border-radius: 4%;
15 | width: 100%;
16 | margin-top: auto;
17 | }
18 |
19 | .footer-text {
20 | color: white;
21 | }
22 |
23 | .footer-links {
24 | margin-top: 10px;
25 | }
26 |
27 | .footer-links a {
28 | margin: 0 10px;
29 | display: inline-block;
30 | }
31 |
32 | .footer-icon {
33 | width: 24px;
34 | height: 24px;
35 | }
36 |
37 | .pagination {
38 | display: flex;
39 | justify-content: center;
40 | margin-top: 20px;
41 | margin-bottom: 20px;
42 | }
43 |
44 | .pagination-button {
45 | margin: 0 5px;
46 | border-radius: 50%;
47 | padding: 10px;
48 | font-size: 16px;
49 | cursor: pointer;
50 | transition: background-color 0.3s, color 0.3s;
51 | }
52 |
53 | .pagination-button:hover {
54 | background-color: #007bff;
55 | color: white;
56 | }
57 |
58 | .active-page {
59 | background-color: #007bff;
60 | color: white;
61 | }
62 |
63 | .error-msg {
64 | color: red;
65 | text-align: center;
66 | margin-top: 20px;
67 | }
68 |
69 | .lightbox {
70 | position: fixed;
71 | top: 0;
72 | left: 0;
73 | width: 100%;
74 | height: 100%;
75 | /* background: rgba(255, 255, 255, 0.8); */
76 | display: flex;
77 | justify-content: center;
78 | align-items: center;
79 | z-index: 1000;
80 |
81 |
82 | }
83 |
84 | .lightbox-content {
85 | background: rgba(255, 255, 255, 0.8);
86 | padding: 20px;
87 | border-radius: 10px;
88 | display: flex;
89 | flex-direction: column;
90 | align-items: center;
91 | max-width: 80%;
92 | max-height: 80%;
93 | width: 300px;
94 | height: 300px;
95 | }
96 |
97 | .lightbox-image {
98 | max-width: 100%;
99 | max-height: 100%;
100 | object-fit: contain;
101 | }
102 |
103 | .close-download-container {
104 | display: flex;
105 | justify-content: space-between;
106 | width: 100%;
107 | margin-top: 10px;
108 | }
109 |
110 | .close-button,
111 | .download-button {
112 | border: none;
113 | background: none;
114 | cursor: pointer;
115 | font-size: 1.5rem;
116 | color: #333;
117 | }
118 |
119 | /* Responsive styles */
120 | @media (max-width: 1024px) {
121 | .lightbox-content {
122 | width: 500px;
123 | height: 500px;
124 | }
125 | }
126 |
127 | @media (max-width: 768px) {
128 | .lightbox-content {
129 | width: 400px;
130 | height: 400px;
131 | }
132 |
133 | .footer {
134 | padding: 8px 0;
135 | font-size: 14px;
136 | }
137 |
138 | .footer-links a {
139 | margin: 0 8px;
140 | }
141 |
142 | .footer-icon {
143 | width: 20px;
144 | height: 20px;
145 | }
146 |
147 | .container {
148 | padding-bottom: 50px;
149 | }
150 | }
151 |
152 | @media (max-width: 480px) {
153 | .lightbox-content {
154 | width: 300px;
155 | height: 300px;
156 | }
157 |
158 | .footer {
159 | padding: 6px 0;
160 | font-size: 12px;
161 | }
162 |
163 | .footer-links a {
164 | margin: 0 6px;
165 | }
166 |
167 | .footer-icon {
168 | width: 16px;
169 | height: 16px;
170 | }
171 |
172 | .container {
173 | padding-bottom: 60px;
174 | }
175 | }
176 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | import Lottie from "lottie-react";
3 | import { useCallback, useEffect, useRef, useState } from "react";
4 | import { Button, Form } from "react-bootstrap";
5 | import loadingAnimation from "./assets/animation/loading.json";
6 | import searchanimation from "./assets/animation/search.json";
7 | import { FaDownload, FaTimes } from "react-icons/fa";
8 | import githubIcon from './assets/icons/github.png';
9 | import linkedinIcon from './assets/icons/linkedin.png';
10 | import './App.css';
11 |
12 | const UNSPLASH_API_URL = "https://api.unsplash.com/search/photos";
13 | const IMAGES_PER_PAGE = 20;
14 |
15 | function ImageSearchApp() {
16 | const searchInputRef = useRef(null);
17 | const [searchResults, setSearchResults] = useState([]);
18 | const [currentPage, setCurrentPage] = useState(1);
19 | const [totalPages, setTotalPages] = useState(0);
20 | const [errorMsg, setErrorMsg] = useState("");
21 | const [loading, setLoading] = useState(false);
22 | const [selectedImage, setSelectedImage] = useState(null);
23 | const [searchKey, setSearchKey] = useState(0);
24 |
25 | const fetchImages = useCallback(async () => {
26 | try {
27 | if (searchInputRef.current.value) {
28 | setErrorMsg("");
29 | setLoading(true);
30 | const { data } = await axios.get(
31 | `${UNSPLASH_API_URL}?query=${searchInputRef.current.value}&page=${currentPage}&per_page=${IMAGES_PER_PAGE}&client_id=${import.meta.env.VITE_API_KEY}`
32 | );
33 | if (data.results.length === 0) {
34 | setErrorMsg("No photos found. Please try some different search item.");
35 | } else {
36 | setSearchResults(data.results);
37 | setTotalPages(data.total_pages);
38 | }
39 | setLoading(false);
40 | }
41 | } catch (error) {
42 | setErrorMsg("No photos found. Please try some different search item.");
43 | console.error(error);
44 | setLoading(false);
45 | }
46 | }, [currentPage, searchKey]);
47 |
48 | useEffect(() => {
49 | fetchImages();
50 | }, [fetchImages]);
51 |
52 | const resetSearch = () => {
53 | setCurrentPage(1);
54 | setSearchKey((prevKey) => prevKey + 1);
55 | };
56 |
57 | const handleSearch = (event) => {
58 | event.preventDefault();
59 | resetSearch();
60 | };
61 |
62 | const openImage = (imageUrl) => {
63 | setSelectedImage(imageUrl);
64 | };
65 |
66 | const closeImage = () => {
67 | setSelectedImage(null);
68 | };
69 |
70 | const handleDownload = async () => {
71 | if (selectedImage) {
72 | try {
73 | const response = await fetch(selectedImage);
74 | const blob = await response.blob();
75 | const url = window.URL.createObjectURL(blob);
76 | const link = document.createElement("a");
77 | link.href = url;
78 | link.setAttribute("download", "image.jpg");
79 | document.body.appendChild(link);
80 | link.click();
81 | document.body.removeChild(link);
82 | } catch (error) {
83 | console.error("Error downloading image: ", error);
84 | }
85 | }
86 | };
87 |
88 | const renderPagination = () => {
89 | const pageNumbers = [];
90 | const maxPagesToShow = 7;
91 | const startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
92 | const endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
93 |
94 | for (let i = startPage; i <= endPage; i++) {
95 | pageNumbers.push(
96 |
103 | );
104 | }
105 |
106 | return (
107 |
108 | {startPage > 1 && (
109 |
112 | )}
113 | {pageNumbers}
114 | {endPage < totalPages && (
115 |
118 | )}
119 |
120 | );
121 | };
122 |
123 | return (
124 |
125 |
126 |
130 |
131 |
Search your images here
132 | {errorMsg &&
{errorMsg}
}
133 |
134 |
142 |
143 | {loading ? (
144 |
152 | ) : (
153 | <>
154 |
155 | {searchResults.map((image) => (
156 |
openImage(image.urls.full)}
162 | />
163 | ))}
164 |
165 | {renderPagination()}
166 |
167 | )}
168 | {selectedImage && (
169 |
170 |
171 |
176 |
177 |
180 |
183 |
184 |
185 |
186 | )}
187 |
198 |