This is the front-end single page application developed to accompany the Back End of a Question Box REST-like API designed to promote a peer-to-peer, culturally appropriate approach to Sex Education in Refugees and New Germans.

The front-end consist of a Single Page Application developed using Vue.JS with Progressive Web App implementations. It connects via Axios with the back-end and it implements several functionalities of Service Workers: Push Notifications, Caching, Offline Usage, and Installing on an Android Mobile Device.

• Prerequisites
• Getting Started
• Running tests
• Environment Variables
• API End-Points
  • Public Routes
  • Private Routes
• Multilanguage
• Technology
  • Database
  • Encryption
  • Push Notifications
  • Email Notifications
• Get in Touch
• Acknowledgements
• Team
• License
• Funding

The back-end requires you to have node.js ^8.10 and npm ^3.5.2 installed in your development machine. The compiled minified version can run in any HTML server.

First, download or clone this repository.

git clone https://github.com/Benatna/question-box-frontend.git

After downloaded, access the downloaded folder and install the required dependencies.

cd question-box-backend
npm install

You will also want to modify the environment variables files before using it.

nano .env

You can see the list of required environment variables and their definition here.

Once you have defined the environment variables, you can run the application using one of these three commands:

First, you can compile it and enable hot-reloading for development purposes:

npm run serve

Second, you can compile it and minify it for production:

npm run build

NOTE: This will generate a "dist" folder that can be copied and run in any HTML server. If you want to test these files, you can do so using a package like serve.

Finally, you can also run the included linter to fix some problems with the code:

npm run lint

The project is using Vue's component-based structure. We try to keep Javascript and CSS files ordered in such a way that if a class/function is implemented in multiple components, then it belongs to the parent component. You can find more information in [Vue.js official guide[(https://vuejs.org/v2/guide/components.html).

At the moment, language options are hard-coded, and implemented using the Vue CLI 3 i18n plugin. In the folder /src/locales/ you can find two JSON files that are used for translation. You can modify existing text and/or add new text in these files. For more information, visit visit the plugin's official page.

• This project implements Google Noto fonts family. Text is Noto Sans and Emojis are Noto Emoji.
• Footer icons based on Google Material Icons.
• About photo is public domain by Alexis Brown on Unsplash.

If you need any help and/or want to get in touch with us, don't hesitate to Submit an Issue, and/or contact us at [email protected], or via Facebook and Twitter.

Thanks to Ahmad, Ahmed, Nickhil, Zain and Zeina for their support, hard work, and insights during the development and deployment of this solution.

This project was created in six months for the beautiful team of:

• Cornelia Blum: Lead.
• Pedro Poblete Lasserre: Coder.
• Hector Pahaut: Designer.
• Pooja Veerappa: User Researcher.
• Juli Maier: Mentor.

This project is licensed under the MIT License - see the LICENSE file for details.

Funding for the initial development of this project came from the Prototype Fund, an initiative of the German Federal Ministry of Education and Research.