contribution guideline (#355)

CONTRIBUTING.md

@@ -0,0 +1,77 @@
+# Contributing
+
+You want to help? You rock! Now, take a moment to be sure your contributions make sense to everyone else.
+
+## Reporting Issues
+
+Found a problem? Want a new feature?
+
+- See if your issue or idea has [already been reported].
+
+
+## Submitting Pull Requests
+
+Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.
+
+1. To begin, [fork this project], clone your fork, and add our [upstream].
+	```bash
+	# Clone your fork of the repository into the current directory
+	git clone https://github.com/<your-username>/quran.com-frontend
+	# Navigate to the newly cloned directory
+	cd quran.com-frontend
+	#Assign the forked repository to a remote call "origin"
+	git remote add origin git://github.com/<your-username>/quran.com-frontend.git
+	# Assign the original repository to a remote called "upstream"
+	git remote add upstream https://github.com/quran/quran.com-frontend
+	# Install the tools necessary for development
+	npm install
+	```
+
+2. Create a branch for your feature or fix:
+	```bash
+	# Move into a new branch for a feature
+	git checkout -b feature/thing
+	```
+	```bash
+	# Move into a new branch for a fix
+	git checkout -b fix/something
+	```
+
+3. Be sure your code follows our practices.
+	```bash
+	# Test current code
+	npm run test
+	```
+	Our `npm run test` tests and _watch_. Otherwise use `npm run test:ci:unit` for CI level tests.
+
+	We also have nightwatch function tests. You can install nightwatch globally and can run tests like this:
+	```
+	nightwatch --test tests/functional/specs/Index_spec.js
+	```
+
+4. To create a PR you need to push your branch to the origin(forked) remote and then press some buttons on GitHub:
+	```bash
+	# Push a feature branch
+	git push -u origin feature/thing
+	```
+	```bash
+	# Push a fix branch
+	git push -u origin fix/something
+	```
+
+	This will create the branch on your GitHub project. The ```-u``` flag links this branch with the remote one, so that in the future, you can simply type ```git push origin```.
+
+5. Now [open a pull request] with a clear title and description.
+
+## Sever-side integration
+Unless you have the backend API running locally, you will need to update the `API_URL`, in `development.env` file, from `localhost` to `api.quran.com`. Leave the port number same.
+
+To start the app, run `npm run dev` which will run both the server and the client (webpack) to compile upon edits. Go to http://localhost:8001 in your browser, not 8000 (that is just the express server).
+
+If you experience an issue, check the [contributing] guidelines.
+
+[upstream]: https://help.github.com/articles/syncing-a-fork/
+[contributing]: https://guides.github.com/activities/contributing-to-open-source/
+[already been reported]: https://github.com/quran/quran.com-frontend/issues
+[fork this project]:     https://github.com/quran/quran.com-frontend/fork
+[open a pull request]:   https://help.github.com/articles/using-pull-requests/

README.md

@@ -2,7 +2,7 @@
 # Quran.com
 
 This is the project soon to be the Quran.com facing site. This is built in
-Reactjs + Redux + Expressjs + Webpack. It is isomorphic (javascript shared
+[Reactjs] + [Redux] + [Expressjs] + [Webpack]. It is isomorphic (javascript shared
 between both the server and the client) for SEO reasons.
 
 [![Stories Ready](https://badge.waffle.io/quran/quran.com-frontend.svg?label=ready&title=Ready)](http://waffle.io/quran/quran.com-frontend)
@@ -13,33 +13,21 @@ between both the server and the client) for SEO reasons.
 [![Dependency Status](https://david-dm.org/quran/quran.com-frontend.svg)](https://david-dm.org/quran/quran.com-frontend) [![devDependency Status](https://david-dm.org/quran/quran.com-frontend/dev-status.svg)](https://david-dm.org/quran/quran.com-frontend#info=devDependencies)
 [![Code Climate](https://codeclimate.com/github/quran/quran.com-frontend.png)](https://codeclimate.com/github/quran/quran.com-frontend)
 
-## Getting started
-Simply clone this repo, then run `npm install` to install all the required node_modules.
-From there, you are ready to go!
+## How to contribute
+We trust that you will not copy this idea/project, this is at the end for the sake of Allah and we all have good intentions while working with this project. But We must stress that copying the code/project is unacceptable.
+
+Read the [contributing] section before creating an issue.
 
-## Developing
+## Server-Side Integration
 Unless you have the backend API running locally, you will need to update the `API_URL`, in `development.env` file, from `localhost` to `api.quran.com`. Leave the port number same.
 
 To start the app, run `npm run dev` which will run both the server and the client (webpack) to compile upon edits. Go to http://localhost:8001 in your browser, not 8000 (that is just the express server).
 
 
-#### Tests
-Run `npm run test` to run the tests locally and watching. Otherwise use `npm run test:ci:unit` for CI level tests.
-
-We also have nightwatch function tests. You can install nightwatch globally and can run tests like this:
-```
-nightwatch --test tests/functional/specs/Index_spec.js
-```
-
 ## Backend
 Current at: https://github.com/quran/quran-api-rails
 DB is private, message me for acceess.
 
-## How to contribute
-Fork this repo, then create a PR for specific fixes, improvements, etc. We trust that
-you will not steal this, this is at the end of the day for the sake of Allah and we
-all have good intentions while working with this project. But I must stress, stealing
-this is unacceptable.
 
 ## Design
 We currently use InvisionApp. Again, contact me if you'd like access to it.
@@ -53,3 +41,9 @@ analyze-bundle-size bundle-stats.json
 ```
 
 ## [View project issues on waffle.io...](https://waffle.io/quran/quran.com-frontend)
+
+[Reactjs]: https://facebook.github.io/react/docs/getting-started.html
+[Redux]: http://redux.js.org/
+[Expressjs]: http://expressjs.com/en/starter/hello-world.html
+[Webpack]: http://webpack.github.io/docs/what-is-webpack.html
+[contributing]: CONTRIBUTING.md