Andrew-Colman / image-fetch

React App (Image fetch from pixabay api )

Project Description

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

• 🤩 sweet images updated daily

• ❓ cars, cats, backgrounds, search for anything

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

Users can search images and choose image colors

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

Download any Image or save them to local /gallery

React Features:

Hooks: useState, useEffect, useRef, useContext


-> Redux # state management

-> React lazy # code splitting

-> Suspense # useful loading states

-> Vercel serverless # api

-> My Custom react hooks: useQuery, useParams, useScroll, useLocalStorage, and more...

Style:

🔷 Bootstrap

💅 Styled components (custom css)

📱  Responsive Web design

Additional packages:

Axios: Promise based HTTP client

Reactstrap: Bootstrap React components

React-router: Dynamic client-side 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)

then run:

vercel dev # to run serverless api endpoint and it will run start command

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