Interaction Map for CUB members

Before I started to implement it, I used my UX design skills to draw an ideal UI in Figma. Based on my UI design I start to implement it with code. My project is created by Node JS overall and uses React as a framework. It contains three parts. First of all, I used a React tool called “Leaflet” to create a container to contain a map. In this step, I successfully display a map with my code. Secondly, I added some markers with campus building names on the map. The challenge starts from this step. Since React is a framework on the Front-End, the markers with campus building names need to be stored in a file on the Back-End. I need to learn how to connect those two factors. I searched online for a tutorial about that. I found that I need to use express JS as a server on the Back-End. The last part is the “report” feature. How to exchange data between Front-End and Back-End is another barrier on this part. In the end, I successfully implemented a modal window and created a form inside the modal window in React by following the tutorial video. In this part, I learned how to exchange data between Front-End and Back-End with node JS and express. I created a database for this feature.