https://github.com/junip/react-unsplash

A Unsplash Cloned Photo Search App made with React
https://github.com/junip/react-unsplash

integration photo-search react react-unplash react-with-unsplash unplash unplash-api unsplash unsplash-api unsplash-client unsplash-clone unsplash-js unsplash-photos unsplash-source unsplashapi

Last synced: 3 months ago
JSON representation

A Unsplash Cloned Photo Search App made with React

• Host: GitHub
• URL: https://github.com/junip/react-unsplash
• Owner: junip
• License: mit
• Created: 2019-03-09T15:23:13.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T16:31:41.000Z (about 2 years ago)
• Last Synced: 2024-11-04T15:51:18.009Z (4 months ago)
• Topics: integration, photo-search, react, react-unplash, react-with-unsplash, unplash, unplash-api, unsplash, unsplash-api, unsplash-client, unsplash-clone, unsplash-js, unsplash-photos, unsplash-source, unsplashapi
• Language: JavaScript
• Homepage: https://react-unsplash.now.sh/
• Size: 50.7 MB
• Stars: 58
• Watchers: 2
• Forks: 21
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/uses-css.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/check-it-out.svg)](https://forthebadge.com)

[![madewithreact](https://img.shields.io/badge/madewith-react-green.svg)](https://reactjs.org/) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

# React Unsplash

React Unsplash is photo search webapp made in React which uses Unsplash JSON APIs for photo search. A clone app of  [https://unsplash.com](https://unsplash.com/) the most powerful photo engine in the world. Trying to make the unplash like UI  and add functionality as much as possible. Completed UI screenshots

Main search UI

![Interface](Assets/unsplash_clone.jpg?raw=true "Web App picture")

Donwloading Photos and showing likes

![Interface](Assets/download_photos.jpg?raw=true "Web App picture")

## Prerequisites

You are required to have [Node.js](https://nodejs.org/) installed to run the app locally.

## Getting Started

Install [unsplash-js](https://github.com/unsplash/unsplash-js) ([github](https://github.com/unsplash/unsplash-js))

```

npm i --save unsplash-js

```

### Website Link

[react-unsplash](react-unsplash.now.sh)

## Key Usages 

- Access the unsplash API by  [registering as a developer](https://unsplash.com/developers).

- Before using the Unsplash API, read the API Guidelines. Specifically you must:

   - [hotlink images](https://help.unsplash.com/api-guidelines/more-on-each-guideline/guideline-hotlinking-images)

   - [attribute photographers](https://help.unsplash.com/en/articles/2511315-guideline-attribution)

   - [trigger a download when appropriate](https://help.unsplash.com/en/articles/2511258-guideline-triggering-a-download)

## API Usage in Project 

Make a new `.env` file and do the following

```

 APP_ACCESS_KEY = your_app_access_key

```

## Usage

```sh

# install all dependency

~/ npm install

# run

~/ npm run dev 

```

## Formatting Code

```sh

~/ npm run format 

```

## Clearing Build

```sh

~/ npm run clear 

```

## Contribution

The devlopement of the App is still in progress. Only some part is implemented. You can help with 

code contribution to add more functionality in the App.

## License

**React Unplash** is available under the **MIT license**. See the [LICENSE](https://github.com/junipdewan/react-unsplash/blob/master/LICENSE.md) file for more info.

## Important 

[Unplash](https://unsplash.com) is a registered trademark. This project is just for learning purposes and should be treated as such.