Inspiration
The main inspiration for creating the Offline Emergency App came from real-life situations where people could not access help due to a lack of internet connection. Many travelers, hikers, and people living in rural or remote areas face difficulties when emergencies happen and there is no network coverage. During such moments, even basic help like first aid information or contacting loved ones becomes impossible.
This problem encouraged me to build an app that works completely offline, so that everyone can still access important emergency features without depending on the internet. I wanted to make sure that no one feels helpless during an accident or urgent situation. The app is designed with the goal of saving lives and helping users stay safe wherever they are.
What it does
I created an Offline Emergency App to help people who travel or explore places without internet access. It can also be useful in areas with slow connections, power cuts, or other network problems. This app is especially helpful for hikers, people living in rural areas, and underserved communities. Accidents can happen anytime, so I made this app to make sure everyone can get help even without internet.
The first feature is First Aid, which helps create awareness. When someone doesn’t know how to give first aid, they can quickly learn through the app on the spot. The second feature is Nearby Hospitals, which shows hospitals near the user’s location using GPS. The location data is stored in an offline database, so it works even without internet. Next is the SOS Alert feature. When someone is in a serious emergency with no help nearby, they can send an SOS alert to emergency services even without a signal. It’s important that people use this feature responsibly because false alerts can lead to strict penalties. The Emergency Contact section lets users save phone numbers of their loved ones, like parents or friends. This makes it easier to contact them during emergencies, even in areas with little or no signal. Finally, the Settings section allows users to customize the app as they wish.
How we built it
To build the Offline Emergency App, we chose React Native because it allows easy development for both Android and iOS devices. We used Snack Expo as our main coding platform since it made it simple to write, test, and preview code, and let us install most needed dependencies with one click. This saved us time and helped us avoid the hassle of configuring complex files like babel.config.js, tailwind.config.js, and metro.config.js.
We started with basic templates and added features step by step. The main screen design was done with ready-made components from packages such as React Native Paper, React Native Elements, and React Native Animation—all available in Snack Expo. For offline functionality, we used local storage to keep first aid tips, emergency contacts, and hospital information on the device, so the app would work without internet.
We set up navigation between different screens using React Navigation, and whenever we faced technical problems, such as screen navigation errors, we reached out for mentor support at the hackathon, which helped us learn and fix issues quickly.
We focused on keeping the code simple and the design user-friendly so that anyone could use the app easily—even in stressful emergency situations
Challenges we ran into
I chose to write my React Native code in Snack Expo instead of VS Code. The main reason is that there were too many technical issues I had to fix, like configuring files such as babel.config.js, tailwind.config.js, metro.config.js, and package.json to make Tailwind CSS work with React Native. Among them, I found package.json easy to understand because the scripts replace long command-line commands. But fixing other files was tedious and took a lot of time. Each time I tried to install dependencies, it didn’t work properly unless I edited those .js configuration files to make them compatible with React Native. So, to save time and avoid this trouble, I decided to use Snack Expo instead.
With Snack Expo, I didn’t have any technical issues like configuration errors. Every time I added import statements in my App.js, Snack Expo just asked me to install the needed dependencies, and I could do it with one click — no extra setup required. However, I later realized that not every React Native dependency was available in Snack Expo. Some were missing, but I managed to use the ones that were there, like React Native Paper, React Native Elements, and React Native Animation, especially for my hackathon project.
Accomplishments that we're proud of
We built a working Offline Emergency App that can help people even when there is no internet connection.
The app lets users access first aid advice, find nearby hospitals, send SOS alerts, and save emergency contacts—all without network access.
We managed to create a simple, easy-to-use interface that works on both Android and iOS phones using React Native.
We solved screen navigation issues and successfully used packages like React Native Paper and React Native Elements that were available in Snack Expo.
We worked as a team, learned quickly from our mentors, and fixed technical problems during the hackathon.
Most importantly, we built something that could make a real difference for people in emergencies.
What we learned
As for what I learned: I used ready-made templates with React and JSX as my starting point. Even though ES6 arrow functions looked confusing at first, I learned where to place the React Native components and const statements correctly. I already knew some basics of CSS and used that to style my React Native components. I had trouble understanding React itself, but the React Native core components were easier for me.
Yesterday, I had a problem navigating between screens on my mobile app. I spent a lot of time trying to fix it and finally gave up. I raised a ticket for help, and two mentors came quickly. I didn’t expect them to respond so soon since I thought they would be busy with other students. Both mentors were new to Snack Expo, so they took some time to understand my code. One of them checked the Expo documentation, which I had already seen, but the other mentor found the correct solution. The issue was related to Navigation. I learned the fix and kept using it whenever I connected pages.
Overall, React felt difficult to me, but I managed to use components from React Native Paper and other examples easily. I just wish that React Native setup could be simpler and less complicated.
Log in or sign up for Devpost to join the conversation.