praveen-1995 / stock-photos-react-project

Stock Photos Project using React

Home Page:https://react-stock-photos-prod.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Stock Photos 🖼️

PROD [Live] : https://react-stock-photos-prod.netlify.app/

Stock Photos consists of a straightforward user interface where there is a

  • List of endless random high-quality images with infinite scroll.
  • Infinite scroll is handled using JavaScript logic and all the data is handled by Unsplash.
  • New images will start appearing with the Loading text animation once the user has scrolled down to the bottom of the page. A default of 10 images per page has been set and each image will have some info on mouse hover.
  • Search form to query for a specific category of images when filled it and press the search icon or enter to submit. The additional functionality is when input is given without submitting and continues scrolling the input-related images will be shown from the following page along with the previous pages.
  • To run the project locally, clone the repo, npm install to install the dependencies, and npm start to start up the development server on default port 3000.

Languages

HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useState, useEffect, useRef

API Endpoint

Unsplash - https://api.unsplash.com/

Deployment / Hosting

Netlify


Note: I have developed this project ~ [19] as part of React and Projects Course taught by John Smilga..

About

Stock Photos Project using React

https://react-stock-photos-prod.netlify.app/


Languages

Language:CSS 42.6%Language:JavaScript 40.3%Language:HTML 17.1%