Heels Safety Net

From Campus to Community: Empowering TarHeels to Save Lives

Comment

Inspiration

According to a journal article published by the American Heart Association in 2022 bystander CPR performed during out of hospital cardiac arrests increases the survival rate of that person by almost twice as much. Despite this statistic the number of potential bystanders that can actually perform CPR during these events is less than 50%. While this is a global health issue, to address the larger problems we felt it was better to start on the community level and see what we could do to help right here at UNC. Currently, there are many organizations on campus that provide free CPR classes for the UNC Community. Despite these resources, access and knowledge of these are very limited. A safer campus community is built upon the CPR skills of its members, and expanding our network of CPR-trained campus affiliates will not only increase the efficiency of emergency response, but also the chance of survival and recovery, effectively creating a safety net for all.

What it does

Heels Safety Net currently has three main features that are built in: real-time incident reporting where an emergency ping is sent to a directory of CPR certified volunteers who are nearby, the ability to find CPR classes (paid and free) in the area in both a map and list view as well as a discussion forum to keep the community connected, supported, and engaged on conversations of emergency preparedness and CPR.

How we built it

We first began by brainstorming the design and what information we wanted to include in this website. After setting up our project in a dev container, we drew an outline of the website and its functionality. We wanted to focus our efforts on a user-friendly design that would increase the efficacy of the app. To do so, we picked a color scheme that was user friendly, incorporated easy to see and follow images and a simple layout that would decrease confusion. Once this was completed, we began writing code in TypeScript using React and Tailwind and building the project using Vite. We began with a Navigation Bar and a homepage that houses the website's features. Because of the nature of the tasks and our own learning curve given the time we switched to prototyping in Figma to finish a demonstration of the features. We iterated the website design in an app format collaboratively on Figma for these external pages.

Challenges we ran into

Some of the challenges we ran into began with setting up the environment. Ensuring that the right dependencies and packages were installed proved to be a challenge especially because we were trying to import certain react packages that had conflicting versions with our build tools. We also struggled with Tailwind because of how vast the database is. Trying to figure out how to style aspects of our websites while trying to create reactivity was new territory for us.

Accomplishments that we're proud of

We are extremely proud of our perseverance in sticking through the learning curve that was the React environment with Tailwind and TypeScript. We were able to come up with a comprehensive design with an idea that is extremely meaningful to all of us and that we believe can truly make a difference in the TarHeel community.

What we learned

This project included many different aspects in which each of us were able to learn different types of information. Each of us had different levels of experience with the frameworks, languages and ideas used in this project (React, Tailwind, Vite, TypeScript and Figma). To do our best in bringing our idea to fruition we embraced these differences and shared what we learned. Some of our team members learned how to effectively navigate and use documentation in Tailwind and React. In React, we learned how to use web routing to create a SPA (Single Page Application), how to dynamically render elements on the screen given different information, and how to deploy our site. Other team members focused on learning effective design strategies to help improve user experience. Overall, we learned a lot about how to navigate through reactive elements on Figma and React and how to problem-solve through issues that would arise.

What's next for Heels Safety Net

In the future we hope to move this idea into a fully functional web application and possibly even an IOS app. We plan to add features that allow communication between members and AI chatbots that can also assist in communicating information to those using the application. Additionally we want to add more emergency preparedness features that assist people in knowing what to do in situations like drug overdoses on campus.More importantly we hope that once this is complete we can spread this app by putting it in a more public location like the CarolinaGO! App , where more TarHeels can access and use this app. We hope that this effort can help increase the knowledge and awareness to help students on campus and their own communities.

Built With

Share this project:

Updates