https://github.com/artdevgame/flickr-browser

Flickr Browser: Code test for Holiday Extras (2016)
https://github.com/artdevgame/flickr-browser

axios docker gulp libsass react react-router redux

Last synced: 19 days ago
JSON representation

Flickr Browser: Code test for Holiday Extras (2016)

• Host: GitHub
• URL: https://github.com/artdevgame/flickr-browser
• Owner: artdevgame
• Created: 2017-01-06T09:53:20.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-09T08:42:08.000Z (almost 8 years ago)
• Last Synced: 2024-10-10T15:23:52.970Z (about 1 month ago)
• Topics: axios, docker, gulp, libsass, react, react-router, redux
• Language: JavaScript
• Homepage:
• Size: 9.15 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Flickr Browser

## Overview

Browse publicly accessbile photos. Optionally filter by tag or text search.

Popular photos display their view count as a badge in the top right corner.

## How do I use this tool?

You must have `yarn` or `docker-compose` installed.

Copy `.env.example` to `.env` and replace the Flickr API credentials with your own.

Pull the project dependencies by running `yarn`.

To run the app in development mode, run `yarn start`.

To run the app in production mode, run `yarn build ; docker-compose up -d`, by default `http://localhost:1337` will render the site. If you would like to change the port, you can do so in `docker-compose.yml`.

If I was to run this in a production environment, I would make use of [nginx-proxy](https://github.com/jwilder/nginx-proxy) and set a `VIRTUAL_HOST` environment on the container to whatever domain I would like to use.

## Why has this tool been developed?

To showcase how I would approach building a SPA. The app makes use of the following technology:

* React

* React Router

* Redux

* Axios

* Docker

* LibSass

* Gulp

I have considered the following ideas in the design:

* Responsive Layout

* Lazy loading images

Future considerations could include:

* Infinite scrolling, or possibly using a queuing system (such as RabbitMQ) to retrieve updates to the feed

* Caching results returned from the API

* Introducing react-router-redux to manage route state persistance

## Demo

![Preview](https://github.com/flyingbuddha/flickr-browser/blob/master/ui.gif)