Welcome

atlasinstitute.work showcases exemplary projects completed by students enrolled in graduate and undergraduate Creative Technology and Design program at CU Boulder. If that’s you, and your instructor has invited you to upload your work, please log in or create an account and upload your content. Once it has been approved, you’ll receive an email notifying you that it is live.

Not registered?Sign up
Hi Fi Student Home Screen D
Hi Fi Student Home Screen Tip 1 D
Hi Fi Student Home Screen Tip 2 D
Hi Fi Student Home Screen Tip 3 D
Hi Fi Search Input D
Hi Fi Student Report Screen D
Hi Fi Student Report Screen D 1
Hi Fi Student Report Detail Screen D
Hi Fi Student Report Submition Screen D
Hi Fi Student Report Enter Screen D
Hi Fi Filter D
Hi Fi Atlas Route D
Student Account Login Screen D
Hi Fi Student Account Screen D
Hi Fi Student Account Screen2 D
Hi Fi Student Account Screen2 D 1
Hi Fi Student Account Report Detail Screen D
Hi Fi Student Account Report Detail Screen D Option 2

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.

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.

Levels

,Jiaji Sun

Advisors

Justin Gitlin

Published

2024

Back to top