ResilienCity

Inspiration

A lot of people think that some disasters will pass them by, so they are not prepared and I wanted to make something that will apply to our generation and help them understand that those things matter. Other thing that inspired me is the situation in Ukraine, as you may know we have a war, so a lot of people are under occupation, and that situation taught me that help is really important, so I wanted to implement some services that will help people that need help effectivly comunicate about their needs, so that we can help.

What it does

We made a website with 5 main pages: Home, Dashboard, Request Help, Preparedness Game and Analitics. The Home page has general information about the ResilienCity and links to other pages to explore. On the Dashboard page we can see natural disasters from around the world. They are shown on the 3d interactive globe, which we can also filter by region and type of the disaster. Also the is other information displayed like severity trendline, resource inventory and other. If we look at the Request Help page, we will see a request help form, so that a person who really needs help can fill out information in the form and upload a photo of the desaster and by using Gemini it will be classified by its severity. As you may know people are competetive creatures, so I created the Preparedness Game page. In the game each round pulls 8 random questions from the 200-question list. The system awards points for safer decisions and reveals an explanation after every choice. The last but not least is the Analitics page which has ML model to predict trends using the data from 2000 - 2025 years. You also can play with the graph and see how it changes based on the time range and region.

How we built it

For frontend I used React, Vite, Tailwind CSS, with React Router for navigation between Home, Dashboard, Help Request, Game, and Analytics pages. Charts were made using Recharts, globe 3d map using MapLibre GL. A backend had Vercel like serverless functions to keep API keys off the client. For the severity analysis endpoint sends the uploaded image and incident description to Google Gemini, which returns a json severity assessment. If no image is provided in the field or the API key isn't configured, a fallback based on the rules estimates severity instead, so the demo always works offline. Also for this project I used ML algorithms. I used for this PyTorch MLP neural network trained on historical EM-DAT disaster data (2000 - 2025 years) with lag and rolling-mean features, used to forecast future disaster counts per region (it is on the Dashboard). I used for loss function MSE and optimizator Adam. The validation was on the last 24 months. The training was executed on Nvidia Cuda GPU. For this website the data is in local csv/json datasets (EM-DAT disaster records, generated forecast outputs, scenario data for the game), with Supabase integration for storing help requests.

Challenges we ran into

For me the challenge was to set up Nvidia Cuda and run a ML model on it, because right before the contest it broke and I needed to set it up again and it was really stressful. Also I worked a lot of time on the frontend and it quite hard to make it look polished. The next challenge was to create all those question for the game (and make sure that they are correct).

Accomplishments that we're proud of

I am really proud of the dessign of my website, because I am a big fan of the glass morphism and I really wanted to have in my website and I am really happy about how it turned out. I love how the website has so much different things, so it will be helpful to different generations. While young people tend to love games more, adults like to see data, so I tried really hard to make it fun for everyone.

What we learned

Even when I was preparing for the hackathon I found some really awesome websites for inspiration like https://dribbble.com/ https://www.mapcn.dev/ and https://motionsites.ai/ . Thay gave me the inspiration for the design and helped me to visualise the website in my head. Also I learned a lot of new techniques on how to work with Claude and other AI agents, because before the preparation I didn't know about half of their possibilities, so this has really broaden my horizons.

What's next for ResilienCity

Only if I had more time I would have worked more on the design of the website and would've put some animated elements (something similar to the content on the website that I have mentioned above called motionsites.ai). Also I really wanted to experiment more on the architectures of the neural networks, so that we would get the best result. Next thing that I would have done is setting up a registration system with a database of the users using Supabase and than make a leaderboard so that you can see other people results, earn badges and just have a great time. It would have been nice to also experiment with the format of the game, maybe add something more complex then questions. But I am happy with what I build in 24 hours.

Built With

• cuda
• gemini
• javascript
• maplibre
• matplotlib
• node.js
• numpy
• pandas
• postcss
• postgresql
• python
• pytorch
• react
• recharts
• scikit-learn
• supabase
• tailwind
• vite