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.
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.
Our project prototype on FIGMA
- Figma
- Vue 3
- Vue Router
- Vite build tool
- Vuex state management
- Vuex persisted state
- i18n JSON localization
- Cloudinary photo upload
- SCSS with BEM naming conventions
- 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
- Heroku
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=
The backend server is using separate endpoints for registration, login, logout, authentication, user queries, email services and refresh/reset token management.
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>https://www.youtube.com/watch?v=nteRsasUq10
- 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
- "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
- 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