Merge pull request #12 from jayehernandez/improved-docs

Improve Contributing Docs

.gitignore

@@ -5,3 +5,6 @@ client/.env
 
 server/node_modules
 server/.env
+
+.DS_Store
+client/.DS_Store

README.md

@@ -1,4 +1,4 @@
-![Title](docs/title.png)
+![Title](docs/screenshots/title.png)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
@@ -24,7 +24,7 @@
 
 ### [Download Chrome Extension](https://chrome.google.com/webstore/detail/letra/cjodkkjokggcaeacdhjliobekbnnmoio)
 
-![Main Screenshot](docs/main_screenshot.png)
+![Main Screenshot](docs/screenshots/main_screenshot.png)
 
 ## ✨ Features
 - New word everyday
@@ -47,15 +47,17 @@
 
 ## 🤝 Contributing
 
-Contributions, issues and feature requests are welcome!<br /> Feel free to check the [issues page](https://github.com/jayehernandez/letra-extension/issues) for any open issues.
+Contributions, issues and feature requests are welcome!<br />
+
+Feel free to check the [issues page](https://github.com/jayehernandez/letra-extension/issues) for any open issues. If this is your first time contributing to Open Source, check out the [Contributing Guidelines](https://github.com/jayehernandez/letra-extension/blob/improved-docs/docs/how_to_contribute.md).
 
 You can also suggest a new feature by creating an Issue. Please wait for confirmation before working on it.
 
 ### Good for First Timers
 
+- [Add a learning quote](https://github.com/jayehernandez/letra-extension/blob/master/docs/new_quote.md) (Easiest way to contribute! 🚀)
 - [Add a new language](https://github.com/jayehernandez/letra-extension/blob/master/docs/new_language.md)
 - Edit translations from existing languages - guide 🔜
-- Add a learning quote - guide 🔜
 
 ## 🙏🏻 Acknowledgements
 
@@ -89,7 +91,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
 
-
 ## 📝 License
 
 Copyright © 2020 [Jaye Hernandez](https://github.com/jayehernandez).<br />

docs/how_to_contribute.md

@@ -0,0 +1,51 @@
+# 🗒 What the Fork? (Contributing Guidelines)
+
+> A simple guide on how to contribute to this project, from start to end! Also did you get the pun? I love The Good Place.
+
+Is this your first time contributing to open source? No worries, here's a simple guide to help you out! If you get stuck on a step, please don't hesitate to ask me. :)
+
+You can contribute in two ways, whichever is more convinient for you:
+1. Via Github Website _(no need to download anything!)_
+2. Via Local Machine
+
+## 1️⃣ Via Github Website
+1. Check the **Issues page** to choose what you want to contribute on!
+
+2. Click on **Fork** on the upper right hand of the screen.
+![Fork Repo](screenshots/fork.png)
+![Forking](screenshots/forking.png)
+
+> ☁️ Forking a Repository allows you to have your own copy of the repository. This is the best practice for contributing to open source projects.
+
+3. Once the repo is forked, you'll be redirected to the newly created repository. You should see **forked from jayehernandez / letra-extension**.
+![Forked Repo Name](screenshots/forked_repository_name.png)
+
+4. You can now make changes to this repository, depending on what issues you chose to take on. 👩🏻‍💻👨🏻‍💻
+
+5. When you're finished which the changes, you'll see that your repository is ahead of some commits from the main repository. Click on **Pull Request** to start creating a pull request (PR).
+
+![Branch Ahead](screenshots/branch_ahead.png)
+
+> ☁️ Pull Requests allow maintainers of a project to review your code and merge it to the main repository afterwards.
+
+6. You'll be able to choose which branch you'd like to compare with. Make sure you choose the **develop** branch.
+
+![Choose Correct Branch](screenshots/choose_branch.png)
+
+> ☁️ Pull Requests pointing to master will not be accepted. The master branch is all the code that is currently published in the Chrome Web Store.
+
+7. After selecting the correct branch, you'll be able to click on **Create pull request**.
+
+![Correct Branch](screenshots/correct_branch.png)
+
+8. You'll be able to edit the title and description of your pull request before actually creating the pull request. If you are referencing an open issue, please reference it here. 
+
+![Create PR](screenshots/create_pr.png)
+
+9. Hooray! You successfully created a PR for Letra! I'll be reviewing the changes you created and if everything is okay, your changes will be merged. 🥳
+
+![Created PR](screenshots/created_pr.png)
+
+## 2️⃣ Via Local Machine
+
+🚧 Guide coming soon! 🔜

docs/new_quote.md

@@ -0,0 +1,28 @@
+# ➕ Adding Quotes
+
+> No need for experience in VueJS and NodeJS is needed to add a new language. **You'll only be working with JSON files 🎉**
+
+## 📝 Guidelines
+
+### Where is this seen?
+![Main Screenshot](screenshots/main_screenshot.png)
+
+This is seen below the word of the day. This is randomized so that you'll get a different quote each day! It's meant to serve as an inspiration for language learning.
+
+### Adding Quote
+You'll need to add the new quote in the `server/data/quotes.json` file.  
+
+Example:
+```sh
+{
+  "sentence": "Languages, just like people, are worlds within themselves. They have the incredible ability to provide us with a clearer, more profound and detailed perspective of a culture and its views on life, nature, and death.",
+  "author": "Orge Castellano"
+}
+```
+
+Here's a small checklist to make sure your Pull Request is accepted!
+
+## ✅ Checklist
+- [ ] The quote(s) added are not ❌ duplicates.
+- [ ] The sentence attribute does not have inner quotation marks, and is ended with a period.
+- [ ] Copy pasted the raw JSON `quotes.json` file to [JSONLint](https://jsonlint.com/) and made sure that the modified JSON file is valid.