Home

Welcome to the PV247 React Brno app Wiki!

Team members: Illia Kostenko, Jonna Määttä

Goals

As a main goal of this project was creating a new application, that is based on open Data Brno API. As a main data source we selected Tourist Places Brno. Data is retrieved in a form of GeoJSON - GeoJSON link.

One of the problems, that we seen in the initial app - map does not display all points in a convenient way. For some pages, different pieces were not displayed at all Example:

Used technologies

• User authentication - Firebase Auth + Github auth provider
• Working with BE storage - Firebase Firestore, to store saved starred places per one user
• Built project hosted online - Vercel
• Map - leaflet, Mapbox-gl

Faced problems

1. Usage of Leaflet was quite problematic. After initial deploy disappeared all markers. However, this problem is not rare, and the difficulties are with the map itself (https://stackoverflow.com/questions/60174040/marker-icon-isnt-showing-in-leaflet).
2. As the map was set in the <container> tag - size of the map was limited to the sizes of the container.
3. Changed API. During implementation of this project, we faced serious problem. API was changed several times - were changed name fields. Before the change of the data, name field described some generalized type of the place. Name with a full description was stored in the description field. Therefore, it made impossible to implement the filtration due to the type. Also, It caused additional problems with code changing, and refactoring, as were changed some fields of the provided GeoJSON.
4. Github Auth provider is not working properly for the mobile devices. As in the Desktop devices, initially opens new Github Log In window, but after that nothing happens. Probably, the issue occurs, because on the mobile device was installed Github Mobile App, and auth did not worked properly.
5. In the original dataset were included symbols, such as – or  . They have been replaced with the help of .replace() func Used material.
6. As it was mentioned in the official documentation of Leaflet - we can merge multiple points to the one cluster. However, this way is not implementable in the React-Leaflet. Therefore, we will use React-leaflet-markercluster. Also, was a problem with versioning, therefore used this realization - Used realisation of clusterization.

Obtained results