PrevenTect

I was in Zurich for two weeks, buried in my master thesis. Then, out of nowhere, I stumbled upon an ad for the Bärn Häckt Hackathon.

And I thought.... why not? So I packed my curiosity, my laptop, and a suspicious amount of caffeine, and off I went.

Challenge

GVB is a Gebäudenversicherung company in Bern. Pretty much every building in Bern is insured by them.

And here’s the kicker: accidents tend to happen… again and again.

A roof gets damaged.

The customer calls a repairman.

The roof gets fixed.

All seems fine.

Some months later… the roof gets damaged again.

And the whole cycle starts over.

But here’s the twist: if you had used a different material for the repair, that problem might never happen again.

Mind blown, right?

Normally, GVB has consultants who give advice like this. But… there are just not enough of them to help every customer. And that’s where prevention comes in.

GVB wanted to warn people:

“Hey, your building looks a lot like another one. They just had this problem. Maybe don’t do what they did.”

Basically, stop accidents from going on repeat like a bad Netflix series.

Solution

Enter: The chatbot.

Customers can report damage directly through it. And as a bonus, the bot dishes out tips on how to protect their buildings better. But we didn’t stop there. There’s even a simulation game based on geodata.

For example: “In your region, a snowstorm is coming. What do you do?”

Choices matter. Wrong choice? Uh-oh, the roof is gone again.

The second part of our app is prevention. GVB can see all reported damages. Then, they send warnings to other similar buildings.

Think of it like a neighborhood gossip… but way more useful.

Here’s a demo:

How we built it

The app consists of a simple React application with Shadcn components. here is the workflow:

1. Submit user message: The user enters their question or prompt through the frontend interface, which is then sent to OpenAI for processing.
2. Returns answer: OpenAI processes the user's message and generates a response, which is sent back to the frontend for display.
3. Save user data: The frontend stores user-provided information (location, damage type, description, and images) in Supabase for persistence.
4. Query GVB by address: The frontend sends the user's address to the GVB-API to retrieve relevant company or service data.
5. Return geodata: The GVB-API responds with geographic or service-related data associated with the provided address back to the frontend.
6. Fetch user data: The frontend retrieves previously saved user information (location, damage type, description, and images) from Supabase when needed.

PrevenTect Architecture

Learnings

This was my first time working with Mapbox, and I’m seriously impressed. It comes with so many cool features out of the box: Zooming, rotating around buildings, even a rain effect. The documentation is excellent, with plenty of examples, and I can definitely recommend it as a visually appealing alternative to Google Maps.

In the end, we secured 3rd place!

Huge thanks to our amazing team for the laughs, teamwork, and all the late-night coding sessions. I’m really proud of what we accomplished and can’t wait to cross paths again in the future.

Our cool team

Techstack

• React
• Mapbox
• OpenAI API