Skip to content

First React application (done at beginning of React part of my web development course, 10/2020) - application for searching collections of photos from Unsplash using Unsplash API. Refactored at 11/2020 to implement infinite scrolling. Refactored once again in 01/2021 to add backend as preparation for deployment

License

Notifications You must be signed in to change notification settings

Alice-Rez/pic-pick

Repository files navigation

"Pick your pictures"

Set it up on your localhost

Description

Application for searching photo collections from Unsplash API. Just type theme of the photos you want to get in the searching field and see, what beautiful photos you will get.

First app that I created during my web development course using React. Just quick cca 2 hours work.

New Update:

Refactored at 05.11.2020 for implementation of the infinite scrolling. Where needed the components were changed to functional ones to be able to use Hooks. Customized Hook also created. Added loader.

Now the app is automatically calling another photos from API when user scroll down to the last result.

Once again refactored at 19.01.2020 for safe deployment through heroku. Added backend, that now handle call to API and sent data back to frontend, which displays them. frontend has now no access to API key.

Setup

  1. Clone this repository to your computer
  2. For installing all necessary dependencies, run inside of the local created repository (do it once in root and once in client folder):
    npm install
    
  3. Get your own API key from Unsplash API
  4. Create new file with name .env in root
  5. Insert your own API key in the .env :
    API_KEY = <here-comes-your-own-API-key>
  6. In app.js uncomment line 18 (app.use(cors()))
  7. Enjoy using application

Implementation

Application uses Unsplash API

Used technologies: Express.js, React, Create React App, Axios, intersection observer (infinite scrolling), React Hooks, custom Hook, asynchronous Javascript (fetch), API, JS modules, JSX, CSS, CSS variables, Bootstrap

For the project configuration was used Create React App package.

Implementation of the infinite scrolling and creation of the custom Hook made according tutorial from Web Dev Simplified.

Server created manually without Express-generator.

Acknowledgement

This project was bootstrapped with Create React App.

About

First React application (done at beginning of React part of my web development course, 10/2020) - application for searching collections of photos from Unsplash using Unsplash API. Refactored at 11/2020 to implement infinite scrolling. Refactored once again in 01/2021 to add backend as preparation for deployment

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published