Add contributing, dev env and tips section to CONTRIBUTING.md

.github/CONTRIBUTING.md

@@ -13,14 +13,6 @@ To get an overview of the project, read the [README](README.md). Here are some r
 - [GitHub flow](https://docs.github.com/en/get-started/quickstart/github-flow)
 - [Collaborating with pull requests](https://docs.github.com/en/github/collaborating-with-pull-requests)
 
-## Before you start!
-Before starting a contribution, please make your contribution is part of an open issue on [our issues page](https://github.com/movie-web/movie-web/issues). 
-
-GitHub issues are how we track our bugs and feature requests that will be implemented into movie-web - all contributions **must** have an issue and be approved by a maintainer before a pull request can be worked on.
-
-> :warning: The exception to this are language contributions, which are discussed in [this section](#language-contributions)
-
-Also, make sure that the issue you would like to work on has not been got the "awaiting-approval" label by a maintainer. Otherwise, if we reject the issue it means your work will have gone to waste!
 
 ## Requesting a feature or reporting an bug
 There are two places where to request features or report bugs:
@@ -36,3 +28,42 @@ If you do not have a GitHub account, or would like to discuss a feature or bug w
 To make a GitHub issue for movie-web, please visit the [new issue page](https://github.com/movie-web/movie-web/issues/new/choose) where you can pick either the "Bug Report" or "Feature Request" template.
 
 When filling out an issue template, please make sure to include as much detail as possible and include any screenshots or console logs as appropriate.
+
+After an issue is created, it will be assigned either the https://github.com/movie-web/movie-web/labels/bug or https://github.com/movie-web/movie-web/labels/feature label, along with https://github.com/movie-web/movie-web/labels/awaiting-approval. One of our maintainers will review your issue and, if it's accepted, will assign the https://github.com/movie-web/movie-web/labels/planned label.
+
+## Before you start!
+Before starting a contribution, please make your contribution is part of an open issue on [our issues page](https://github.com/movie-web/movie-web/issues). 
+
+GitHub issues are how we track our bugs and feature requests that will be implemented into movie-web - all contributions **must** have an issue and be approved by a maintainer before a pull request can be worked on.
+
+If a pull-request is opened before an issue is created and accepted, you may be at risk of having your pull request rejected! Always check with us before starting work on a feature - we don't want to waste your time!
+
+> **Note**
+> The exception to this are language contributions, which are discussed in [this section](#language-contributions)
+
+Also, make sure that the issue you would like to work on has not been got the "awaiting-approval" label by a maintainer. Otherwise, if we reject the issue it means your work will have gone to waste!
+
+## Contributing
+If you're here because you'd like to work on an issue, amazing! Thank you for even considering contributing to movie-web, it means a lot :heart:
+
+Firstly, make sure you've read the [Before you start!](#before-you-start) section!
+
+When you have found a GitHub issue you would like to work on, you can request to be assigned to the issue by commenting on the GitHub issue.
+
+If you are assigned to an issue but for whatever reason can't complete it, no problem! Just let us know and we will open up the issue to have someone else assigned.
+
+### Recommended Development Environment
+Our recommended development environment to work on movie-web is:
+- [Visual Studio Code](https://code.visualstudio.com/)
+- [ESLint Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+
+Our project is setup to enforce formatting and code style standards using ESLint. 
+
+### Tips
+Here are some tips to make sure that your pull requests are :pinched_fingers: first time!
+
+- KISS - Keep It Simple Soldier! - Simple code makes readable and efficient code!
+- Follow standard best practices for TypeScript and React.
+- Keep as much as possible to the style of movie-web. Have a look round our codebase to familiarise yourself with how we do things!
+- Make sure to take note of the ESLint errors and warnings! **Do not ignore them!** They are there for a reason.
+- Test, test, test! Make sure you fully test the features you are contributing.