Soliman Al Halaby Creative Developer

Vis ma ville

With Robin ,Valentin
Full-stack developer
React native

Vis ma ville is a mobile application that allows users to report damage / lack of security they see in public places. This application aims to connect a whole community and allows citizens to contribute to the life of their city.

Vis ma ville Hero Image

01 /

Setting up the back-end



A back-end based on Firestore

Vis ma ville is divided in 2 big parts linked together. The back-end is entirely based on Firestore. To do this, we have set up the GraphQL playground with Apollo to facilitate our different queries in the suite. After that, each entity is created with the appropriate structure to be sent to the front-end. The different queries are based on ids in order to produce a dynamic application.

In this back-end, the entities are divided into two sub-parts, the queries and the mutations. Our queries consist of the requests we make in the database to retrieve a user, a post for example. The mutations allow us to update certain data or to rewrite them in the database such as the user's information.

Fullwith image
Project Image
Project Image

02 /

A front based on Expo



Make our app usable on IOS and Android

In order to make our application universal, we used Expo as a base. The display information on the application. Before making our application dynamic with the back-end, we set up a json with the structure we wanted to be able to advance back-end and front-end simultaneously. Then to retrieve the data from the back-end, we perform GraphQL queries for the appropriate element with its ID. To navigate between the tabs dynamically, we keep the same principle, send a parameter to the tab change to retrieve the corresponding post / content.

To display the different pins on our map, we use the native React elements (MapView, Market, LatLng). When a user makes a post, and authorizes us to access its location, we retrieve its position with a custom hook (useLocation) that we then send to our database. At the map level, for each existing post, we retrieve the latitude / longitude and the content, and then generate the corresponding pin. To allow the user to take a picture of the reported element, we used expo-camera which allows us to have access (if the user authorizes it) to the front and back camera.

Fullwith image
Project Image
Project Image

More projects

Soliman Al Halaby©
All rights reserved

Designed by


my resume

Arrow up
Learn more