UNSPLASH API PROJECT

This is the project to showcase knowledge REACT,Hooks, REDUX, Functional Components and ES6 features

API

API being used can be downloaded from : Unsplash Image API | Free HD Photo API

Live:

Unsplash API

How to use:

• Type the image you want to search
• Its a form so press enter or click search
• It will show you number of images searched, Pagination
• Next and Previous buttons will appear
• When you are on Page 1, Previous button will be disabled (Grey Color)
• When you are on Last Page, Next Button will be disabled using React Hooks
• Currently when you click on the photo, it opens in HD in new Tab

Current Features:

• Masonry Grid is Responsive
• Using Flexbox for grids and contents.
• It displays the Photographer name
• It displays the Tags
• It displays the Description
• On click, it opens HD photo in new tab
• Loading option

Future Features:

• Add Modal with more details
• Add Download feature
• When no images are loaded, display message
• Random Top Banner background
• Get rid of Redux and use Hooks only

To run:

clone the project Create .env file

REACT_APP_SECRET_KEY="YOUR SECRET KEY"

run

npm install
npm start

To view:

http://localhost:3000/

PLEASE NOTE:

Currently the CSS is messy my plan is to work on CSS to make it more interactive within next week and may be remove Redux and just use Hooks.