Giveaway-Picker

Randomly pick users for giveaways on Instagram.

Develop Locally

Clone this repo and run yarn install, yarn start and then go to http://localhost:3000 to view and test app.

Problems

This app is in sandbox mode as Instagram declined the app registration request. Therefore, it now only works with my account.
oembed endpoint is broken today (August 7th, 2017) and I am fairly sure it's the Instagram API's problem, as the embed button disappeared on every post, and get requests to the endpoint gives 404 response code.

Toos/Technologies Used

React

I use create-react-app that easily set up the whole project as a React app.

Bootstrap 4

Set up Reactstrap to use bootstrap 4 components in as React components.

To add Reactstrap and update dependencies properly, I ran:

$ yarn add bootstrap@4.0.0-alpha.6
$ yarn add react-addons-transition-group react-addons-css-transition-group
$ yarn add reactstrap

Then followed the instructions by adding

import 'bootstrap/dist/css/bootstrap.css';

in src/index.js, and any component (button as an example) that you would like to use with

import { Button } from 'reactstrap';

in src/App.js.

Routing System

The routing system is done by using react-router. The routes are specified in src/App.js.

Authentication

The Instagram API uses OAuth 2.0 protocol.

As GitHub only hosts static websites, this projects uses client-side/implicit authentication with the help of react-router for redirecting.

The access token is stored persistently by using localStorage.

Instagram API Requests

Requests are made by using fetch-jsonp. XMLHttpRequests have cross-domain restrictions (a request from one domain to another will not succeed) as Instagram API does not have access-control-allow-origin in the headers.

Travis

Travis CI for build status. More tests to come.

chruxin/giveawaypicker