Zabaan

Inspiration

Pakistan is a beautiful and culturally rich country that’s quickly becoming a popular tourist destination. From the mountains of Hunza to the bustling streets of Lahore, there’s so much to explore but for many international travelers, language becomes a real barrier. Most locals speak Urdu or regional languages, while many tourists only speak English. That gap makes it hard to ask for help, order food, or even just have a friendly conversation.

I wanted to solve that problem by building something useful, lightweight, and AI-powered something that actually helps people communicate better, in real time. That’s where the idea for Zabaan came from a web app to help tourists "speak local."

What it does

Zabaan is a real-time English↔Urdu translator built for tourists in Pakistan. It combines traditional translation with AI features to make travel communication easier. Here's what the app can do: Translate typed English or Urdu text into the other language Show Roman Urdu so users who can't read the Urdu script can still speak it Let users speak in English, transcribe it using AI, and get an Urdu translation Offer a smart phrase suggestion using GPT-3.5 to help tourists speak politely Include a built-in phrasebook for common travel situations

Feature a bilingual AI travel assistant chatbot that answers questions in both English and Urdu

How we built it

I built Zabaan using the Worldview (Bolt) visual app builder, which let me move fast and focus on logic instead of UI code. I used: LibreTranslate API for basic text translation (open-source and free) OpenAI Whisper API for converting voice into text OpenAI GPT-3.5 Turbo for generating Roman Urdu, chat replies, and polite phrase suggestions LocalStorage to let users securely save their OpenAI API key Custom logic flows to handle graceful fallback when AI isn't available

I also designed the UI to be simple and mobile-friendly, because most tourists will be using this app on their phones.

Challenges we ran into

One of the hardest parts was Roman Urdu support there’s no perfect API that converts Urdu script into accurate phonetic Latin script. I ended up combining GPT and some simple character mapping as a fallback. Another big challenge was integrating audio recording and Whisper into a web app without a backend. Handling mic permissions, converting audio formats, and uploading to the Whisper API took a lot of trial and error.

I also hit OpenAI rate limits while testing, which forced me to build logic to detect and respond to API key errors gracefully so users don’t get stuck.

Accomplishments that we're proud of

I’m proud that I was able to build a fully working app that solves a real, human problem and one that can help travelers feel more confident and connected. It also felt great to integrate multiple advanced AI features like GPT and Whisper into a single no-code project.

Most of all, I’m proud of making something that could actually help someone on the ground in Pakistan, whether they’re asking for directions or just trying to say "thank you" to a local.

What we learned

This project taught me a lot about: Connecting REST APIs with no-code tools like Bolt Handling multi-language text rendering on the web The limits and strengths of AI tools like GPT and Whisper Designing for real-world usability, not just technical features

I also learned the importance of building fallbacks, because even the best AI services fail sometimes especially when users hit limits or go offline.

What's next for Zabaan

Add offline phrasebook support for tourists visiting areas with poor or no internet connectivity Expand language support to include Punjabi, Pashto, and Sindhi — making Zabaan even more useful across Pakistan Map-based phrase search, so tourists can instantly find useful phrases like “Where is the nearest restaurant?” based on their current location Location-based smart suggestions — using the user’s location to recommend: Popular tourist spots nearby Famous local foods Cultural phrases relevant to the area they’re in Improve the voice recording UX, with better controls, visual feedback like a real-time waveform or timer, and a smoother recording-start-stop experience Submit Zabaan to real-world travel forums to get feedback from international travelers and use that input to improve the app even further

Built With

• autoprefixer
• clipboardapi
• css3
• eslint
• fetchapi
• fileapi
• formdataapi
• github
• googlefonts
• gpt-3.5-turbo
• html5
• inter
• javascript
• libretranslate
• localstorageapi
• lucidereact
• mediarecorderapi
• netlify
• notonastaliqurdu
• openai
• postcss
• pwa
• react
• reactcontextapi
• serviceworker
• speechsynthesisapi
• tailwindcss
• typescript
• typescripteslint
• unicode
• vite
• vitepluginreact
• webaudioapi
• webspeechapi
• whisper