System Design, System Design, System Design DSA के बाद सबसे ज़्यादा पूछे जाने वाला टॉपिक होता है System Design आपको इंटरव्यू में जब भी आपको इंटरव्यू की कोल आती है उसमें एक राउंड होता है जिसको हम बोलते है System Design आज हम बात करने वाले कैसा आप System Design बना सकते हो किसी e-learning platform का जैसे कि Udemy यह question में सब पूछा गया था एक MNC में जिसका नाम में विश्वी नहीं ले सकता हूँ तो आज की वीडियो में मैं आपको बताने वालों कैसे आप एक system design मना सकते हो e-learning platform का मैंने पहले से सब कुछ प्रिपेयर करके रखे क्योंकि अगर मैं खुद से अ लिखूंगा या फिर सामने आपको सिस्टम डिजाइन बनाकर दिखाऊंगा तो काफी टाइम लग जाएगा आपका टाइम हमारा टाइम बचाते हुए मैंने सब कुछ पहले से प्रिपर कर लिया है आप इस वीडियो को आगे तभी बढ़ी है कि आपने यह वीडियो स्क्रीन पर और कंप्यूटर स्क्रीन पर आपको दिखा रहा है कि अगर आप पिछली वीडियो देखा या को पता हो दोनों क्या होते है फिर भी एक थोड़ा थोड़ा वर्वी मैं बीज में देता रहूंगा ठीक है तो आज की प्रॉब्लम को ऐसा समझते है आपको एक ई लर्निंग प्लेटफॉर्म मनाना है उसका फ्रंटेन मनाना है वह कैसे बनाना है आपको इस पर है ठीक है अब यह लिखकर बताना है जब हम रियल्स जॉब करते हैं जब रियल काम करते हैं तो वहां पर क्या साथ कोलेबरेट करना होता है सीनियल लेवल पर जूनियल लेवल पर हर जगह कोलेबरेट करना होता है तो सबसे आइडियास लेते हैं मान लेते हैं मेरे दिमाग में जो आईडिया है एक तरीका हुए मैं उसको बोलूं सबको समझाओ वह एक तरीका है अपना पूरा का पूरा दिमाग इसके अंदर उतारना है कि क्या है अपने प्लेटफॉर्म के लिए ठीक है तो सबसे पहला आपको कुछ होगा सब आपको कोई सिस्टम डिजाइन बनाना होगा एक ऐसा प्लेटफॉर्म मिलेगा जैसे यहां पर आपको रोड आयो है यहां पर आप कुछ भी कर सकते हो मोकअप बना सकते हो लिख सकते हो ऐसे मोटा-मोटा सब कुछ कर सकते हमें एप को बनाने के लिए जरूरी है ठीक है मतलब मोटा-मोटा भी समझे यूडेबी पर होता क्या है इन लेंडिंग सकते हैं कोर्स को देख भी सकते हैं कोर्स को ले भी सकते हैं उसमें सर्टिफिकेट भी मिल सकता है तो यह सब चीज होते हैं फंक्शनल रिक्वारमेंट फंक्शनल रिक्वारमेंट पहले से बिजनेस टीम की तरफ से आती है बट जब भी आप इंटरव्यू में जाओगे वह आपसे जो सच भी कर सकता है कोर्स को यह भी सही है मतलब अगर वह सर्च नहीं करेगा तो उसको एक्जेक्ट कोस्ट कहां से मिलेगा तो नेक्स्ट आता है यूजर कैंट्स इडेबल ऑफ कंटेंट ऑफ द कोर्स अब देखिए एक कोर्स का मतलब यह तो एक और पर गो थ्रू कर लेते हैं तो यू कैन सी कोर्स कैटेग्री वाइज जैसे को कोई कोडिंग के कोर्सिस हो गए कोई हमारे पब्लिक स्पीकिंग के कोर्सिस हो गए तो ऐसे से अलग-अलग कोर्सिस हमारे पास रहते हैं ठीक है कोशिट के रेटिंग भी देख सकते हैं मोबाइल से तो एक्सिस कर दी सकते हैं रिस्पोंसिव चाहिए मटीलिंग्वर सपोर्ट होना चाहिए यह इसके इससे मेरा क्या मतलब है मान लेते हैं आज मैं यहां पर चाहिए मटी लिंग सपोर्ट कैसे करते हैं उसके लिए हम यूज करते हैं इंटरनेशनलाइजेशन जो हम यहां पर लिख सकते हैं नोन फक्शनल रिक्वायरमेंट में कि यूज आई 18 इसकी शोर्ट फॉर्म होती है इतनी लभी स्पैंडिंग कि हम लेजी लोनिंग कर सकते हैं कोर्स को देखिए बैक एंड हमें भेजेगा कम से कम सो दो सो ऐसे कोर्सीज ना जाना इतने नहीं भेजेगा 10 20 कोर्स वगैरह भेजेगा ठीक है और बाकी जो नीचे कोर्स वगैरह होंगे जो स्क्रीन के बाहर कोर्स होंगे वह लोड करने स्टार्टिंग में नहीं है क्यों लोड कराने बाद लोड करा लेंगे कुछ समझ में जाना यह से हमारे नेटरोक को लगा जाती है डिपाउंसिंग फॉर सर्च बॉक्स यह बिसिकली यह कहता है कि जब भी मैं मैं सारे स्पाक्षनों को तो वह जैसे में स्टोप करूं लिखना तभी सर्च हो उससे पहले वह सर्च ना हो ठीक है तो ठीक है इतना इतना मोटा-मोटा हमारे पास आता है तो हमारे जब भी इंटरव्यू में होता है हम सबसे वेले फंक्शनल लिखते हैं फिर हम दिखाते हैं यूआई मोकप बेसिकली हमारा यूआई कैसा दिखेगा हमारा यूजर इंटरफेज कैसे दिखेगा तो मैं नीचे जाता हूं मैंने यहां पर यूजर इंटरफेज दो पेज का बना दो का बनाया है एक है होम पेज एक होता है कोर्स बेस ठीक है तो उसके नीचे हम एक सर्च बार लाएंगे सर्च बार किसली है जिससे कोर्स सर्च कर सके यूजर ठीक है यहां पर एक यूजर का आइकन है बेसिकली यूजर की प्रोफाइल माय अकाउंट वगैरह सेटिंग्स वगैरह खोलने के लिए कोई मानने नहीं काफी सारी category दिखाओगे तो हमने category दिखा दी trending एक हमने दिखा दी best seller मतलब जो जब सबसे ज्यादा बिखते है वो यह रहे और जो trending में चल रहे आज कल courses वो यह रहे ठीक है अब इसमें क्या होगा इसमें हमने एक crousal दिया है crousal के अंदर एक एक एक ये card हो गया एक एक एक कि सिवाल पर क्लिक करते हैं अलग पेज पर डिडाइट हो जाएगा जहां पर इसको सारे इसी की ट्रेंडिंग के कोर्सेस दिखेंगे ट्रेंडिंग कैटेगरी के कोर्सेस दिखेंगे अब अगर वह कोशिश पर क्लिक करेगा कोशिश पर क्लिक करते पर वीडियो को प्ले कर सकता है कोशिश की वहां से वह बाय कर सकता है टू कार्ट करके और उसका प्राइस दिख अब यहां पर आता है टेबल ऑफ क्वेंटेंट तो सिंपल सिंपल हमने यह क्या बताया है अगर आप रियक्ट यूज करते हो अपने रियक्ट में देखोगा कंपोनेंट होते हैं कंपोनेंट क्या होते हैं बेसिकली हमें इस क्रिन पर छोटा-छोटा जो पार्ट रखना ना स्कूल कंपोनेंट पूर्ट है तो वह यह है हेडर हमारे कंपोनेंट हो गया सच बारे कंपोनेंट हो गया यह हमारे जो कार्ड है यह तीन यह चारों को मिलाकर कंपोनेंट होगा और ऐसे हमारा ऊपर वाले कंपोनेंट होगा बट तो मैं बताऊंगा कैसे समझ माएगा हम थोड़ा नीचे जाते हैं अब हम दिखाएंगे आर्किटेक्चर हमारी एप का तो यह पूरे हमारी हो गई एप डोट जीएस ठीक है तो उसका हमने नाम दे दिया एप उसके अंदर हमने रेंडर करा है हेडर फूटर हमने रेंडर करा दिया हेडर फूटर ठीक है अब होम पेज पर अगर हम तो हमने रेंडर कराया होम पेज ऐसा ही समझिए है देखिए ऊपर जाता हूं सर्च बार है सच बार में मैं कुछ लिखना होगा अ जैसे मैंने लिखा है react तो नीचे कई फी सारे options आ जाएंगे नीचे की साइड की हाँ आपको react 19 का course चाहिए react 18 का चाहिए उस पे जैसे click करोगे search bar में वो text आ जाएगा फिर आप search कर सकते हो enter click करके ठीक है उसको बोलते है auto suggestion auto suggestion के अंदर हमने search bar लिखा है क्योंकि auto suggestion search bar render कराएगा इस search bar में जो भी value होगी उसकी value की मदद से वो नीचे list दिखाएगा सारी की सारी ठीक है simple है और इसके बाद हमारे पास आता है कि auto suggestion जैसे हमने यहाँ पर render कराया और इसके बाद यह एक list आ जाती है यह देखो आपको दिख रहा होगा UI में repeat हो रहा है UI एक जैसा UI है दोनों का यहाँ भी एक जैसा है यहाँ भी एक जैसा है तो repeat हो रहा है तो इसका भी एक component बना देंगे इसको हम बोलेंगे cards list पूरे को अ नीचे वाली को भी हमने पूरे को बोला cards list तो अगर मैं आपको दिखाओ cards list आ गया card list के अंदर हमारे पास हर एक card का एक हमारे पार कंपोनेंट है तो कार्ड यह हो गया यह पूरा कार्ड यह पूरा कार्ड यह पूरा कार्ड चार कार्ड हो गए नीचे भी ऐसे हमारे चार कार्ड हो गए अब हम इनको अलग-अलग तो नहीं बनाएंगे हम एक ही कंपोनेंट बनाएंगे जो कार्ड बनाएंगे जो कार्ड लिस्ट बना दिया जो सारे कोर्स रेंडर करा देगा कैटेगरी वाइज और फिर उसको हम यहां पर दिखा देंगे सिंपल बहुत सिंपल है आराम से देखिएगा अभी मैं जल्द बाजी में कर रहा हूं तो आपको ऐसा लग सकता है समझ में नहीं आ रहा है वीडियो को वापिस से रिवाइन करके देखेगा आपको समझ माएगा कि यागिर होता क्या है हम इसको कैसे बनाते हैं ठीक है अब देखे आपने ये तो बता दिया कि UI कैसा दिखेगा आपने ये बता दिया कि क्या क्या उसमें functionality होगी आपने ये भी बता दिया कि हाँ हाँ ये ये component आपके बनेंगे ठीक है सब सही है डेटा कहां है जो main data होगा आप courses हमें दिखरे है courses के नाम कहां से आएंगे कि कोशिश में यह जो हमारा स्कूल बटन है यह कहां पर जाकर किस एपिएई को कॉल करेगा तो एपिएई अब आते एपिएई पार्ट पर ठीक है सो नीचे आ गए एपिएई पार्ट पर काफी बड़ा पार्ट है पर समझते हैं कि आपको एपिएई ऐसा लिखनी है तो देखिए ऊपर जाते हैं सबसे पहले अपने क्या चाहिए देखिए द एक हमें चाहिए कॉर्सिस लाने के लिए, एक हमें चाहिए सजेशन लाने के लिए अभी हम कॉर्स पेज को बुल जाते हैं, इतना बड़ा होता भी नहीं है, इतनी देर का इंटरव्यू नहीं होता है कि आप सब कुछ करने लगो, कॉर्स पेज को बुल जाते हैं, ह� दिखाने जैसे यूजर कुछ पर लिखेगा तो उसके हमें एक प्रेजार चाहिए सेगेंड आता है कोर्सेस कोर्सिस के लिए चाहिए हमें साइड कोर्सिस के लिस्ट से यह वह हमें करना है ठीक है तो हॉम पीछे पर हमारे पास जब भी हम पर बार में कुछ दिखें होगी और वैसे ही जैसे होम पेज रेंडर होगा उससे पहले कोर्स के पेट कोल होगी ठीक है तो अब मैं नीचे जाता हूं यह आपको दिखाने के लिए तो यहां देखिए हमने दो एपिएई बनाई है एक होती है सजेशन की सुगेट एपिएई है रेस्ट की एपिएई यूज करेंगे गैट एपिएई सजेशन के लिए उसके अंदर हमने क्वेरी पास कर दिया स्ट्रिंग टाइप की फिर हमें पास स्ट्रिंग का एक एरिया जाएगा सिंपल मतलब आप ऐसे समझिए कि अगर मैंने टाइप किया है रितिक ठीक है तो वहां पर क्या होगा वहां पर स्लेश रजेशन में क्वेरी रितिक चली जाएगी और फिर मेरे पास वापि जो डाटा आएगा वहां पर स्ट्रिंग ऑफ एरेगा क्योंकि वापि समय एक एक टेक्स्ट मिलेगा जो पूरा टेक्स्ट होगा मान लेते मैंने कंप्यूटर लिखा है तो हैं ठीक है सिंपल है और देश एक यह हमारे अधिक से मेन एक पर कोशिश एपिएई पोसिद एपिएई जब भी आप इसको बनाएंगे आपको ध्यान में रखना है है कि ऑप्टिमाइज हो ठीक है हर सिनेरियों आपको लेकर चलना है वर्चुअलाइजेशन पेजीनेशन सबको लेकर चलना है ठीक है तो कोशिश एपिआई में हमने यहां पर बना है कैटेगरी अरे तो आपने ऊपर देखा होगा कोर्स कौन से है काफी सारी कैटेगरी होती है तो हम इसे प्याज में कैटेगरी पर पास कर सकते हैं ठीक है कैटेगरी क्या है कि बेस्ट सेलर ट्रेंडिंग कुछ भी हो सकती है ठीक है उसका पेज नंबर आता है मान लेता है पेजनेशन सपोर्ट करें पर करना है जो अभी हम उसमें नहीं कर रहे हैं जो पर हमारी स्क्रीन है बट अगर हम वर्चुअलाइजेशन करेंगे तो उसमें कर सकते हैं मैं समझाता हूं वर्चुअलाइजेशन क्या होता है देखिए इस क्रीन है हमारी तो यहां पर मान जाते हैं हमें हमें पता है कि मैक्सिमम 10 ही आ सकते हैं ठीक है इस क्रीन के ऊपर इज बड़ी से बड़ी ठीक है हमें 10 कोर्स दे दो जो बेसेलर है टॉप 10 वाले दे दो उसने दे दिया अब यहां होगा जो अब ने नेक्स्ट पर क्लिक करेगा तो हम अगले दस भी तो रेंडर कराने है उसको भी नहीं बुलाएंगे ठीक है अब जैसे ही यूजर यहां पर आएगा यह एरो पर एरो पर क्लिक करेगा तब हम अगले दस को लोड कर देंगे ठीक है समझ रहे हो तो हमेशा ऐसा होगा कि दस का होगा तो मान लेते हैं अभी यहां पर चार दिख रहे हैं चार और आगे हमारे पास है ओलरी है तो लिए शन तो अगर मैं आपको लिखकर दिखाऊं इसको आप पढ़ सकते हैं वर्चुअल आई जेशन वर्चुअल एशन बोलते हैं ठीक है अब नेक्स्ट पढ़ते आ गए गेट कोर्स हमारा हो गया हमने कैटेगरी पास कर दी हमने पेज नंबर पास कर दिया तो जैसे अभी बता रहा था ट्रेंडिंग वाले के लिए क्या कर सकते हैं पेज नंबर पास कर दिया हमने लिमिट पास कर दी साइज की टेन और फिर हमने कैटेगरी पास कर दी ट्रेंडिंग और करंसी में हमें पास करने की अभी यूजर की करंस तो मान लेते हैं है कि जो मैं अगर मैंने कोई कोशिश बनाया है वह मैंने आईएन आर में बनाया है इंडियन नेशनल रुपीज में कोई इसको डोलर में खरीदना चाहता है तो कनवर्जन भी तो करना होगा राइट सो हम क्या करेंगे हम यहां से रिजिन की है ओके सो इस पर क्या होता है गेट कोर्स में हमें कोर्स रिटर्न किया जाता है कोर्स क्या हो चक्त जाता है एक ऑब्जेक्ट हो सकता है ऑब्जेक्ट का एरे हो सकता है बेसिकली ऑब्जेक्ट बतलब ऑब्जेक्ट का एरे हो सकता है अब उस ऑब्जेक्ट में क्या होगा यहां देखिए यह टाइपस्क्रिप्ट आप यूज करिए वैसे हमने मैंने आ गया उसके यूनिक आईडी होगी जिससे हम को एक्सिस कर सके हम उसके रिक्वेस्ट कर सके ठीक है उसके अंदर क्या होगा उसके अंदर नाम भी होगा कोशिश का नाम क्या है रेटिंग होगी अब रेटिंग को मैंने ऐसे लिया है क्योंकि क्योंकि हम यूजर की भी रेटिंग दिखाएंगे कि किस यूजर ने क्या-क्या रेटिंग दी है और कब दी है तो इसलिए मैंने रेटिंग का ऐरे दिया है उसको अब अगर मैं ऊपर जाऊं रेटिंग के ऐरे पर तो आप देखोगे मैंने आप स्टोकर आकर यूजर की बता तो मैं अब यहां से इतना दिखा सकता हूं कि अगर यहां पर यूजर नेम है तो यूजर ने इस यूजर ने रेटिंग करी है पर कमेंट भी ऐड कर सकते ह कि उसने क्या कमेंट लिखा था तो वह स्ट्रिंग टाइप में कर सकते हैं ठीक है अगर स्ट्रिंग नहीं करना है तो स्टीम स्ट्रिंग कर सकते हैं स्टीम स्ट्रिंग बेसिकली अगर उसने कोई बोल्ड टेक्स लिखा है नेक्स लाइन लिखिए उन यह प्राइस जो हमारा दिख रहा है वह बैक एंड्स आएगा हमारा मैनूम मतलब चेंज होकर आएगा जो यूजर को दिखेगा यूएसडी वगैरह में जिसमें दिखाना है और जो नेक्स्ट हमारा ओरिजिनल प्राइस है वह वाला प्राइस होगा जो कोर्स वाले कि वहां पर आपके पास जब टेबल ऑफ कंटेंट है एक कोर्स के अंदर ही काफी सारे सेक्शन है उनकी वीडियो है तो वह सब आपके सेक्शन में आगे सेक्शन में जाकर देखते हैं क्या होता है मेरा हमारा सेक्शन ही बचा या फिर यह पेड़ के लिए अवेलेबल है अगर यह इस प्रीव्यू बूलियन है अगर यह ट्रू हुआ तो वह प्रीव्यू कर सकता है यूजर फ्री में अगर ट्रू नहीं हुआ तो वह यूजर फ्री में नहीं कर सकता उसको उसको खरीद नहीं पड़ेगा टाइटल हो गया सेक्शन का टाइटल क्या है डिस्क्रिप्शन हो गया स्टेमेल स्ट्रिंग वाला बोल्ड टेक्स वगैरह यूएल लेसन बेसिकली हर एक वीडियो को कह रहा हूं मैं वह एक सेक्शन में डिवाइड करती है उसकी कितनी वीडियो होगी उसे एक हर एक वीडियो को हमने लेसन नाम दे दिया लेसन भी कह रहे हो गया तो ऐसे हम ऊपर जाते हैं वापिस देखिए एक ऐसे भी बनता जा रहा है अंदर अंदर है ना तो लेसन में हम यहां पर आ गए अब लेसन क्या होगा लेसन हमारा आईडी तो फिर हमारा मेन वीडियो लिंक आएगा कि वीडियो की लिंक क्या है कहां से हमें वीडियो रेंडर करानी है उसका टाइटल आजाएगा जो हमारा होगा एक स्ट्रिंग टाइप तो टाइटल हमारा होगा एक स्ट्रिंग टाइप सिंपल यह हमने हमारा यहाँ पे क्या कहते है कि बना दी जो कोशिश के लिए थी कम इपनी थी मैं बस क्रोल भी कर देता हूं आप इसको पोस्ट करके देख लीजिए का बाद में मैं कोशिश करूंगा कि अगर किसी तरह में इसके फोटो डाल पाया पूरी तो मैं नीचे अब डेटा फ्लो में आते हैं, तो हम क्या करेंगे, हम जो भी डेटा ला रहे हैं न, देखो हमने कोर्सिस का डेटा लाये हम यहाँ पे, होम पेज पे, अब मान लेते हैं यूजर ने उस डेटा को सर्च किया, ठीक है, सर्च करने के बाद उसके बाद नई API के डेटा आ गया, कि अपने वह यूज किया है और डिडक्स यूज किया है रियक्ट के अंदर तो वह सेंटर स्टोर का काम करता है सारा डाटा जो भी हम रखेंगे वह सेंटर स्टोर में रखेंगे रिक्वेस्ट करेंगे जो भी डेट हम सेंटर स्टोर से करेंगे जिससे हर एक कोर्स का में पता चलता है कि कौन से कौन से कौन से कौन से हम ला सकते हैं मतलब बेसिकली एक जगह डाटा आ गया तो हम यह से रिक्वेस्ट करेंगे यह से में डाटा मिल जाएगा ठीक है सो हां सबने इस पर बात करते जिससे ट्रेंडिंग वगैरह और यह जितनी कैटेगरी के हैं वह में मिल जाए तो कॉर्सेज एपिएई कोल हो गई उसका डाइट हमें पर होम पेज कंपोनेंट में चला गया होम पेज कंपोनेंट ने क्या गया उसने कार्ड कैटेगरी आईडी पास करी ऐसे ही auto suggestion में हमने slash suggestions वाली API कोल करानी है और हमारे पास data आ जाएगा, so यह हमारा हो गया पूरा data flow जो हमने बनाने वाले है, so इतना हमारा data flow था, अब next हमारे पार चोटा सा part बसता है, वो बसता है optimization का, क्या क्या हम ऐसा काम कर सकते हैं, जिसकी मदद से हमारा पार बसता है, पर यह फास्ट हो जाए ठीक है जावास्किप में आते हैं कुछ नहीं होता है सिंपल होता है जावास्किप में क्या कर सकते हैं कोड स्पीट कर सकते हैं कोड स्पीट का क्या मतलब है मतलब जो हमें कोड चाहिए सिर्फ उसको ही हमें इसके ऑप्टिमाइजेशन के लिए जो हम वेब पर वीडियो देखते हैं तो वेब एम हम फॉरमेट का यूज कर सकते हैं वीडियो के लिए वेब पी हम इमेज के लिए यूज कर सकते हैं कि इमेज जब भी रेंडर होगी तो वेब पी फॉरमेट में रेंडर करा सकते है कि आपको अगर मैं अभी यहां पर हूं इंडिया में इंडिया से मेरे पास सर्वर से डाटा आ जाए और अगर आप यूएसेम हो यूएसेसे सर्वर से डाटा आ जाए तो ग्लोबली हमारा सारा डाटा चला जाए इससे लेटेंसिक हम आती है तो जल्दी डाटा आता है जीजी ब्रोटली बेसिकली क्या करता है यह कंप्रेशन होता है जैसे जिप फाइल हो गई हमारी हम फाइल्स को है ओके लास्ट हमारे पास आता है डोम के लिए वर्चुअलाइजेशन हमने बात कर लिए वर्चुअलाइजेशन क्या होता है जो हमें दिखाना है वह रेंडर करेंगे बाकि हम आलएक्स रेंडर करते रहेंगे और रिसोर्स इन क्या होते है बेसिकली हम यहां पर प्रियोड कर सकते हैं कि जो हमें डाटा पहले चाहिए उसको प्रियोड कर लेंगे प्रिकट कर सकते हैं कि हमें पता है किसके वह डीएनएस फेच करना है यह सब जो भी मत बोला हूं इसको आप सच कर लेना डीएनेस हो गया क्या होता है प्रिक्रिएंट क्या होता है तो रिसोर्स इनके बारे में जान लीजिएगा यह बिस्सेली ऑप्टिमाइजेशन में आता है तो अगर आपको इसका बार दिखा दिया है कि आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको आपको उम्मेद करता हूँ आपको यह वीडियो पसंद आया होगी, अगर यह पसंद आया है तो आपको यह वीडियो भी पसंद आया है, जिसमें मैंने आपको बता है इमेज कराउजर के सिस्टम डिजाइन कैसे मनाते हैं, बेसिकली लो लेवल डिजाइन कैसे मनाते हैं, आज के लि