Telebook — a mini app for booking hotels.
It provides several screens demonstrating different abilities: list views, cards, animations, forms, payments, etc. It uses mocked hotel info and pictures.
The UI matches the Native OS and a particular Telegram client style.
Test animation smoothness and common end-user experience. Also, check out the source code that could be used as an example for creating the new app.
🧩 Telegram Vue UI Kit — build native-like interfaces with ready-to-use components
❤️🔥 Instant picture previews and on-device cache
☘️ Smooth screen transitions
✨ Advanced DX — fast build, hot reloading, modern code style and linters, well-documented code
💎 Clean but simple architecture
📦 Production-ready deployment setup
💵 Payments support
I'm gonna divide them into three messages.
First Issue: Please disable text selection, it just ruins the native-like experience of this beautiful webApp (attached in the photos)
1.The date picker does not get automatically closed after selecting the desired date, so that's a bad UX, I have to click again on the picker label to close it. Also the picker label does not have cursor: pointer and that's another confusion of clickability in Desktop
2. The date picker has some issues when date is autocasted by the code, Scenario:
I selected start date October 30, end date October 31, I changed start date to November 10, my end date in label got updated to November 11, but when opened the end date picker, it was showing October 31 as selected but in a disabled styled (strange), also after some togglings, It was showing me the October 29 as selected (We are in October 30 bruh), and was active (attached in the photos)
Open a hotel or booking page or any other page than the root url, click on "Reload" button, you will face 404 error
for a quickfix, you can use htaccess or any other thing to rewrite all urls to your index.html in the backend, just be quick before judges final test
Then again, much love and appreciation for this awesome UI.