The aim of this final project was to develop a single page application featuring a map of a neighborhood of our choice. We had to add functionalities to this map including highlighted locations, third-party data about those locations and various ways to browse the content.
- You can directly go on the Github Page
- Or you can clone the projet, cd on master branch, and run
npm installto install modules, thennpm start. You should see the website at the local address: http://localhost:3000.
I choosed to use open data from the French City of Nantes. These data are about the events of the City of Nantes. You can find the original API here. It was the opportunity to use an external API, already existing and with relevant information.
Once you're on the website, you will have a map, which displays some upcoming event in Nantes through markers. You can click on them to have some information about the event, showing in a popup. In the popup there is also an "add to calendar" button, to allow user to add the selected event to its favorite online calendar.
You will also have a list on the left side, displaying the full list of the upcoming event, sorted by date. If you click on one of them, the related popup will open above the related marker.
Just above the list you can enter a research about an event's name, and the list will be sorted by your query. The matching markers will also be sorted.
- To create this project, I used create-react-app.
- For the map, I choose to use the open source leaflet library.
- To combine both React and Leaflet, I used react-leaflet, very well documented.
I also use some other ressources such as lodash to sort the fetched data by date, moment to combine various date format, react-add-to-calendar to add a "add to calendar" button in the event popup, and SweetAlert to display errors when they occur.
Also, I find some articles very useful, such as this one about fetching data in React and this other one giving some tips to make a React app more accessible.