https://github.com/yog9/snapshot

SnapShot is Gallery created using React Hooks, Context API and React Router. The Routes were setup for four default pages and a search page. Also the images were displayed using the Flickr API and Axios to fetch data.
https://github.com/yog9/snapshot

axios flickr-api react-example react-hooks reactjs travis-ci

Last synced: 11 months ago
JSON representation

SnapShot is Gallery created using React Hooks, Context API and React Router. The Routes were setup for four default pages and a search page. Also the images were displayed using the Flickr API and Axios to fetch data.

• Host: GitHub
• URL: https://github.com/yog9/snapshot
• Owner: Yog9
• Created: 2019-06-30T09:37:31.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-02T19:26:45.000Z (about 2 years ago)
• Last Synced: 2025-04-03T20:13:16.565Z (11 months ago)
• Topics: axios, flickr-api, react-example, react-hooks, reactjs, travis-ci
• Language: JavaScript
• Homepage: https://yog9.github.io/SnapShot/
• Size: 3.37 MB
• Stars: 426
• Watchers: 14
• Forks: 544
• Open Issues: 54
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

          
# Snap Shot [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=See%20this%20react%20example&url=https://yog9.github.io/SnapShot/&hashtags=react,context-api,freecodecamp,developers)

[![Build Status](https://travis-ci.org/Yog9/SnapShot.svg?branch=master)](https://travis-ci.org/Yog9/SnapShot)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![HitCount](http://hits.dwyl.com/Yog9/SnapShot.svg)](http://hits.dwyl.com/Yog9/SnapShot)

[Demo of Snap Shot](https://yog9.github.io/SnapShot/)

![](/snapscout.png)

### Summary

Snap Shot is a gallery created using React,React Hooks, React Router and Context API. The Routes were setup for four default pages and a search page. Also the images were displayed using the Flickr API and axios to fetch data.

### Motivation

The purpose of this project was to get familiar with React Hooks and Context API.

### Getting Started

Click the demo link or clone/download the repository on your local machine.

Create a config.js file in api folder inside src folders. In config.js file write

`export const apiKey = "YOUR_FLIKR_API_KEY";`

##### Install dependencies

`yarn install`

##### Run Snap Shot from the root directory.

`yarn start`

### Built With

- React js

- React Router

- React Hooks

- Context API

- Flickr API

### Features

**1. Responsive Design.**

**2. Search functionality added to search photos from API.**

### Coming Soon

- [ ] Cypress E2E Tests

### Contributing

Everyone is welcomed to contribute to this project. You can contribute either by submitting bugs or suggesting improvements by opening an issue on GitHub. Please see the [CONTRIBUTING](CONTRIBUTING.md) guidelines for more information.

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).