perscrew / pet-shop-reactjs

Simple demo for a pet shop with ReactJS

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.

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

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

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

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.