Merging documentation to master

documentation/.gitignore

@@ -0,0 +1,2 @@
+# Apple macOS folder attribute file
+.DS_Store

documentation/CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at developer@human-connection.org. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

documentation/README.md

@@ -0,0 +1,18 @@
+# Let's change the World
+
+## Why do we need HC Nitro?
+
+> This Prototype tries to resolve the biggest hurdle of connecting our services together. This is not possible in a sane way using our current approach.
+>
+> With this Prototype we can explore using the combination of GraphQL and the Neo4j Graph Database for achieving the connected nature of a social graph with better development experience, as we do not need to connect data on our own any more through weird table structures etc.
+>
+> **Advantages:**
+>
+> * easier data structure
+> * better connected data
+> * easy to achieve "recommendations" based on actions \(relations\)
+> * more performant and better to understand API
+> * better API client that uses caching
+>
+> We still need to evaluate the drawbacks and estimate the development cost of such an approach.
+

documentation/SUMMARY.md

@@ -0,0 +1,48 @@
+# Table of contents
+
+* [Let's change the World](README.md)
+* [Network Specification](concept/specification.md)
+
+## Backend
+
+* [Backend Installation](backend/installation/README.md)
+  * [Docker Installation](backend/installation/docker-backend.md)
+  * [Local Installation](backend/installation/local-backend.md)
+  * [Kubernetes](backend/installation/kubernetes.md)
+* [GraphQL with Apollo](backend/graphql-with-apollo/README.md)
+  * [Mocking](backend/graphql-with-apollo/mocking.md)
+  * [Seeding](backend/graphql-with-apollo/seeding.md)
+* [Middleware](backend/middleware.md)
+* [Import](backend/data-import.md)
+* [Todo's](backend/todos.md)
+
+## Web Frontend
+
+* [Web Installation](web-frontend/installation.md)
+* [Styleguide](web-frontend/styleguide.md)
+* [Todo's](web-frontend/todos.md)
+
+## Workflow
+
+* [Testing Guide](workflow/testing/README.md)
+  * [Integration Testing](workflow/testing/integration-testing.md)
+  * [Component Testing](workflow/testing/component-testing.md)
+  * [Unit Testing](workflow/testing/unit-testing.md)
+* [Contribute](workflow/README.md)
+  * [Our GitHub Workflow](workflow/contribute/github-workflow.md)
+* [Deployment](workflow/deployment.md)
+
+## Documentation
+
+* [Edit this Documentation](documentation/edit-this-documentation.md)
+
+## Recources
+
+* [Human-Connection.org](https://human-connection.org)
+* [Styleguide](http://styleguide.human-connection.org)
+* [Staging \(comming soon\)](https://staging.nitro.human-connection.org/)
+
+## Translations
+
+* [Lokalise.co](https://lokalise.co/public/202462935bc64b38d64bb9.16240920/)
+

documentation/backend/data-import.md

@@ -0,0 +1,38 @@
+# Import
+
+This guide helps you to import data from our legacy servers, which are using FeathersJS and MongoDB.
+
+## Prerequisites
+
+You need [docker](https://www.docker.com/) installed on your machine. Furthermore you need SSH access to the server and you need to know the following login credentials and server settings:
+
+| Environment variable | Description |
+| :--- | :--- |
+| SSH\_USERNAME | Your ssh username on the server |
+| SSH\_HOST | The IP address of the server |
+| MONGODB\_USERNAME | Mongo username on the server |
+| MONGODB\_PASSWORD | Mongo password on the server |
+| MONGODB\_AUTH\_DB | Mongo authentication database |
+| MONGODB\_DATABASE | The name of the mongo database |
+| UPLOADS\_DIRECTORY | Path to remote uploads folder |
+
+## Run the database migration
+
+Run `docker-compose` with all environment variables specified:
+
+```bash
+SSH_USERNAME=username SSH_HOST=some.server.com MONGODB_USERNAME='hc-api' MONGODB_PASSWORD='secret' MONGODB_DATABASE=hc_api MONGODB_AUTH_DB=hc_api UPLOADS_DIRECTORY=/var/www/api/uploads  docker-compose up
+```
+
+Download the remote mongo database:
+
+```bash
+docker-compose exec db-migration-worker ./import.sh
+```
+
+Import the local download into Neo4J:
+
+```bash
+docker-compose exec neo4j import/import.sh
+```
+

documentation/backend/graphql-with-apollo/README.md

@@ -0,0 +1,8 @@
+# GraphQL with Apollo
+
+GraphQL is a data query language which provides an alternative to REST and ad-hoc web service architectures. It allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server.
+
+![GraphQL Playground](../../.gitbook/assets/graphql-playground.png)
+
+
+

documentation/backend/graphql-with-apollo/mocking.md

@@ -0,0 +1,8 @@
+# Mocking
+
+### Mocking API Results
+
+Alternatively you can just mock all responses from the api which let you build a frontend application without running a neo4j instance.
+
+Just set `MOCK=true` inside `.env` or pass it on application start.
+

documentation/backend/graphql-with-apollo/seeding.md

@@ -0,0 +1,20 @@
+# Seeding
+
+## Seeding The Database
+
+Optionally you can seed the GraphQL service by executing mutations that will write sample data to the database:
+
+{% tabs %}
+{% tab title="Yarn" %}
+```bash
+yarn db:seed
+```
+{% endtab %}
+
+{% tab title="NPM" %}
+```bash
+npm run db:seed
+```
+{% endtab %}
+{% endtabs %}
+

documentation/backend/installation/README.md

@@ -0,0 +1,77 @@
+# Backend Installation
+
+The Backend repository can be found on GitHub. [https://github.com/Human-Connection/Nitro-Backend](https://github.com/Human-Connection/Nitro-Backend)
+
+{% hint style="info" %}
+TODO: Create documentation section for How to Start and Beginners.
+{% endhint %}
+
+Here are some general informations about our [GitHub Standard Fork & Pull Request Workflow](https://gist.github.com/Chaser324/ce0505fbed06b947d962).
+
+### Fork the Repository
+
+Click on the fork button.
+
+![Fork screenshot](../../.gitbook/assets/screenshot-forking-nitro-backend.png)
+
+### Clone your new Repository
+
+Set the current working folder to the path in which the backend repository should be cloned \(copied\).
+
+```bash
+$ cd PATH-FOR-NITRO-BACKEND
+```
+
+For cloning your new repository to your local machine modify the following command to add your GitHub user name.
+
+{% tabs %}
+{% tab title="HTTPS" %}
+
+```bash
+$ git clone https://github.com/YOUR-GITHUB-USERNAME/Nitro-Backend.git
+```
+
+{% endtab %}
+
+{% tab title="SSH" %}
+
+```bash
+$ git clone git@github.com:YOUR-GITHUB-USERNAME/Nitro-Backend.git
+```
+
+{% endtab %}
+{% endtabs %}
+
+Change into the new folder.
+
+```bash
+$ cd Nitro-Backend
+```
+
+Add the original Human Connection repository as `upstream`. This prepares you to synchronize your local clone with a simple pull command in the future.
+
+{% tabs %}
+{% tab title="HTTPS" %}
+
+```bash
+$ git remote add upstream https://github.com/Human-Connection/Nitro-Backend.git
+```
+
+{% endtab %}
+
+{% tab title="SSH" %}
+
+```bash
+$ git remote add upstream git@github.com:Human-Connection/Nitro-Backend.git
+```
+
+{% endtab %}
+{% endtabs %}
+
+### Copy Environment Variables
+
+```bash
+$ cp .env.template .env
+```
+
+Configure the file `.env` according to your needs and your local setup.

documentation/backend/installation/docker-backend.md

@@ -0,0 +1,82 @@
+# Docker Installation
+
+Docker is a software development container tool that combines software and its dependencies into one standardized unit that contains everything needed to run it. This helps us to avoid problems with dependencies and makes installation easier.
+
+## General Installation of Docker
+
+There are [sevaral ways to install Docker CE](https://docs.docker.com/install/) on your computer or server.
+
+{% tabs %}
+{% tab title="Docker Desktop macOS" %}
+
+Follow these instructions to [install Docker Desktop on macOS](https://docs.docker.com/docker-for-mac/install/).
+
+{% endtab %}
+{% tab title="Docker Desktop Windows" %}
+
+Follow these instructions to [install Docker Desktop on Windows](https://docs.docker.com/docker-for-windows/install/).
+
+{% endtab %}
+{% tab title="Docker CE" %}
+
+Follow these instructions to [install Docker CE](https://docs.docker.com/install/).
+
+{% endtab %}
+{% endtabs %}
+
+Check the correct Docker installation by checking the version before proceeding. E.g. we have the following versions:
+
+```bash
+$ docker --version
+Docker version 18.09.2
+$ docker-compose --version
+docker-compose version 1.23.2
+```
+
+## Install Nitro-BackEnd with Docker
+
+Run the following command to install Nitro-Backend as a Docker container. This installation includes Neo4j.
+
+The installation takes a bit longer on the first pass or on rebuild ...
+
+```bash
+$ docker-compose up
+
+# rebuild the containers for a cleanup
+$ docker-compose up --build
+```
+
+### Seed Neo4j in Docker
+
+To seed the Neo4j database with default data, that GraphQL requests or playing with our GraphQL Playground returns anything else than an empty response, run the command.
+
+Run the following command to seed the Neo4j database with default data requested by Nitro-Web through GraphQL or when you play with our GraphQL playground.
+
+```bash
+# open another terminal
+
+# create indices etc.
+$ docker-compose exec neo4j migrate
+
+# seed database
+$ docker-compose exec backend yarn run db:seed
+```
+
+#### Wipe out Neo4j database in Docker
+
+To wipe out your neo4j database and delete the volumes send command:
+
+```bash
+# open another terminal and run
+$ docker-compose down -v
+```
+
+#### Video Tutorial
+
+{% hint style="info" %}
+TODO: Link to video
+{% endhint %}
+
+### Development with Kubernetes
+
+For further informations see also our [Kubernetes documentation](kubernetes.md).

documentation/backend/installation/kubernetes.md

@@ -0,0 +1,5 @@
+# Kubernetes
+
+Currently you can find some documentation here:  
+[https://github.com/Human-Connection/Nitro-Deployment](https://github.com/Human-Connection/Nitro-Deployment)
+

documentation/backend/installation/local-backend.md

@@ -0,0 +1,188 @@
+# Local Installation
+
+Make sure you have a recent LTS (long term support) version of [node](https://nodejs.org/en/download/) - we currently use 10.15.1
+
+```bash
+$ node -v
+v10.15.1
+```
+
+Make sure that you have a recent version of [yarn](https://yarnpkg.com/en/) or [npm](https://www.npmjs.com) installed before you proceed. E.g. we have the following versions:
+
+```bash
+$ yarn --version
+1.12.3
+$ npm --version
+6.4.1
+```
+
+If the `yarn` or `npm` command is unknown you may use the [docker installation](./#installation-and-usage-with-docker) \(see above\) or contact the developer team at [Discord](https://discord.gg/6ub73U3) if you have any questions:
+
+## Install Dependencies
+
+{% tabs %}
+{% tab title="Yarn" %}
+```bash
+$ yarn install
+```
+{% endtab %}
+
+{% tab title="NPM" %}
+```bash
+$ npm install
+```
+{% endtab %}
+{% endtabs %}
+
+## Start the Server
+
+{% tabs %}
+{% tab title="Yarn" %}
+
+### Development
+
+```bash
+$ yarn run dev
+```
+
+### Production
+
+```bash
+# you will need to build the app first
+$ yarn run build
+# run after build (dist folder must exist)
+$ yarn run start
+```
+
+{% endtab %}
+{% tab title="NPM" %}
+
+### Development
+
+```bash
+$ npm run dev
+```
+
+### Production
+
+```bash
+# you will need to build the app first
+$ npm run build
+# run after build (dist folder must exist)
+$ npm run start
+```
+
+{% endtab %}
+{% endtabs %}
+
+This will start the GraphQL service \(by default on [http://localhost:4000](http://localhost:4000)\) where you can issue GraphQL requests or access GraphQL Playground in the browser.
+
+{% hint style="warning" %}
+But before you can issue GraphQL requests or access GraphQL Playground you have to install, start and seed your Neo4j database. See following step …
+{% endhint %}
+
+## Neo4j Installation and Configuration
+
+### Configure Environment
+
+Set your Neo4j connection string and credentials in `.env`. For example:
+
+{% code-tabs %}
+{% code-tabs-item title=".env" %}
+
+```yaml
+NEO4J_URI=bolt://localhost:7687
+NEO4J_USER=neo4j
+NEO4J_PASSWORD=letmein
+```
+
+{% endcode-tabs-item %}
+{% endcode-tabs %}
+
+### Neo4j Installation
+
+{% hint style="warning" %}
+You **need to install APOC** as a plugin for the graph you create in neo4j!
+{% endhint %}
+
+Note that grand-stack-starter does not currently bundle a distribution of Neo4j. Now there are a lot alternatives how to install Neo4J.
+
+{% tabs %}
+{% tab title="Neo4j Desktop" %}
+
+You can [download Neo4j Desktop](https://neo4j.com/download-center/) run locally for development. Choose tab **Neo4j Desktop**.
+
+![Neo4j Download-Center screenshot](../../.gitbook/assets/screenshot-neo4j-download-center-current-releases.png)
+
+After the download is done install the Neo4j Desktop application and open it. E.g. we have the following version:
+
+```text
+Neo4j Desktop 1.1.13
+```
+
+Click on the empty project **My Project** to choose it.
+
+Click in the **Add Graph** area and after two buttons appear in it click on **Create a Local Graph**.
+
+Optionally, set the name of the new Graph for clarity to **Human Connection DB**. Set the password to **letmein** which is our default password of our `.env.template`. You can choose another password and later change your connection settings, too. Then click on **Create** and the database will be generated.
+
+After generation of the database was successful, please click in the **Add Plugin** area. Then click the **Install** button of the **APOC** area. Now an additional **Install** button appears and you click on it again. If the **APOC-Plugin** is installed by now close the **Plugins** window.
+
+In the **Human Connection DB** area is a **Manage** button. By clicking it the area switches into a manage area with a lot of information and setting possibilities.
+
+Start the Graph database by clicking the **Play-Symbol** button. In the **Logs** tab you'll find the status of the start up.
+
+If you have a look in the **Details** tab you find the connection info. The bolt port should be `7687` as we set it for our [environment configuration](docker-backend.md#configure-environment) above.
+
+{% endtab %}
+{% tab title="Neo4j Non-Desktop Alternatives" %}
+
+You can spin up a [hosted Neo4j Sandbox instance](https://neo4j.com/download-center/), run Neo4j in one of the [many cloud options](https://neo4j.com/developer/guide-cloud-deployment/), [spin up Neo4j in a Docker container](https://neo4j.com/developer/docker/) or on Debian-based systems install [Neo4j from the Debian Repository](http://debian.neo4j.org/). Just be sure to update the Neo4j credentials in `.env`.
+
+#### Install APOC plugin on Debian-based systems
+
+Install `neo4j` from the Debian Repository, then [download the APOC plugin](https://github.com/neo4j-contrib/neo4j-apoc-procedures/releases/download/3.4.0.3/apoc-3.4.0.3-all.jar) to the `/var/lib/neo4j/plugins` directory, e.g. with:
+
+```bash
+$ wget https://github.com/neo4j-contrib/neo4j-apoc-procedures/releases/download/3.5.0.1/apoc-3.5.0.1-all.jar -P /var/lib/neo4j/plugins
+```
+
+{% endtab %}
+{% endtabs %}
+
+### Database Informations and Commands via Browser
+
+Information about your Neo4j database can be obtained in your browser via [http://localhost:7474/browser/](http://localhost:7474/browser/).
+You can even send commands to Neo4j here. For example, for creating indices, as described in the next step.
+
+### Create Indices in Neo4j
+
+{% hint style="info" %}
+TODO: Is there a terminal command to create indices in Neo4j, because that would be a more general solution …
+{% endhint %}
+
+To create the required indexes in Neo4j, you must send the following command to the database using the [browser command line](#database-informations-and-commands-via-browser), see above.
+
+```sh
+$ CALL db.index.fulltext.createNodeIndex("full_text_search",["Post"],["title", "content"]);
+```
+
+### Seeding Database with Data
+
+Now we have to seed our database with default data, so that GraphQL requests or playing with our GraphQL Playground returns anything else than an empty response.
+
+To fill the database with some seed data, run the following command in your terminal:
+
+```bash
+$ yarn run db:seed
+```
+
+To wipe out the database:
+
+```bash
+$ yarn run db:reset
+```
+
+Now your backend is ready for requests. You can click on the **Open Browser** button in Neo4j Desktop to check if the seeding was successful or open [http://localhost:7474/](http://localhost:7474/) in your browser.
+
+Click the **Data-Symbol** at the left upper corner and then click on the **Node Label** + **User** to see a graph of the user relations, as an example.

documentation/backend/middleware.md

@@ -0,0 +1,12 @@
+# Middleware
+
+![](../.gitbook/assets/grafik%20%284%29.png)
+
+## Middleware keeps resolvers clean
+
+A well-organized codebase is key for the ability to maintain and easily introduce changes into an app. Figuring out the right structure for your code remains a continuous challenge - especially as an application grows and more developers are joining a project.
+
+A common problem in GraphQL servers is that resolvers often get cluttered with business logic, making the entire resolver system harder to understand and maintain.
+
+GraphQL Middleware uses the [_middleware pattern_](https://dzone.com/articles/understanding-middleware-pattern-in-expressjs) \(well-known from Express.js\) to pull out repetitive code from resolvers and execute it before or after one of your resolvers is invoked. This improves code modularity and keeps your resolvers clean and simple.
+

documentation/backend/todos.md

@@ -0,0 +1,19 @@
+# Todo's
+
+Github Issues: [https://github.com/Human-Connection/Nitro-Backend/issues](https://github.com/Human-Connection/Nitro-Backend/issues)
+
+* [x]  add jwt authentication \(in progress\)
+* [ ]  get directives working correctly \(@toLower, @auth, @role, etc.\)
+* [ ]  check if search is working
+* [x]  check if sorting is working
+
+  > There is currenty an issue with neasted data which will be fixed in the next weeks
+
+* [x]  check if pagination is working
+* [ ]  check if upload is working
+
+  > is possible with graphql-yoga
+
+* [x]  evaluate middleware
+* [ ]  ignore Posts and Comments by blacklisted Users \(in progress\)
+

documentation/concept/specification.md

@@ -0,0 +1,256 @@
+# Network Specification
+
+Human Connection is a nonprofit social, action and knowledge network that connects information to action and promotes positive local and global change in all areas of life. 
+
+- **Social**: Interact with other people not just by commenting their posts, but by providing **Pro & Contra** arguments, give a **Versus** or ask them by integrated **Chat** or **Let's Talk**
+
+- **Knowledge**: Read articles about interesting topics and find related posts in the **More Info** tab or by **Filtering** based on **Categories** and **Tagging** or by using the **Fulltext Search**.
+
+- **Action**: Don't just read about how to make the world a better place, but come into **Action** by following provided suggestions on the **Action** tab provided by other people or **Organisations**.
+
+## Features
+
+The following features will be implemented. This gets done in three steps: 
+
+1. First we will implement a basic feature set and provide a test system to test the basic network functionality. 
+
+2. In a second step we will make our prototype publicly available with an advanced feature set including the technology and organizational structure to drive a bigger public social network.
+
+3. In a third step all the remaining features will be implemented to build the full product. 
+
+### User Account
+
+- Sign-up
+- Agree to Data Privacy Statement
+- Agree to Terms of Service
+- Login
+- Logoff
+- Change User Name
+- Change Email Address
+- Change Password
+- Delete Account
+- Download User's Content
+- GDPR-Information about stored Content
+- Choosing Interface Language (e.g. German / English / French)
+
+### User  Profile
+
+- Upload and Change Avatar
+- Upload and Change Profile Picture
+- Edit Social Media Accounts
+- Edit Locale information
+- Show and delete Bookmarks (later)
+- Show Posts of a specific User
+- Show Comments of a specific User
+
+### Cockpit
+
+[Clickdummy](https://preview.uxpin.com/24a2ab8adcd84f9a763d87ed27251351225e0ecd#/pages/99768919/simulate/sitemap?mode=i)
+
+- Show Link to own Profile
+- Show Friends Widget
+- Show Favorites Widget
+- Show Get Friends Widget
+- Show popular Hashtags Widget
+- Show Mini-Statistics Widget (all time)
+- Show Chatrooms Widget
+- Show List of Let's Talk requests with online status of requesting people
+
+### Posts
+
+- Creating Posts
+- Upload Teaser Picture for Post
+- Upload additional Pictures
+- Editing Title and Content
+- Allow embedded Conten (Videos, Sound, ...)
+- Choosing a Category
+- Adding Tags
+- Choosing Language (e.g. German / English / French)
+- Choosing Visibility (Public / Friends / Private)
+- Shout Button for Posts
+- Bookmark Posts (later)
+- Optionally provide Let's Talk Feature
+- Optionally provide Commenting Feature
+
+### Comments
+
+- Creating Comments 
+- Deleting Comments
+- Editing Comments
+- Upvote comments of others
+
+### Contribution List
+
+- Show Posts by Tiles
+- Show Posts as List
+- Filter by Category (Health and Wellbeing, Global Peace & Non-Violence, ...) 
+- Filter by Mood (Funny, Happy, Surprised, Cry, Angry, ...)
+- Filter by Source (Connections, Following, Individuals, Non-Profits, ...)
+- Filter by Posts & Tools (Post, Events, CanDos, ...)
+- Filter by Format Type (Text, Pictures, Video, ...)
+- Extended Filter (Continent, Country, Language, ...) 
+- Sort Posts by Date
+- Sort Posts by Shouts
+- Sort Posts by most Comments
+- Sort Posts by Emoji-Count (all Types)
+
+### Blacklist
+
+[Video](https://www.youtube.com/watch?v=-uDvvmN8hLQ)
+
+- Blacklist Users
+- Blacklist specific Terms
+- Blacklist Tags
+- Switch on/off Adult Content
+
+### Search
+
+- Search for Categories
+- Search for Tags
+- Fulltext Search
+
+### CanDos
+
+- Creating CanDos
+- Editing Title and Content
+- Choosing a Category
+- Adding Tags
+- Choosing Language (e.g. German / English / French)
+- Choosing Visibility (Public / Friends / Private)
+- Choosing Difficulty
+- Editing Why - why should you do this
+- Editing Usefulness - what is it good for
+
+### Versus (interaction on existing Post)
+
+- Create / edit / delete Versus
+
+### Jobs
+
+- Create, edit and delete Jobs by an User
+- Handle Jobs as Part of Projects
+- Handle Jobs done by Organizations
+
+### Projects
+
+- Create, edit and delete Projects
+- Edit Title and Description for the Project
+- Set Project Type
+- Set and Edit Timeline for the Project
+- Add Media to the Project
+- Chat about the Project
+
+### Pro & Contra
+
+- Create Pro and Con (2-row)
+- Add Arguments on Pro or Con Side
+- Rate up Arguments
+- Add Tags
+- Attach Media
+
+### Votes
+
+- Create Votes (Surveys with two or more Choices)
+- Add Title and Description
+- Let Users vote
+- Add Tags
+
+### Bestlist
+
+- Create Bestlist
+- Create Votes (Surveys)
+- Add Title and Description
+- Add Tags
+- Let Users vote for Best Item
+- Set Settings (allow Uploads, allow Links, ...)
+
+### Events
+
+- Create Events
+- Add Title and Description
+- Choose Date and Location
+- Add Tags
+
+### More Info
+
+Shows autmatically releated information for existing post.
+
+- Show related Posts
+- Show Pros and Cons
+- Show Bestlist
+- Show Votes
+- Link to corresponding Chatroom 
+
+### Take Action
+
+Shows automatically related actions for existing post.
+
+- Show related Organisations
+- Show related CanDos
+- Show related Projects
+- Show related Jobs
+- Show related Events
+- Show Map
+
+### Badges System
+
+- Importing Badge Information (CSV)
+- Showing Badges
+- Badge Administration by Admins
+- Choosing Badges to display by User
+
+### Chat
+
+- Basic 1:1 Chat functionality
+
+### Let's Talk
+
+- Request Let's talk with Author of Post
+- Requestor can request private or public Let's Talk
+- Requestor can choose the Chat format (Video, Audio, Text)
+- Interact with interested People 1:1
+- Approve request from Requestor
+
+### Organizations
+
+- Propose Organizations by users
+- Set Name and Details
+- Set Homepage
+- Set Region
+- Set Topic
+- Commit organizations by HC-Org-Team
+- Panel for Organisation Handling by themselfes
+- Choose/Mark Users as authorized to manage an Organization
+
+### Moderation
+
+- Report Button for users for doubtful Content
+- Moderator Panel
+- List of reported Content (later replaced by User-Moderation)
+- Mark verified Users as Moderators
+- Show Posts to be moderated highlighted to User-Moderators
+- Statistics about kinds of reported Content by Time
+- Statistics about Decisions in Moderation
+
+### Administration
+
+- Provide Admin-Interface to send Users Invite Code
+- Static Pages for Data Privacy Statement ...
+- Create, edit and delete Announcements
+- Show Announcements on top of User Interface
+
+### Invitation
+
+- Allow Users to invite others by Email
+- Allow Users to register with Invite Code
+- Double-opt-in by Email
+
+### Federation
+
+- Provide Server-Server ActivityPub-API
+- Provide User-Server Activitypub-API
+- Receiving public addressed Article and Note Objects
+- Receiving Like and Follow Activities
+- Receiving Undo and Delete Activities for Articles and Notes
+- Serving Webfinger records and Actor Objects
+- Serving Followers, Following and Outbox collections

documentation/documentation/edit-this-documentation.md

@@ -0,0 +1,120 @@
+# Edit this Documentation
+
+Go to the section and theme you want to change: On the left navigator.
+
+Click **Edit on GitHub** on the right.
+
+On the **Issue** tab you’ll find the open issues. Read what need to be done by clicking on the issue you like to fix.
+
+By going backwards in the browser **\(!\)**, again go to the **Code** tab.
+
+Click on the **edit pencil** on the right side directly above the text to edit this file on your fork of Human Connection \(HC\).
+
+You can see a preview of your changes by clicking the **Preview changes** tab aside the **Edit file** tab.
+
+If you are ready, fill in the **Propose file change** at the end of the webpage.
+
+After that you have to send your change to the HC basis with a pull request. Here make a comment which issue you have fixed. At least the number.
+
+## Markdown your documentation
+
+To design your documentation see the syntax description at GitBook:
+
+[https://toolchain.gitbook.com/syntax/markdown.html](https://toolchain.gitbook.com/syntax/markdown.html)
+
+### Some quick Examples
+
+#### Headlines
+
+```text
+# Main headline
+## Smaller headlines
+### Small headlines
+```
+
+#### Tabs
+
+```text
+{% tabs %}
+{% tab title="XXX" %}
+XXX
+{% endtab %}
+{% tab title="XXX" %}
+XXX
+{% endtab %}
+…
+{% endtabs %}
+```
+
+#### Commands
+
+```text
+```LANGUAGE (for text highlighting)
+XXX
+```
+```
+
+#### Links
+
+```text
+[https://XXX](XXX)
+```
+
+#### Screenshots or other Images
+
+```text
+![XXX](https://XXX)
+```
+
+#### Hints for ToDos
+
+```text
+{% hint style="info" %} TODO: XXX {% endhint %}
+```
+
+## Host the screenshots
+
+### Host on Human Connection
+
+{% hint style="info" %}
+TODO: How to host on Human Connection \(GitHub\) ...
+{% endhint %}
+
+### Quick Solution
+
+To quickly host the screenshots go to:
+
+[https://imgur.com](https://imgur.com).
+
+There click the green button **New post**.
+
+Drag the image into the appropriate area.
+
+Right click on it and choose kind of **Open link in new tab**.
+
+Copy the URL and paste it were you need it.
+
+## Screenshot modification
+
+### Add an arrow or some other marking stuff
+
+{% tabs %}
+{% tab title="macOS" %}
+
+#### In the Preview App
+
+Got to: **Menu** + **Tools** \(GER: Werkzeuge\) + **Annotate** \(GER: Anmerkungen\) + etc.
+{% endtab %}
+
+{% tab title="Windows" %}
+{% hint style="info" %}
+TODO: How to modify screenshots in Windows ...
+{% endhint %}
+{% endtab %}
+
+{% tab title="Linux" %}
+{% hint style="info" %}
+TODO: How to modify screenshots in Linux ...
+{% endhint %}
+{% endtab %}
+{% endtabs %}

documentation/web-frontend/installation.md

@@ -0,0 +1,67 @@
+# Web Installation
+
+{% hint style="warning" %}
+This documentation should be split into a **local** and a **docker** installation variant. Also maybe there should be a main docker installation guide for the whole system at once!?
+{% endhint %}
+
+## Clone Repository
+
+The Frontend Repository can be found on github.  
+[https://github.com/Human-Connection/Nitro-Web](https://github.com/Human-Connection/Nitro-Web)
+
+```bash
+git@github.com:Human-Connection/Nitro-Web.git
+```
+
+## Install Dependencies
+
+{% hint style="info" %}
+Make sure you are running on LTS Node 10: `node --version`
+{% endhint %}
+
+{% tabs %}
+{% tab title="Yarn" %}
+```bash
+yarn install
+```
+{% endtab %}
+
+{% tab title="NPM" %}
+```bash
+npm install
+```
+{% endtab %}
+{% endtabs %}
+
+## Development
+
+To start developing you need to start the server with the dev command. This will give you "hot reload" which updates the browser content \(mostly\) without reloading the whole page.
+
+{% tabs %}
+{% tab title="Yarn" %}
+```bash
+yarn dev
+```
+{% endtab %}
+
+{% tab title="NPM" %}
+```bash
+npm run dev
+```
+{% endtab %}
+{% endtabs %}
+
+This will start the UI under [http://localhost:3000](http://localhost:3000)
+
+For development environments, we created three users with different profiles and privileges.
+
+Login to the app with one the following credentials:
+
+* email: user@example.org
+* email: moderator@example.org
+* email: admin@example.org
+
+password: 1234 \(same for all profiles\)
+
+![You should see this under http://localhost:3000](../.gitbook/assets/screenshot.png)
+

documentation/web-frontend/styleguide.md

@@ -0,0 +1,46 @@
+# Styleguide
+
+For this Projoject we decided to use [Jörg Bayreuther's](https://github.com/visualjerk) _\(visualjerk\)_ fantastic Design System called [CION](https://cion.visualjerk.de/). _\(see a_ [_demo_](https://styleguide.cion.visualjerk.de/)_\)_
+
+![Styleguide in action under https://localhost:8080](../.gitbook/assets/screenshot-styleguide.png)
+
+### Developing with the Styleguide
+
+{% tabs %}
+{% tab title="Yarn" %}
+```bash
+yarn styleguide
+```
+{% endtab %}
+
+{% tab title="NPM" %}
+```bash
+npm run styleguide
+```
+{% endtab %}
+{% endtabs %}
+
+### Build
+
+if you changed design tokens or other styles inside the styleguide, run the refresh command to build the styleguide as a lib.
+
+{% hint style="info" %}
+The Styleguide is build when installing the UI via Yarn or NPM, but when you have changes inside the styleguide, you will need to run following command so they will be repflected in the main UI
+
+We want to improve this in the future while running `yarn dev`.
+{% endhint %}
+
+{% tabs %}
+{% tab title="Yarn" %}
+```bash
+yarn styleguide:build
+```
+{% endtab %}
+
+{% tab title="NPM" %}
+```bash
+npm run styleguide:build
+```
+{% endtab %}
+{% endtabs %}
+

documentation/web-frontend/todos.md

@@ -0,0 +1,8 @@
+---
+description: 'Want to help? Here you find the recources for the Web part:'
+---
+
+# Todo's
+
+Github Issues: [https://github.com/Human-Connection/Nitro-Web/issues](https://github.com/Human-Connection/Nitro-Web/issues)
+

documentation/workflow/README.md

@@ -0,0 +1,5 @@
+# Contribute
+
+{% hint style="info" %}
+TODO: How to Contribute...
+{% endhint %}

documentation/workflow/contribute/github-workflow.md

@@ -0,0 +1,5 @@
+# Our GitHub Workflow
+
+{% hint style="info" %}
+TODO: Git and GitHub Workflow … (best practice)
+{% endhint %}

documentation/workflow/deployment.md

@@ -0,0 +1,6 @@
+# Deployment
+
+{% hint style="info" %}
+TODO: Write something about the Deployment process.
+{% endhint %}
+

documentation/workflow/testing/README.md

@@ -0,0 +1,20 @@
+# Testing Guide
+
+## [Integration Testing](integration-testing.md)
+
+To test all the pieces together, from the user perspective, we use integration tests. They also show if the the backend and the frontend are working as expected in conjunction and also if the browser likes our app.
+
+[more...](integration-testing.md)
+
+## [Component Testing](component-testing.md)
+
+Individual Vue Components should also be documented and tested properly. This guarantees that they are reusable and the api gets more solid in the process.
+
+[more...](component-testing.md)
+
+## [Unit Testing](unit-testing.md)
+
+Expecially the Backend relies on Unit Tests, as there are no Vue Components.
+
+[more...](unit-testing.md)
+

documentation/workflow/testing/component-testing.md

@@ -0,0 +1,4 @@
+# Component Testing
+
+
+

documentation/workflow/testing/integration-testing.md

@@ -0,0 +1,33 @@
+# Integration Testing
+
+## Install Cypress
+
+Before we start, first install [Cypress](https://www.cypress.io/) on your dev machine.
+
+```bash
+$ yarn global add cypress
+```
+
+### Run Tests
+
+To run the tests, open the directory of our Nitro Frontend in your console and run following command:
+
+```bash
+$ cypress run
+```
+
+![Console output after running cypress test](../../.gitbook/assets/grafik.png)
+
+After the test run, you will get also some video footage of the test run which you can then analyse in more detail.
+
+### Open Interactive Test Console
+
+If you are like me, you might want to see some visual output. The interactive cypress environment also helps at debugging your tests, you can even time travel between individual steps and see the exact state of the app.
+
+![Interactive Cypress Environment](../../.gitbook/assets/grafik%20%281%29.png)
+
+### Write some Tests
+
+Go the the Cypress documentation for further information on how to write tests:  
+[https://docs.cypress.io/guides/getting-started/writing-your-first-test.html\#Write-a-simple-test](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Write-a-simple-test)
+

documentation/workflow/testing/unit-testing.md

@@ -0,0 +1,4 @@
+# Unit Testing
+
+
+