HOURLINE: ऑनलाइन बुकिंग प्लेटफ़ॉर्म का कॉन्सेप्ट, क्लाइंट साइड और स्टूडियो के बैक ऑफ़िस के साथ

VITON¹³ कॉन्सेप्ट प्रोडक्ट बनाता है ताकि दिखा सके कि वह सिर्फ़ वेबसाइटों को नहीं, बल्कि किसी कारोबार के सॉफ़्टवेयर को कैसे देखता है। HOURLINE इस सीरीज़ का बुकिंग प्लेटफ़ॉर्म है: प्रीमियम स्टूडियो और क्लिनिक के लिए ऑनलाइन बुकिंग, जिसे Maison Hourline के ज़रिए दिखाया गया है — मॉस्को, दुबई और लंदन के तीन स्टूडियो वाला एक काल्पनिक हाउस, जहाँ नौ विशेषज्ञ मसाज, फ़ेशियल, हेयर, नेल्स और फ़िज़ियो करते हैं। कारोबार, उसके लोग, क्लाइंट और क़ीमतें गढ़े हुए हैं, और डेमो हर स्क्रीन पर यह बताता है।

हमने ख़ुद को जो ब्रीफ़ दिया, उसके तीन हिस्से थे। मेहमान को बिना फ़ोन किए, कुछ सेकंड में अपने फ़ोन से बुकिंग करनी चाहिए। पेश किए गए समय असली होने चाहिए — विशेषज्ञों के घंटों, ब्रेक, मौजूदा बुकिंग और तैयारी के समय से, हर स्टूडियो के अपने टाइम ज़ोन में गिने हुए — कोई सजावटी ग्रिड नहीं। और स्टूडियो को बुकिंग उसी पल दिखनी चाहिए जब वह की गई, साथ ही अपना दिन बचाने के औज़ार भी मिलने चाहिए: ऐसा कैलेंडर जिसे हाथ से बदला जा सके, चेतावनी जब किसी अपॉइंटमेंट के छूटने की आशंका हो, और ख़ाली समय भरने का तरीक़ा।

मेहमान वाले हिस्से में दो व्यू हैं, Book और My bookings, जो सबसे पहले फ़ोन के लिए डिज़ाइन किए गए हैं। बुकिंग स्टूडियो से सर्विस, विशेषज्ञ, तारीख़ों की पट्टी और टाइम ग्रिड, नाम और फ़ोन से होते हुए पुष्टि तक जाती है, और कार्ड में एक स्टॉपवॉच चलती है। हर स्टूडियो अपना स्थानीय समय और यह दिखाता है कि वह अभी खुला है या नहीं। सुझाव चिप्स सबसे पहला ख़ाली समय, पिछली विज़िट से सीखा गया मेहमान का “usual” समय और उसके पसंदीदा विशेषज्ञ के साथ समय सुझाते हैं; “दोस्त के साथ बुक करें” ऐसे दो विशेषज्ञ ढूँढता है जो एक ही समय पर ख़ाली हों। पुष्टि एक Wallet जैसा पास है, जिसके साथ ब्राउज़र में बनी कैलेंडर फ़ाइल (.ics) मिलती है। My bookings में अपॉइंटमेंट को विशेषज्ञ के दिन पर खींचकर बदला जा सकता है, जहाँ वह ख़ाली शुरुआती समयों पर टिकता है, या स्टूडियो की नीति के अनुसार रद्द किया जा सकता है — मुफ़्त अवधि और देर से रद्द करने के शुल्क के साथ।

स्टूडियो वाले हिस्से में पाँच व्यू हैं। कैलेंडर एक दिन को हर विशेषज्ञ के एक कॉलम के साथ दिखाता है, स्टूडियो के हिसाब से समूहों में, हर समूह अपने स्थानीय समय और अपनी “अभी” वाली रेखा के साथ; हफ़्ते का व्यू भी है। अपॉइंटमेंट को दूसरे समय या दूसरे विशेषज्ञ पर खींचा जा सकता है, निचले किनारे से लंबा किया जा सकता है या एक क्लिक से बनाया जा सकता है; हर बदलाव उन्हीं नियमों से गुज़रता है जिनसे मेहमान वाला हिस्सा, और नियम तोड़ने वाला ड्रॉप हिलकर वापस लौटता है और कारण बताता है, जैसे किसी दूसरी बुकिंग से टकराव। डैशबोर्ड रेवेन्यू, हफ़्ते के दिन और घंटे के हिसाब से उपयोग का हीटमैप, नए और लौटने वाले क्लाइंट, कैंसलेशन, नो-शो और बुकिंग की अग्रिम अवधि दिखाता है; Clients में टैग, कुल वैल्यू, इतिहास और नोट्स हैं; Settings में सर्विस, क़ीमतें, घंटे, ब्रेक, बफ़र और कैंसलेशन व डिपॉज़िट की नीति बदलती है, और बुकिंग पेज तुरंत उसे अपना लेता है।

पाँचवाँ व्यू, Intelligence, वह है जिसे हम डेमो AI कहते हैं, और पेज पर यह साफ़ लिखा है: ब्राउज़र में गिने गए नियम और आँकड़े। हर आने वाले अपॉइंटमेंट को एक naive Bayes मॉडल से नो-शो का जोखिम मिलता है, जो डेमो के अपने इतिहास पर प्रशिक्षित है (पहली विज़िट, बुकिंग की अग्रिम अवधि, पिछले नो-शो, दिन का समय, हफ़्ते का दिन), और पुष्टि हुए रिमाइंडर या चुकाए गए डिपॉज़िट पर नियमों से समायोजित होता है; हर स्कोर अपने कारक बताता है और एक कदम सुझाता है, जैसे डिपॉज़िट माँगना। “Fill the gaps” आज और कल का ख़ाली समय ढूँढता है और उसे एक सिम्युलेटेड वेटलिस्ट के लोगों से मिलाता है; स्वीकार किया गया ऑफ़र उस स्लॉट को बुक कर देता है।

डेमो बिना फ़्रेमवर्क के सादे JavaScript और CSS में लिखा गया है और esbuild से relative URL वाले एक स्टैटिक फ़ोल्डर में बनाया गया है, इसलिए यह किसी भी पाथ से चलता है; पोर्टफ़ोलियो पर यह /demos/hourline/ पर है। मेहमान वाला हिस्सा पहले लोड होता है और स्टूडियो वाला हिस्सा अलग फ़ाइल में आता है। एक ही स्टोर दोनों हिस्सों का डेटा रखता है और उसे localStorage में सहेजता है, इसलिए मेहमान की बुकिंग तुरंत स्टूडियो के कैलेंडर में आ जाती है, और ब्राउज़र के storage इवेंट के ज़रिए किसी भी दूसरे खुले टैब में भी। डेटा हर विज़िटर के लिए बनता है: हर स्टूडियो का क्लाइंट बेस, आठ हफ़्ते का इतिहास और चार हफ़्ते आगे की बुकिंग, जो प्रोडक्ट के उन्हीं उपलब्धता नियमों से बनी हैं, इसलिए कैलेंडर भरा हुआ और सुसंगत खुलता है।

उपलब्धता का एक ही इंजन प्रोडक्ट के हर सवाल का जवाब देता है: क्या यह विशेषज्ञ इस दिन के इस मिनट पर यह सर्विस ले सकता है, उसके साप्ताहिक घंटों और ब्रेक, चालू बुकिंग, हर अपॉइंटमेंट के बाद के बफ़र, न्यूनतम अग्रिम समय और बुकिंग की सीमा को देखते हुए, स्टूडियो के टाइम ज़ोन में। मेहमान के स्लॉट, सुझाव, दो लोगों वाली जोड़ियाँ, रीशेड्यूल, स्टूडियो का ड्रैग-एंड-ड्रॉप और ख़ाली समय की खोज, सब उसी से पूछते हैं। डिज़ाइन में क्रीम और पत्थर जैसे रंग और बैंगनी (aubergine) एक्सेंट हैं, हेडिंग के लिए Cormorant और टेक्स्ट के लिए Manrope, दोनों अपने सर्वर से; कम मोशन चाहने वाले विज़िटर के लिए स्प्रिंग एनिमेशन और इंट्रो तुरंत बदलाव में बदल जाते हैं। पूरा इंटरफ़ेस अंग्रेज़ी और रूसी में है।

अभी tarasovvitalii.com/demos/hourline/ पर एक काम करता कॉन्सेप्ट मौजूद है, सात व्यू के साथ: दो मेहमान के लिए और पाँच स्टूडियो के लिए। 28 सितंबर 2026 को हमने इसे एक MacBook पर headless Chrome में मापा, डेमो की घड़ी को 1 अक्टूबर, 15:40 पर रोककर: 390 px चौड़ी फ़ोन स्क्रीन पर स्क्रिप्ट से की गई बुकिंग ने, हर टैप के बाद 0.9 सेकंड रुकते हुए, डेमो की अपनी स्टॉपवॉच पर पहले टैप से पुष्टि तक 6 सेकंड लिए (14 रन का माध्यिका मान, 6 से 16 सेकंड)। एक टैब में की गई बुकिंग दूसरे टैब में खुले स्टूडियो कैलेंडर में दिखी, और Settings में बदली गई क़ीमत बुकिंग पेज तक पहुँची।

पेज के भीतर एक स्वतंत्र brute-force जाँच ने उन सभी 658 समयों को दोबारा परखा जो इंजन ने तीन स्टूडियो और नौ सर्विस के लिए दस दिनों में पेश किए थे — घंटों, ब्रेक, बफ़र सहित बुकिंग, न्यूनतम अग्रिम समय और टाइम ज़ोन के आने-जाने के हिसाब के मुक़ाबले: एक भी ग़लत स्लॉट नहीं, कोई दोहरी बुकिंग नहीं और कोई बफ़र नहीं टूटा; घड़ी को 25 अक्टूबर को लंदन के विंटर टाइम में जाने के पार ले जाकर दोहराई गई उसी जाँच में भी कुछ नहीं मिला। पूरा JavaScript और CSS gzip में 95 KB का है। Lighthouse 13.5 ने लाइव पते पर, हर डिवाइस के लिए पाँच रन में (माध्यिका, 3–9 के लोड एवरेज वाले MacBook पर), मोबाइल पर परफ़ॉर्मेंस 94 और डेस्कटॉप पर 100 दिए, सुलभता और बेहतरीन तरीक़े 100; लोड होते समय पेज 0.2 MB ट्रांसफ़र करता है।

HOURLINE एक कॉन्सेप्ट है जिसे VITON¹³ ने अपनी रेंज दिखाने के लिए बनाया, किसी क्लाइंट के ऑर्डर पर नहीं। Maison Hourline, उसके स्टूडियो, विशेषज्ञ, क्लाइंट, क़ीमतें और बुकिंग काल्पनिक हैं और विज़िटर के ब्राउज़र में बनते हैं: कोई क्लाइंट, उपयोगकर्ता, असली बुकिंग, ट्रैफ़िक या रेवेन्यू नहीं है, और डेमो में कुछ भी बिकाऊ नहीं है। रिमाइंडर, डिपॉज़िट के अनुरोध, वेटलिस्ट के ऑफ़र और उनके जवाब सिम्युलेट किए गए हैं; कोई संदेश, भुगतान या निजी डेटा ब्राउज़र से बाहर नहीं जाता।

डेमो AI ब्राउज़र में चलने वाले नियम और आँकड़े हैं, कोई लैंग्वेज मॉडल नहीं, और यह गढ़े हुए इतिहास से सीखता है, इसलिए असली नो-शो की भविष्यवाणी के बारे में कुछ साबित नहीं करता। 6 सेकंड एक तय रफ़्तार से टैप करने वाली स्क्रिप्ट से आए हैं, लोगों से नहीं, और कोई यूज़र टेस्टिंग नहीं हुई। हर आँकड़ा एक ही मशीन पर, एक ही दिन, headless Chrome में किया गया लैब माप है, और Lighthouse लाइव पते पर सिम्युलेटेड फ़ोन के साथ चला, असली डिवाइस पर नहीं। असली प्रोडक्ट को अभी भी स्लॉट लॉकिंग वाला सर्वर, भुगतान, असली रिमाइंडर, अकाउंट और डेटा सुरक्षा चाहिए होगी।

वेब स्टूडियो का पोर्टफोलियो कैसे जाँचें →