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.
The icy and slippery road is a big challenge for every CU Boulder member during winter time. The road cleaning force is limited, there are always some popular paths that are missed when the staff goes to clean. My thesis project’s goal is to solve this problem.