UAE Information AI Chatbot — Angular web app
This web app was built as an entry for a school robotics competition whose challenge was a UAE information chatbot. It pairs a chatbot with guide pages for the things visitors and residents ask about most: tourist spots, transport, events and emergency services.
It is my own project rather than client work, and I show it as a compact example of an Angular 17 build that is live and deployed.
The goal
The competition challenge: a chatbot that gives people information about UAE tourist spots, transport, cultural events and emergency services.
What I built
-
Chatbot with a curated question bank
Forty ready-made questions and answers about UAE attractions, getting around and culture, matched to what the visitor types, with quick-start buttons for each topic.
-
Live look-ups for UAE topics
For UAE-related questions the chatbot also searches Wikipedia and shows linked summaries, with a typing and searching indicator and a friendly fallback message if the look-up fails.
-
Guide pages
Separate pages for tourist spots, transport, events and emergency services, plus about, contact and privacy-policy pages. Every route is loaded on demand.
-
Modern Angular, deployed automatically
Standalone Angular components with lazy-loaded routes, Tailwind CSS styling, a light and dark theme service, and a GitHub Actions workflow that builds and publishes it to GitHub Pages on every push.
Scope and limits
Answers come from the curated bank and live Wikipedia look-ups. It is not backed by a large language model, and the PictoBlox AI integration named in the competition brief is not implemented yet.
Technologies
- Angular 17
- TypeScript
- Tailwind CSS
- RxJS
- GitHub Actions
- GitHub Pages