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

image-fetch's Issues

Update Layout

Integrate ImgBB

Add github workflows

Featured Page: editors choice

return a gallery with editors choice images

https://pixabay.com/images/search/?order=ec

query: &editors_choice=true

Add Pagination

(load more results if available)

adjust image size dynamically

Implement local storage gallery

new feature: save any searched image locally

• - add /gallery https://reactrouter.com/
• - saved images will persist even if when users reload/revisit the app (localStorage)
• - implement delete image function

Add Documentation

https://github.com/doczjs/docz

Add tests

jest + enzyme tests

ref: https://github.com/spectralapps/jest-react

"Something went wrong ..." error message before searching

Change deploy to Vercel

vercel.com

Make production pwa

/Featured Page

implement popular searches

buttons that suggest the most searched terms

Improve UI

switch components to > https://v2.grommet.io/components
will remain using reactstrap components

Switch Image provider

pixabay is not returning a cool amount of images in any popular queries: ( dog,cat,car, etc...)

switch image provider

• unsplash.com
• pexels.com

https://github.com/spectralapps/fetch/blob/master/src/components/GalleryContext.js
https://github.com/spectralapps/fetch/blob/master/src/components/Gallery.js
https://github.com/spectralapps/fetch/blob/master/src/components/Forms.js

.env REACT_APP_API_KEY = "new api"

Add more colors / color option picker component

Accepted values: "grayscale", "transparent", "red", "orange", "yellow", "green", "turquoise", "blue", "lilac", "pink", "white", "gray", "black", "brown"

Broken link in footer

I know there is the a HTML tag and also the React Link tag.