Interactive Booth for PBS Hackathon at BIBAN Forum
Created an interactive booth experience for the PBS Hackathon at the BIBAN forum. The installation featured a touch screen display designed to engage visitors and gather their innovative ideas related to specific sectors.
Main Screen
Main Screen (Arabic)
User Info Screen
Features & Functionality
Main Screen
Displays the title "PBS Hackathon" and three interactive boxes representing different sectors (Traffic, Real Estate, Tourism).
Question Screen
Presents a sector-specific question to the user and allows them to input their answer in a text area.
User Info Screen
Collects user's name, email, organization, and mobile number through a form.
Data Submission
Stores user input (sector, answer, and contact details) in a Firebase Realtime Database.
Technical Details
Frontend
- HTML
- CSS
- JavaScript
Backend
- Firebase Realtime Database
Tools
- Git
- Excel
Design
Aesthetic
Modern and visually engaging, with a gradient background, subtle animations, and a user-friendly interface.
Color Palette
Typography
- Segoe UI
- Tahoma
- Verdana
Responsiveness
The application was designed to be responsive and adapt to different screen sizes.
Accessibility
The design followed accessibility best practices, with clear text, sufficient color contrast, and keyboard navigation support.
Challenges & Solutions
Challenge: Ensuring data persistence in a potentially offline environment.
Solution: Used localStorage as a fallback to store data locally if the Firebase connection failed.
Ready to start your own project?
Start Your Project Now