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.

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.