README.md

Services for newcomers

BeHelp

Our final project app at HYF Belgium

The application connects international protection seekers with volunteers and organizations that can help them with adaptation and integration into society.

Table of contents

• Services for newcomers
  • BeHelp
  • Table of contents
  • General info
  • Design protoype
  • Tools and Technologies
    • UX/UI
    • Frontend
    • Backend
    • Devops
  • Setup
  • API routes
  • Sample Vue code
  • App demo video
  • Inspiration
    • Projects and websites
    • Articles
  • Authors

General info

When a newcomer arrives in Belgium, he/she may face a need for various services and have a problem with a language barrier and/or lack of financial resources to afford such services. We will create an application that connects refugees and asylum seekers to volunteers who are ready to help with providing the following services:

• translation
• legal advice
• psychotherapists/coaches
• host families for refugees
• education services (language classes, etc.)
• social assistance (medical assistance, services)

The application will include the search tool that will filter available volunteers by service, geographical region, language. It will also include the tool to contact the chosen volunteer via the website.

---

Design protoype

Our project prototype on FIGMA

Tools and Technologies

UX/UI

• Figma

Frontend

• Vue 3
• Vue Router
• Vite build tool
• Vuex state management
• Vuex persisted state
• i18n JSON localization
• Cloudinary photo upload
• SCSS with BEM naming conventions

Backend

• Node
• Express
• MongoDB Atlas
• MongoDB Compass
• Mongoose ODM
• Sendgrid email API
• Postman & Thunder Client API testing
• Helmet CSP security headers
• JWT authentication tokens & bcrypt hashing

Devops

• Heroku

Setup

To run the app, type npm run behelp in the CLI, which will run backend and frontend simultaneously (localhost:3000 for frontend and localhost:5000 for backend). In addition, create a .env file in the root directory with the following variables:

MONGO_URI=
ACCESS_TOKENSECRET=
REFRESH_TOKENSECRET=
SENDGRID_API_KEY=
BASE_URL=

API routes

The backend server is using separate endpoints for registration, login, logout, authentication, user queries, email services and refresh/reset token management.

Sample Vue code

The frontend is using Vue 3 single page components. Here is a look at the script tag for the header:

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      hidden: true,
      locale: "ENG",
      activeToggle: false,
    };
  },
  watch: {
    locale(val) {
      this.$i18n.locale = val;
    },
  },
  computed: {
    ...mapState(["isLoggedIn", "user"]),
  },
  methods: {
    logout() {
      const token = localStorage.getItem("token");
      const userId = this.user.userId;
       fetch(`${import.meta.env.VITE_API}/users/logout/${userId}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          authorization: `Bearer ${token}`,
        },
      })
        .then((res) => {
          console.log(res);
          localStorage.removeItem("token");
          this.$store.commit("loggedOut");
          this.$router.push("/");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

App demo video

https://www.youtube.com/watch?v=nteRsasUq10

Inspiration

Projects and websites

• VoxBox – a platform connecting volunteers and refugees, created by HYF students
• HELPY – a project by students of class 11-12 HYF Belgium with a similar idea
• We can help / J'ai besoin d'aide – Belgian website to search for help by category, city, language
• REFUNITE – a humanitarian organization helping to find missing family members (access only for registered users)
• Doctor Any Time – a platform to find a doctor with good search and filtering tools
• Caritas International BE – a Belgian branch of international NGO
• KOLOGA – organization that helps refugees to settle in shared houses or flats in Brussels

Articles

• "An app to find when and where to volunteer — A UX/UI design challenge" on MEDIUM
• How to help migrants in Belgium – list of organizations with contacts

Authors

• Anthony // Coach

• Daniel // Manager, Frontend, Backend & DevOps

• Ekaterina // Manager & Frontend

• Tugba // Backend & DevOps

• Emely // Frontend & Research

• Senait // Frontend & Backend

• Deepa // Frontend & Backend

• Tatsiana // Frontend & Backend & Research

• Michael // Frontend & Backend

• Katia // Lead Design - UX/UI

• Francis // UX/UI

• Walter // UX/UI

---