Appendix 4
Technology Stack

This section discusses the various technologies used in the production of this project and how they are implemented. The goal is to provide transparency into the process as well as provide an explanation to those who might be interested in using a similar technology stack in their own project.

Mapping French Diplomacy is built as a ReactJS app using the NextJS framework. The visualizations are built using Leaflet.js for the maps and D3.js for the charts and graphs. On the backend, it uses a MongoDB no-SQL database, which allows for greater flexibility in the database schema. Flexibility has been especially important because the data I collected from letters changed as I found more and interesting connections that I could draw through the visualizations. This technology stack reflects the particular approach that this project takes. It has always been focused on creating an intuitiver user interface and experience. Many projects focus on using the front end to query a database. Such an approach uses filters to choose which data is placed on the page. To use such a project, one must know what one is looking for to query it. I have found that this provides a barrier of entry to exploring the data. This project takes the opposite approach. Instead, it calls all the data and places it on the page at laod time. Then, slider and search filters remove the data from the map/visualizations. This approach creates a more responsive user experience that leans on the increased power of modern browsers. It also allows the user/reader to see all the data and explore it. Indeed, this has been how I use the site myself when writing the narratives. The maps are not only visualizations for the reader but the foundation of research for the narratives associated with them.

The frontend of MFD is built using Next.js, which is a framework for React apps. React itself is a framework for JavaScript that allows developers to produce single page applications (SPAs) that are built entirely in JavaScript, which generates the HTML code that is viewed in the browser. An SPA is an application that is built on a single HTML file. It uses JavaScript to dynamically change the HTML in the file in response to the users actions. So if you navigate to another page, the application does not need to load a new HTML file but changes only the material in the HTML file that is different from one page to another. This architecture makes the website very responsive, but it can extend initial load times because the entire site is loaded on the first load. More importantly, however, React can cause many problems with search engine optimization (SEO), especially for sites that are content heavy such as this one. Because the HTML is generated by the JavaScript on the client side when the page loads, search engine bots might read an emptly HTML file before leaving the page. On a content heavy site such as MFD, this operation could prevent browsers from finding the site in searches. Next.js resolves this problem by creating a framework to build the site on the server and serve pre-processed HTML on load. Next.js marries the responsive and reactive benefits of React with fast load times and improved SEO. It is ideal for a site such as MFD.

---

This work is licensed under a
Creative Commons Attribution 4.0 International License.