Panic Hero

Turn Crisis Into Confidence

Comment

The Development of Panic Hero: Our Journey

Inspiration

Every year, around 60,000 people lose their lives due to natural disasters worldwide. While many students learn how to respond to emergencies in school, this crucial information doesn't reach everyone. To address this gap, we created Panic Hero — an app designed to teach people how to react in emergency situations and, ultimately, help save lives.

What it does

Our solution leverages gamification—incorporating XP, levels, and mini quizzes—to educate people on the best responses during natural disasters. Research indicates that gamified learning can enhance user engagement by up to 48% and increase knowledge retention by approximately 45% . By using game-like elements, we aim to make disaster preparedness more accessible and compelling, ensuring our message resonates across diverse audiences, regardless of age or prior interest in the subject.

How we built it

We built Panic Hero using HTML, CSS, JavaScript, and TypeScript, some elements of Figma and ChatGPT.

The home page was designed in Figma, which helped us prototype the interface and focus on a user-friendly layout. We then implemented interactive challenges like drag-and-drop activities and multiple-choice quizzes, and made it so each completed challenge triggers a badge system to encourage progression and motivation.

We worked to make sure that our site had..

  • Clarity: making sure the interface was easy to navigate

  • Accessibility: ensuring anyone could play and learn, including the people who may have trouble focusing because the colors mainly contrast each other, and we tried our best to make it readable.

  • Engagement: we didn't just want to put information, we wanted to create something fun that would keep the users engaged while learning at the same time.

Challenges we ran into

Some of the challenges we faced were inputting some of the information, especially the multiple-choice questions. The login/signup page was also slightly challenging because we were confused about how to make it such that the users would be able to access it. We had frequent issues with styling, where the font color and style often differed from what was intended. We also had difficulty designing a visually appealing homepage that was connected to the rest of the site and maintained consistent navigation. Additionally, it was a challenge to strike a balance between simplicity and functionality, while preserving the core goal of engaging the audience. This required multiple iterations and careful attention to both design and user experience

Accomplishments that we're proud of

We are proud that we were able to make an almost fully functional app despite having limited experience in coding. For most of us, it is our first hackathon, so the fact that we were able to make a website that works and is fun brings us joy. This accomplishment reflects our team's ability to learn quickly and adapt to new tools. It was fun to see our ideas come to life and turn from a boring webpage to an interactive application, and we hope to make a meaningful impact through our project.

What we learned

Throughout the development process, we learned how to effectively use AI prompting, Figma, and various other web development tools. We also learned more coding languages such as TypeScript, Java, HTML, CSS, and a little bit of Python. We already had some knowledge of these languages, but through this project, we had the chance to learn and expand our knowledge of these languages. Most importantly, we learned the power of collaboration and communication. Most of us liked working independently, but all of us coming together, listening to each other’s ideas, created a calm, composed, and cohesive environment. It was also an opportunity to learn different skills from each other.

What's next for Panic Hero

Next, we plan to add a heat map that highlights common disaster-prone areas, helping users visualize high-risk zones more effectively. This feature will enhance awareness (it allows the audiences in less disaster-prone areas to realize this problem is a real thing and not something you only see on the news) and improve preparedness by showing real-time or historical data of disaster occurrences, which would help people notice patterns in these disasters and be aware of what disasters are common in their area. This may greatly reduce the chance of people getting hurt from natural disasters and help them take the precautions needed.

Built With

Share this project:

Updates