Work
About
Contact
I Built a Belgian Beer Locator with AI
(as a Designer Who Can’t Code)
🍻 Where’s me beer?
I moved to Belgium recently. I like beer. I wanted to learn how to build a simple web app — no Figma handoff, no developer dependency. So I made a beer bar locator that shows real-time results on a map using open data. It’s a small project, but it taught me a lot.
Yes, people can just use Google Maps. That’s not the point. I did this to learn how to use AI to code, connect to open APIs, and understand how real web products are built.
Why did I do it?
🍻 I wanted to test how far I could go as a designer working with AI
🍻 I like beer and needed something simple to start with
🍻 I wanted to learn how open data, React, and Map actually work
🍻 I didn’t want to waste time on over-polished UI — just enough design to guide development
The Design Challenge
Even though I kept the UI minimal, I still designed the layout before building. Just a quick draft: map on one side, list on the other, responsive layout, simple loading state.
What surprised me was how tricky it was to get the AI-generated code to match my design. You really have to:
- Be very specific when you prompt
- Break layout instructions into steps
- Repeat or rephrase when the layout doesn’t come out right
- Learn some CSS to fix edge cases manually
So even though I didn’t code it line-by-line, I still needed to understand how styles, layout systems, and components work.
What I Built With (And How It Went)
I started with lovable.dev, an AI tool that turns prompts into working React code. I described my layout and attached a screenshot of my quick design — but I still wrote the prompt like I was explaining it to a real dev: structure, layout, how the city buttons work, where the map goes, how it should respond, etc.
Then came the map. At first, I asked for Google Maps, but I quickly learned that some features need billing setup. That’s when I switched to Mapbox, and that opened a whole new door — I had to actually understand how APIs work.
Funny enough, in my day job we’re offering solutions (APIs of course), but I’ve never used one hands-on like this. With Mapbox, the biggest challenge was: I didn’t know how to integrate it with the rest of the app properly. So how did I fix it? I literally gave the AI the documentation and asked it to guide me.
Showing you here how </> dev mode look like
Next challenge: the beer spots on the map weren’t showing up. I read through the code (yes, I can read code — just don’t ask me to write from scratch) and realized it was all dummy data. That’s when I found out Mapbox doesn’t come with a search or location dataset built-in.
So I did some digging. Is there any free source that shows actual beer bars or breweries? That’s how I found Overpass API, which lets you pull data from OpenStreetMap. I integrated it into the map, and finally, real beer spots appeared. That was a big win.
My prompt was involving testing result, wrote down the issue(s), then find the way to fix it and loop...
From there, I crafted each detail bit by bit: city buttons, how the map moves, how it loads, how it reacts. It was all prompt by prompt. Sometimes I had to revert to older versions when things broke. I learned quickly that being clear and specific, and even trying to use developer terms, made a huge difference.
Final Thoughts
If you’re a designer curious about code, start small.
Use AI like a design partner — not a magic tool.
You won’t instantly become a developer. But you’ll get closer to building your own ideas — and that’s worth a lot.
Work
About
Contact
I Built a Belgian Beer Locator with AI
(as a Designer Who Can’t Code)
🍻 Where’s me beer?
I moved to Belgium recently. I like beer. I wanted to learn how to build a simple web app — no Figma handoff, no developer dependency. So I made a beer bar locator that shows real-time results on a map using open data. It’s a small project, but it taught me a lot.
Yes, people can just use Google Maps. That’s not the point. I did this to learn how to use AI to code, connect to open APIs, and understand how real web products are built.
Why did I do it?
🍻 I wanted to test how far I could go as a designer working with AI
🍻 I like beer and needed something simple to start with
🍻 I wanted to learn how open data, React, and Map actually work
🍻 I didn’t want to waste time on over-polished UI — just enough design to guide development
The Design Challenge
Even though I kept the UI minimal, I still designed the layout before building. Just a quick draft: map on one side, list on the other, responsive layout, simple loading state.
What surprised me was how tricky it was to get the AI-generated code to match my design. You really have to:
- Be very specific when you prompt
- Break layout instructions into steps
- Repeat or rephrase when the layout doesn’t come out right
- Learn some CSS to fix edge cases manually
So even though I didn’t code it line-by-line, I still needed to understand how styles, layout systems, and components work.
What I Built With (And How It Went)
I started with lovable.dev, an AI tool that turns prompts into working React code. I described my layout and attached a screenshot of my quick design — but I still wrote the prompt like I was explaining it to a real dev: structure, layout, how the city buttons work, where the map goes, how it should respond, etc.
Then came the map. At first, I asked for Google Maps, but I quickly learned that some features need billing setup. That’s when I switched to Mapbox, and that opened a whole new door — I had to actually understand how APIs work.
Funny enough, in my day job we’re offering solutions (APIs of course), but I’ve never used one hands-on like this. With Mapbox, the biggest challenge was: I didn’t know how to integrate it with the rest of the app properly. So how did I fix it? I literally gave the AI the documentation and asked it to guide me.
Showing you here how </> dev mode look like
Next challenge: the beer spots on the map weren’t showing up. I read through the code (yes, I can read code — just don’t ask me to write from scratch) and realized it was all dummy data. That’s when I found out Mapbox doesn’t come with a search or location dataset built-in.
So I did some digging. Is there any free source that shows actual beer bars or breweries? That’s how I found Overpass API, which lets you pull data from OpenStreetMap. I integrated it into the map, and finally, real beer spots appeared. That was a big win.
My prompt was involving testing result, wrote down the issue(s), then find the way to fix it and loop...
From there, I crafted each detail bit by bit: city buttons, how the map moves, how it loads, how it reacts. It was all prompt by prompt. Sometimes I had to revert to older versions when things broke. I learned quickly that being clear and specific, and even trying to use developer terms, made a huge difference.
Final Thoughts
If you’re a designer curious about code, start small.
Use AI like a design partner — not a magic tool.
You won’t instantly become a developer. But you’ll get closer to building your own ideas — and that’s worth a lot.