पूर्ण-स्टैक URL संक्षिप्तीकरण सेवा निर्माण

## 🚀 URL शॉर्टनिंग सेवा - फुल-स्टैक एप्लिकेशन ### 📋 प्रोजेक्ट अवलोकन एक प्रोडक्शन-रेडी, फुल-स्टैक URL शॉर्टनिंग सेवा बनाएं जिसमें आधुनिक, सुलभ फ्रंटएंड और मजबूत RESTful बैकएंड API हो। एप्लिकेशन को शॉर्ट लिंक के पूरे जीवनचक्र को संभालना होगा: निर्माण, रीडायरेक्शन, ट्रैकिंग, प्रबंधन और समाप्ति। सभी डिवाइसों पर प्रदर्शन, सुरक्षा और असाधारण उपयोगकर्ता अनुभव को प्राथमिकता दें। --- ### 🛠️ टेक स्टैक **फ्रंटएंड:** - एक्सेसिबिलिटी के लिए ARIA एट्रिब्यूट्स के साथ सिमेंटिक HTML5 (WCAG 2.1 AA अनुपालन) - CSS कस्टम प्रॉपर्टीज (वेरिएबल्स), Flexbox और CSS Grid के साथ CSS3 - मॉड्यूलर आर्किटेक्चर (ES Modules) का उपयोग करते हुए वैनिला JavaScript (ES2022+) - कोई भारी फ्रेमवर्क नहीं - बंडल को हल्का और तेज़ रखें **बैकएंड API:** - OpenAPI 3.0 स्पेसिफिकेशन के अनुसार RESTful API डिज़ाइन - उचित HTTP स्टेटस कोड के साथ JSON अनुरोध/प्रतिक्रिया प्रारूप - क्रॉस-ओरिजिन अनुरोधों के लिए CORS कॉन्फ़िगरेशन - प्रति IP और प्रति API कुंजी रेट लिमिटिंग **लाइब्रेरीज़ (CDN या बंडल):** - QR कोड जनरेशन (जैसे, `qrcode.js` या `qr-creator`) - एनालिटिक्स के लिए चार्टिंग लाइब्रेरी (जैसे, Chart.js या हल्का विकल्प) - समाप्ति के लिए डेट पिकर (जैसे, `flatpickr`) - टोस्ट नोटिफिकेशन सिस्टम (कस्टम-निर्मित, बिना निर्भरता) --- ### 🎨 फ्रंटएंड - UI/UX आवश्यकताएँ **लेआउट और डिज़ाइन:** - स्वच्छ, न्यूनतम डिज़ाइन जिसमें पेज के केंद्र में **बड़ा, प्रमुख URL इनपुट फ़ील्ड** वाला हीरो सेक्शन हो - सिस्टम प्रेफरेंस डिटेक्शन (`prefers-color-scheme`) और `localStorage` पर्सिस्टेंस के साथ **डार्क/लाइट मोड टॉगल** लागू करें - सुसंगत डिज़ाइन सिस्टम का उपयोग करें: टाइपोग्राफी स्केल, स्पेसिंग टोकन, कलर पैलेट - सभी इंटरैक्टिव तत्वों के लिए स्मूद माइक्रो-एनिमेशन और ट्रांज़िशन (फेड-इन, स्लाइड-अप, बटन रिपल) - एसिंक्रोनस कंटेंट (एनालिटिक्स, हिस्ट्री टेबल) के लिए स्केलेटन लोडिंग स्टेट्स **रेस्पॉन्सिव डिज़ाइन:** - 480px, 768px, 1024px और 1440px पर ब्रेकपॉइंट्स के साथ मोबाइल-फर्स्ट दृष्टिकोण - टच-फ्रेंडली टैप टार्गेट्स (न्यूनतम 44×44px) - मोबाइल पर कोलैप्सिबल नेविगेशन मेनू (एनिमेशन के साथ हैमबर्गर मेनू) - `clamp()` का उपयोग करके फ्लूइड टाइपोग्राफी **एक्सेसिबिलिटी:** - पूर्ण कीबोर्ड नेविगेशन सपोर्ट (टैब ऑर्डर, मोडल्स में फोकस ट्रैपिंग) - डायनामिक कंटेंट के लिए स्क्रीन रीडर घोषणाएँ (`aria-live` क्षेत्र) - सभी इंटरैक्टिव तत्वों पर दृश्यमान फोकस इंडिकेटर - पर्याप्त कलर कंट्रास्ट अनुपात (टेक्स्ट के लिए न्यूनतम 4.5:1) - रिड्यूस्ड मोशन सपोर्ट (`prefers-reduced-motion`) --- ### ⚙️ मुख्य विशेषताएँ #### 1. URL शॉर्टनिंग इंजन - प्लेसहोल्डर टेक्स्ट और रीयल-टाइम वैलिडेशन फीडबैक के साथ प्रमुख इनपुट फ़ील्ड - **URL वैलिडेशन**: वैध प्रोटोकॉल (`http://`, `https://`), उचित डोमेन संरचना की जाँच करें, और रेगेक्स और `URL` कंस्ट्रक्टर API दोनों का उपयोग करके गलत URL को अस्वीकार करें - **URL सैनिटाइज़ेशन**: ट्रैकिंग पैरामीटर (UTM, fbclid, gclid) हटाएं, अनावश्यक स्लैश हटाएं, प्रोटोकॉल और केस को सामान्य करें - यदि कोई प्रोटोकॉल प्रदान नहीं किया गया है तो स्वचालित रूप से `https://` जोड़ें - सफलता एनिमेशन के साथ निर्माण के तुरंत बाद शॉर्टन किया गया URL प्रदर्शित करें - **बल्क URL शॉर्टनिंग**: उपयोगकर्ताओं को कई URL पेस्ट करने दें (प्रति पंक्ति एक) और उन सभी को एक साथ शॉर्ट करें #### 2. कस्टम एलियास सपोर्ट - वैकल्पिक कस्टम एलियास फ़ील्ड (जैसे, `short.ly/my-brand`) - टाइप करते समय रीयल-टाइम उपलब्धता जाँच (डीबाउंस्ड API कॉल, 300ms) - एलियास वैलिडेशन नियम: केवल अल्फ़ान्यूमेरिक, हाइफ़न, अंडरस्कोर; 3-30 अक्षर; आरक्षित शब्द ब्लैकलिस्ट (जैसे, `admin`, `api`, `login`, `static`) - एलियास लिया गया या अमान्य होने पर स्पष्ट त्रुटि संदेश #### 3. QR कोड जनरेशन - निर्माण पर हर शॉर्टन किए गए URL के लिए स्वचालित रूप से QR कोड जनरेट करें - QR कोड मोडल/पैनल जिसमें विकल्प हों: - PNG के रूप में डाउनलोड करें (हाई रेज़ोल्यूशन, 1024×1024) - SVG के रूप में डाउनलोड करें (वेक्टर, स्केलेबल) - फोरग्राउंड/बैकग्राउंड रंग कस्टमाइज़ करें - केंद्र में छोटा लोगो ओवरले जोड़ें (वैकल्पिक) - सुनिश्चित करें कि QR कोड पूर्ण शॉर्टन किए गए URL को एनकोड करते हैं और छोटे आकारों पर स्कैन करने योग्य हैं #### 4. क्लिक ट्रैकिंग और एनालिटिक्स डैशबोर्ड - प्रत्येक रीडायरेक्ट को निम्नलिखित डेटा पॉइंट्स के साथ ट्रैक करें: - टाइमस्टैम्प (UTC) - देश और शहर (IP जियोलोकेशन API के माध्यम से) - डिवाइस प्रकार (मोबाइल, टैबलेट, डेस्कटॉप) - ऑपरेटिंग सिस्टम और ब्राउज़र (User-Agent पार्सिंग के माध्यम से) - रेफरर URL - अद्वितीय बनाम रिटर्निंग विज़िटर (कुकी/फिंगरप्रिंट के माध्यम से) - **प्रति लिंक एनालिटिक्स डैशबोर्ड** जिसमें शामिल हैं: - कुल क्लिक और अद्वितीय क्लिक काउंटर - समय के साथ क्लिक लाइन चार्ट (फ़िल्टर करने योग्य: पिछले 24 घंटे, 7 दिन, 30 दिन, 90 दिन, सभी समय) - भौगोलिक वितरण मानचित्र या बार चार्ट (शीर्ष 10 देश) - डिवाइस/OS/ब्राउज़र ब्रेकडाउन (डोनट या पाई चार्ट) - शीर्ष रेफरर्स टेबल - सप्ताह के दिन और दिन के घंटे के अनुसार क्लिक हीटमैप - मुख्य डैशबोर्ड पर समग्र एनालिटिक्स अवलोकन (कुल लिंक, कुल क्लिक, सबसे लोकप्रिय लिंक) #### 5. लिंक समाप्ति - लिंक बनाते समय वैकल्पिक समाप्ति दिनांक/समय पिकर - प्रीसेट सपोर्ट करें: 1 घंटा, 24 घंटे, 7 दिन, 30 दिन, कस्टम दिनांक - सक्रिय लिंक पर काउंटडाउन या "X में समाप्त होता है" बैज प्रदर्शित करें - समाप्त लिंक को स्वचालित रूप से निष्क्रिय करें और रीडायरेक्ट प्रयासों पर मैत्रीपूर्ण "यह लिंक समाप्त हो गया है" पेज दिखाएं - उपयोगकर्ताओं को मौजूदा लिंक पर समाप्ति बढ़ाने या हटाने की अनुमति दें #### 6. पासवर्ड सुरक्षा - लिंक बनाते समय वैकल्पिक पासवर्ड टॉगल - सक्षम होने पर, टार्गेट URL पर रीडायरेक्ट करने से पहले पासवर्ड इनपुट गेट पेज दिखाएं - सर्वर-साइड bcrypt या Argon2 का उपयोग करके पासवर्ड हैश करें (प्लेनटेक्स्ट कभी स्टोर न करें) - पासवर्ड प्रयासों को रेट-लिमिट करें (प्रति IP प्रति मिनट अधिकतम 5) लॉकआउट संदेश के साथ - हिस्ट्री व्यू में पासवर्ड-सुरक्षित लिंक पर विज़ुअल इंडिकेटर (लॉक आइकन 🔒) #### 7. क्लिपबोर्ड पर कॉपी करें - हर शॉर्टन किए गए URL के बगल में वन-क्लिक कॉपी बटन - `document.execCommand('copy')` के फॉलबैक के साथ Clipboard API (`navigator.clipboard.writeText()`) का उपयोग करें - विज़ुअल पुष्टि: बटन आइकन चेकमार्क ✅ में बदल जाता है जिसमें "कॉपी हो गया!" टूलटिप/टोस्ट होता है जो 2 सेकंड के बाद स्वचालित रूप से बंद हो जाता है - कीबोर्ड शॉर्टकट सपोर्ट (जैसे, सबसे हाल ही में बनाए गए लिंक को कॉपी करने के लिए `Ctrl+Shift+C`) #### 8. URL हिस्ट्री और प्रबंधन - सभी शॉर्टन किए गए URL की पर्सिस्टेंट हिस्ट्री टेबल/ग्रिड (मेहमानों के लिए `localStorage` में संग्रहीत, प्रमाणित उपयोगकर्ताओं के लिए डेटाबेस में) - प्रत्येक प्रविष्टि प्रदर्शित करती है: मूल URL (टूलटिप के साथ ट्रंकेटेड), शॉर्ट URL, निर्माण दिनांक, क्लिक गिनती, स्थिति (सक्रिय/समाप्त/पासवर्ड-सुरक्षित), और एक्शन बटन - **खोज**: मूल URL, एलियास और टैग में फुल-टेक्स्ट खोज - **फ़िल्टरिंग**: स्थिति (सक्रिय, समाप्त, सुरक्षित), दिनांक सीमा, क्लिक गिनती सीमा और टैग द्वारा - **सॉर्टिंग**: निर्माण दिनांक, क्लिक गिनती, वर्णानुक्रम (आरोही/अवरोही) द्वारा - बड़ी हिस्ट्री के लिए पेजिनेशन या इनफिनिट स्क्रॉल (प्रति पेज 25 आइटम) - **बल्क एक्शन**: डिलीट, डिसेबल या CSV/JSON के रूप में एक्सपोर्ट करने के लिए कई लिंक चुनें - **टैग/लेबल**: उपयोगकर्ताओं को लिंक व्यवस्थित करने के लिए कस्टम टैग जोड़ने दें (जैसे, "मार्केटिंग", "सोशल", "कैम्पेन-q4") --- ### 🔒 सुरक्षा आवश्यकताएँ - XSS हमलों को रोकने के लिए क्लाइंट और सर्वर दोनों पर इनपुट सैनिटाइज़ेशन - सभी स्टेट-बदलने वाले API एंडपॉइंट्स पर CSRF सुरक्षा - ओपन रीडायरेक्ट कमजोरियों को रोकने के लिए रीडायरेक्ट टार्गेट्स को वैलिडेट और सैनिटाइज़ करें (अनुमत प्रोटोकॉल व्हाइटलिस्ट करें, `javascript:`, `data:`, `file:` स्कीम ब्लॉक करें) - Content Security Policy (CSP) हेडर लागू करें - रेट लिमिटिंग: प्रति IP प्रति मिनट अधिकतम 20 लिंक निर्माण; प्रति मिनट अधिकतम 100 API अनुरोध - सुरक्षित HTTP हेडर: `X-Content-Type-Options`, `X-Frame-Options`, `Strict-Transport-Security` - आंतरिक ID कभी एक्सपोज़ न करें; सार्वजनिक लिंक पहचानकर्ताओं के लिए nanoid या UUID का उपयोग करें --- ### ⚡ प्रदर्शन आवश्यकताएँ - Lighthouse स्कोर लक्ष्य: प्रदर्शन >90, एक्सेसिबिलिटी >95, सर्वोत्तम अभ्यास >95, SEO >90 - एनालिटिक्स चार्ट और गैर-महत्वपूर्ण एसेट्स को लेज़ी-लोड करें - सभी खोज और वैलिडेशन इनपुट को डीबाउंस करें - स्क्रॉल-आधारित एनिमेशन और लेज़ी लोडिंग के लिए `IntersectionObserver` का उपयोग करें - रीफ्लो और रीपेंट कम करें; एनिमेशन के लिए CSS `transform` और `opacity` का उपयोग करें - जहाँ उचित हो API प्रतिक्रियाएँ कैश करें (जैसे, 60s TTL के साथ एनालिटिक्स डेटा) - रीडायरेक्ट सर्वर-साइड 100ms से कम में हल होने चाहिए --- ### 🧪 त्रुटि हैंडलिंग और एज केस - निम्न के लिए सुंदर त्रुटि संदेश: नेटवर्क विफलताएँ, API टाइमआउट, अमान्य URL, डुप्लिकेट एलियास, सर्वर त्रुटियाँ (500), रेट लिमिट पार (429) - ऑफलाइन डिटेक्शन: कनेक्टिविटी खोने पर बैनर दिखाएं और रीट्राई के लिए एक्शन क्यू करें - लेआउट को तोड़े बिना अत्यधिक लंबे URL (2048 अक्षरों तक) संभालें - यूनिकोड/अंतर्राष्ट्रीयकृत डोमेन नाम (IDN) सही ढंग से संभालें - जब उपयोगकर्ता के पास कोई लिंक या एनालिटिक्स डेटा न हो तो खाली स्टेट इलस्ट्रेशन --- ### 📦 डिलीवरेबल्स 1. स्पष्ट फ़ोल्डर संरचना के साथ पूर्ण, अच्छी तरह से टिप्पणी किया गया सोर्स कोड 2. सेटअप निर्देशों, API दस्तावेज़ीकरण और फीचर सूची के साथ `README.md` 3. API एंडपॉइंट संदर्भ तालिका (विधि, पथ, पैरामीटर, प्रतिक्रिया प्रारूप) 4. तत्काल पूर्वावलोकन के लिए पूर्व-लोडेड नमूना डेटा के साथ `demo` मोड 5. Chrome, Firefox, Safari और Edge (नवीनतम 2 संस्करण) में रेस्पॉन्सिव --- > **नोट:** इसे वृद्धिशील रूप से बनाएं - कोर शॉर्टनिंग फ्लो (इनपुट → वैलिडेट → शॉर्ट करें → प्रदर्शित करें → कॉपी करें) से शुरू करें, फिर QR कोड, एनालिटिक्स, कस्टम एलियास, समाप्ति, पासवर्ड सुरक्षा और पूर्ण हिस्ट्री डैशबोर्ड जोड़ें। सुनिश्चित करें कि अगले पर जाने से पहले प्रत्येक फीचर पूरी तरह कार्यात्मक और परीक्षण किया गया है।