Pet Shop front-end apps with React JS

These app is a simple CRUD interface for a Pet Shop.
It demonstrates the use of ReactJS & ES6.
The app calls a back-end api hosted on another Github project : pet-rest-api.

Important : You need to run the back-end api before launching the app.

1. Installation

Clone the github repository :

git clone https://github.com/perscrew/pet-shop-reactjs.git

Launch npm install to retrieve dependencies
```
npm install
```

2. Set up the server back-end URL

You can set-up the default back-end server URL in the /src/api/config.js file.
Just replace the SERVER_BASE_URL constant with the desired value :

//Configure here the server api base url
const SERVER_BASE_URL = "http://localhost:8080";

3. Launch the app

Run npm start to launch webpack dev-server
```
npm start
```
By default, the server is running on the port 3000. You can modify these configuration in package.json & webpack.config.js files. Find “3000” and replace it with the desired port.
Once npm start has finished, you can check the app on your browser http://localhost:3000

4. Use the app

When you launch the app you arrive on the welcome page. You can consult the pet list of your shop.

Welcome page

You can add a pet by clicking on the menu header link “add pet”.

Add pet

You can edit a pet by clicking on the HomePage edit list button.

Edit pet

You can also delete a pet by clicking on the Homepage delete button.

Delete pet

5. Run test units

To run the test units simply run npm test

npm test

The test units are organized in 3 sections :

components (react component)
reducers (redux reducer)
saga (redux-saga)

6. Build the app for production environment

To build the app for production environment run npm run build-prod.

npm run build-prod

7. Appendices

Potential enhancements

Add a login to secure the app, using OAUTH or JWT Token.
Use Request Headers for each fetch call on pet api to improve security : use OAUTH or JWT Token.
Use environment variable to configure the server api URL & PORT.
Use environment variable to configure the webpack-dev-server PORT.

Third party libraries used

You will find below the different third party libraries used in the project.

Feature	Packages	Benefits
React	`react`	A declarative, efficient, and flexible JavaScript library for building user interfaces
	`react-dom`	Serves as the entry point of the DOM-related rendering paths
	`react-hot-loader`	Tweak React components in real time when developing
Redux	`redux`	A predictable state container for JavaScript apps
	`react-redux`	React bindings for Redux
	`redux-freeze`	Redux middleware that prevents state from being mutated anywhere in the app
Router	`react-router`	Declarative routing for React. Your app has pages now
	`react-router-redux`	Simple bindings to keep react-router and redux in sync
Bootstrap	`react-bootstrap`	Bootstrap 3 components built with React
	`react-router-bootstrap`	Integration between React Router and React-Bootstrap
Forms	`redux-form`	A Higher Order Component using react-redux to keep form state in a Redux store
Asynchronous	`redux-saga`	Asynchronous API calls made easy with Saga
Unit tests	`mocha`	Simple javascript test framework
	`enzyme`	JavaScript Testing utilities for React components
	`react-addons-test-utils`	Required by enzyme. Makes it easy to test React components
	`ignore-styles`	Ignore imported style files when running in Node
Sass	`node-sass`	Mature, stable, and powerful CSS extension language
Webpack	`webpack`	A bundler for javascript, css and others
	`webpack-dev-server`	Serves the app at http://localhost:8080/
	`extract-text-webpack-plugin`	Webpack plugin that builds the css bundle file
	`style-loader`	Webpack module that loads styles
	`css-loader`	Webpack module that loads css styles
	`sass-loader`	Webpack module that loads sass styles
	`clean-webpack-plugin`	Webpack module to remove previous build files
Babel	`babel-core`	Compiler that helps node.js and the browser to understand the new js syntax
	`babel-runtime`	Helps node.js to understand the new js syntax
	`babel-preset-es2015`	Helps node.js to use ES2015 Javascript syntax
	`babel-preset-react`	Helps node.js to use React’s JSX syntax
	`babel-preset-stage-3`	Helps node.js to use the spread operator
	`babel-loader`	Helps webpack to compile the new javascript syntax
	`babel-polyfill`	Helps the browser to understand the new js syntax
	`whatwg-fetch`	Helps the browser to use fetch
Sinon	`sinon`	Standalone and test framework agnostic JavaScript test spies, stubs and mocks.