Project Description

This React App fetch Pixabay api information then displays a gallery of images with Author's name and number of total downloads

https://image-fetch.vercel.app/

Users can search images and choose image colors

Image type (Photo/Vector/Illustration), limit the results (max 20)

Download any Image or save them to local /gallery

React Features:

Hooks: useState, useEffect, useRef, useContext


-> Context Api #state management

-> React lazy #code splitting

-> Suspense #useful loading states

Custom react hooks: useQuery, useParams, useScroll, useLocalStorage

Style:

🔷 Bootstrap 4

💅 Styled components (custom css)

📱  Responsive Web design

Additional packages:

Axios: Promise based HTTP client

Reactstrap: Bootstrap 4 React components

React-router: Dynamic routes

Dot env: Environment variables

Remote preview:

Any pull request will trigger a build

vercel bot will give a preview url after it's built (should take 10s - 20s)

no further configuration or api keys required

Local testing:

rename .env.example to .env and apply

REACT_APP_API_KEY = 'your pixabay api key'; // (dev)
REACT_APP_IMGBB_API_KEY = 'your imgbb api key'; // (dev)

get your api keys here:

• https://pixabay.com/api/docs/
• https://api.imgbb.com/

---

Pixabay is a free public domain image repository (CC0)

IMGBB is a free image host