npm package: @ied/image-posting.web
Description: [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
Latest version: 0.0.2

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

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

# How to initialize a new project ?

#### 1. Clone this repository
```sh
git clone git@github.com:inextensodigital/react-boilerplate.git my-project
```

#### 2. Switch the remote to your new project repository
```sh
git remote remove origin
git remote add origin git@github.com:inextensodigital/my-project.git
```

#### 3. Create and protect dev and master branches

<img src=".github/protect-branch.png" width="700" />

#### 4. Edit .travis.yml config to match your bucket/repository

```diff
-  bucket: ied-react-boilerplate
+  bucket: ied-my-project
...
  on:
    all_branches: true
-   repo: inextensodigital/react-boilerplate
+   repo: inextensodigital/my-project
```

# Code styling

We follow the javascript rules published by [airbnb](https://github.com/airbnb/javascript) with some adjustments you can explore [here](https://github.com/inextensodigital/react-boilerplate/blob/master/.eslintrc#L15-L52). 

# CI/CD

In order to have a good continuous integration we aim to follow [A successful Git branching model](http://nvie.com/posts/a-successful-git-branching-model/), by ***Vincent Driessen***.

**All branches on the upstream will be tested and deployed to an S3 bucket automatically** in order to provide a testable version of the work in progress at any time.

# Infrastructure

## S3

All versions of an application are deployed to the same AWS S3 bucket at different paths. 

```
my-bucket/master/FR
my-bucket/master/DK
my-bucket/dev/FR
my-bucket/dev/DK
```
## Cloudfront

Cloudfront is responsible to expose the application to the web, each applications as its own distribution.

# Libraries

A non exhaustive list of libraries we love, and we have crash tested.

#### Client
- [redux](https://github.com/reactjs/redux/) Predictable state container for JavaScript apps
- [react-relay](https://github.com/facebook/relay): Relay is a JavaScript framework for building data-driven React applications
- [react-transition-group](https://github.com/reactjs/react-transition-group): An easy way to perform animations when a React component enters or leaves the DOM
- [react-router-dom](https://github.com/ReactTraining/react-router): Declarative routing for React
- [styled-components](https://github.com/styled-components/styled-components): Visual primitives for the component age 💅 
- [material-components](https://material.io/components/web/catalog/): Modular and customizable Material Design UI components for the web
- [date-fns](https://github.com/date-fns/date-fns): Modern JavaScript date utility library
- [marked](https://github.com/chjj/marked): A markdown parser and compiler. Built for speed

#### Server
- [express](https://github.com/expressjs/express): Fast, unopinionated, minimalist web framework for node
- [graphql-tools](https://github.com/apollographql/graphql-tools): Build and mock your GraphQL.js schema using the schema language
#### Both
- [faker](https://github.com/marak/Faker.js/): Generate massive amounts of fake data in Node.js and the browser
- [query-string](https://github.com/sindresorhus/query-string): Parse and stringify URL query strings