📖 Today’s Class: Building Complete Admin Panel (Frontend UI) 📅 Skillwaala’s Free Full Stack Web Development Course

Name: 📖 Today’s Class: Building Complete Admin Panel (Frontend UI) 📅 Skillwaala’s Free Full Stack Web Development Course
Uploaded: 2025-10-24T06:07:59+00:00
Duration: 55 min 33 s
Channel: skillwaala

skillwaala

2 months ago

🎯 Today’s Learning Outcomes
By the end of this class, students will be able to:
✅ Design a complete Admin Panel layout with sidebar, topbar, and main content area.
✅ Build responsive sidebar navigation with hover and active states.
✅ Create Dashboard overview cards for quick statistics (like Total Products, Orders, and Users).
✅ Add Add Product Page UI with all input fields — name, price, category, image upload, and description.
✅ Use Tailwind CSS Grid & Flexbox utilities to make the layout adaptive across all devices.
✅ Maintain consistent theme and design system across all admin pages.

Category

📚

Learning

Transcript

Display full video transcript

00:00हेलो गाइज गुड इम्निंग एब्रिबन गुड इम्निंग वायाकर डीफा श्रेगल प्रितानिया अर्जुन मारिया कैसे हैं आप सभी लोग उमीद करता हूँ कि आप सब बढ़िया हो

00:22एक बार सब रेस्पोंस कर दो कि मेरी वाइस के लिएर आ रही है बिल्कुल

00:25गुड इम्निंग राजिंद्र

00:41एक टीक है स्क्रीन श्यायर कर देजिए सर ठीक है स्क्रीन भी श्यायर कर देंगे कोई शु नहीं उसमें एंटाइर स्क्रीन मैं आपको श्यायर

00:50कर दो कि स्क्रीन विजीबल है परफेक्टली आज देखो अपन आगे डिसकस करने वाले जितना अपने डिसकस कर लिया था उसी में और अपने में भी युवाई बनाया था अपना

01:21अपने विए स्कूप पर आ जाते हैं जितना अपने कर लिया था पॉसी को देखते हैं नुत अपने पर आपने

01:28एक बार front end को देख लेते हैं कितना complete हो गया जो remaining है वो थोड़ा सा अपन कर देते हैं complete फिर उसके बाद आगे बढ़ेंगे इसमें तो एक बार के लिए इसको run कर लेते हैं अपन सीडी करके किसमें आजाते हैं अपने front end के अंदर आ जाते हैं मैं यहां पर अपने front end में आ जा

01:58ठीक है फाइफन सेवन तरीके पर अपने इसको run कर रहा है और अब आ रहा है कुछ issue क्या issue आ रहा है एक बार चेक कर लेते हैं कुछ ने कुछ issue है इसमें यहां पर आओ अपना जो app.jsx है उसमें देखो कुछ issue है या फिर यहां पर chrome में आके check कर लो inspect कर के console में आओ एक बार

02:28slash admin slash edit product.jsx edit product.jsx में कुछ issue है edit products पर आओ और यहां पर आके check करो क्या issue आ रहा है यह आपने सारी चीज़ें यहां पर ले रखी है edit products आपने यहां पर बना रखा है ठीक है

02:48use navigate आपका आ रहा है slider आ रहा है और slide bar यहां पर बिल्कुल perfect

02:58admin products यहां पर आ रहा है app.jsx edit products आपने यहां पर ले रखा है slash admin slash

03:08फिर से refresh करो एक बार edit product वाला issue है ना इसको एक बार के लिए comment कर दो

03:38अधिक है edit product को एक बार आठाके देख देख देख यहां पर सब्सक्राइए यह अपना front end है यह सर्च बार अपने बना रखा है यह अपने products यहां पर अपने कुश्व हो रहे हैं यह अपना home section है

04:02यह contact वाला है यह अपना कार्ट वाला section आ रहा है और यह अपने पास login है और यह अपना registration है ठीक है

04:09सीम ऐसे ही अपन admin के उपर आ जाते हैं और admin को चेक कर लेते हैं admin में क्या कैश हो आ रहा है वह पन साही कर देते जल्दी से

04:15admin के लिए क्या URL है अपना slash admin slash dashboard ठीक है तो मैं यह hit करवा देता हूं slash admin

04:23और slash dashboard के उपर तो यहां पर आ जाओ और यह hit करवा दो slash admin slash dashboard के उपर ठीक है

04:30परफेक्ट तो यह अपना dashboard है manage products manage products में दिखकत आ रही है manage products में दिखकत आ रही है

04:51slash admin slash admin products ठीक है तो इस पर hit होना चीए और इस पर हीट होने पर अपन क्या दिखा रहे है अपना admin products ठीक है

04:59एड्मिन प्रॉडक्स वाला अपन दिखा रहे मतलब अपना जो Slider है उसको सही कर लेते हैं सिस्टम चेंज उने की वज़े से इशू आ रहा है और अपन इसको सही कर देते के तो

05:07तो slash admin slash admin products यहाँ पर यह हीट होना चीह है और इसके हीट होने पर अपने को किसको दिखाना है अपना manage product दिखाना है लेकिन वो नहीं दिखा रहा हूं

05:20inspect करो console करो और check करो एक बार क्या issue आ रहा है manage product में hit करता हूं slash admin slash admin product

05:31fire edit is not defined अच्छा ठीक है यहाँ पर आओ admin products अपन यहाँ पर दिखा रहे हैं अपना admin products तो यहाँ पर fire edit करके जो आ रहा है यह यहाँ पर define नहीं है तो इसको एक बार import कर लो आँ

05:48पार की series ले रखी है नहीं ले रखी तो जल्दी से एक बार के लिए fire edit को अपन इंपोर्ट कर लेते हैं एक बार set करना पड़ेगा फिर अपन इसको आगे देखते हैं react icons पर आ जाते हैं और कौन साथ आपने पास अपना edit वाला

06:02चीक है तो एडिट एक बार सर्च कर लो और नेट स्लो चल दाए गया अगया

06:20कि एडिट करके अपने पास यहां पर है एडिट अपने बार सर्च कर लेते हैं

06:32कि वाई नहीं दिखाना गया कि एक बार आपस आजाओ स्कुर्ट पर है

06:38कि एडिट करके सर्च कर लो यहां पर और जो अपने ले रखा है वो अपना ये फार एडिट करके हैं इसको अपने बार के लिए इंपोर्ट कर लेते हैं

06:50कर लेते हैं ठीक है वो आइकन से इंपोर्ट नहीं रहें के इसलिए इश्य हो आ रहा है तो फाइडिट को एक बार इंपोर्ट कर लो चेक कर लो यहां पर आ जाओ फिर से रिफ्रेश करा के देख लो अब यह फिल डिलीट यह वाला भी आपको इंपोर्ट करना पड़ेगा त

07:20यह फिल डिलीट वाले को भी तो यह अपना यहां तक का बिल्कुल सही होना चाहिए तो यह अपना डैश्बूर्ड हो गया यह मैनेज प्रोड़क्ट हो गया जिसमें आपको यह प्रोड़क्स दिख रहे है एड़ प्रोड़क्ट पर अपन क्लिक करेंगे तो अपने पास �

07:50चाहिए और एडर ध्रीट अपने कुछ करणा नहीं यहां पर मैनेज प्रोड़क्त प्रोड़क्ट पर चले ठीक है तो यहां पर वहां पर ऑपन की बार चैक करें यह इक बारड़ाय और ने दे रखा है तो

07:56इस edit पर क्लिक करते हैं पर इड

07:58चला जाने चाहिए तो यहाँ फ़ोपन ने बना रखा है

08:01Edit product करके यह अपना प्रेड बना वा है और इस

08:04पर �ृपिर में कोई icons लगे वहे तो वह

08:06बिए अपर इंपोर्ड करод कर लेना यहा पर कोई iq एकश्प

08:08लगे में यह एडिट प्रोडक्ट है तो इसका URL अपन बना देते हैं और जो अपना एड़ीन प्रोडक्ट से वहाँ पर आके बार चेक कर लेते हैं कि क्या आपने दे रखा है तो यहाँ पर

08:18अपना प्रोडक्ट अपन यहाँ पर बोल रहें इस पर हिट होने पर आपको कौन सा दिखाना आपका एडिट वाला कॉंपोनेंट तो यहां पर आ जाओ और एक नए राउट अपन यहाँ पर बना देते हैं इसको हटा दो एक नए राउट बना लो इसमें कुछ इशू आ रह

08:48एडिट प्रोड़क्ट वाला जो कॉंपोनेंट है वो यहाँ पर पास करते हैं ठीक है तो एडिट प्रोड़क्ट वाला कॉंपोनेंट यहाँ पर आपना आ जाना चुछी है परफेक्ट ठीक है यहाँ पर क्लिक करोगे तो आप आ जाना चुछी है एडिट प्रोड़क्ट

09:18Edith products आपने यहां पर लिख नया है

09:25और यह अपना component बनावा है

09:27Edit products करके

09:28ठीक है और इसके अंदर आपने

09:31Use Navigate को ले रखा है

09:33और अपना slide bar

09:35यहां पर लगावा है बिलकुल सही है

09:37उसके अलावा तो

09:39यहां पर कुछ इसा एक्सरा है नहीं

09:41जो इश्यू आ रहा होगा

09:42अधिक प्रोड़क्ट की वेज़े से इश्यू आ रहा है क्या इश्यू आ रहा है आपको पता चल रहा है कुछ इश्यू

09:58अधिक है

10:08अधिक प्रोड़क्ट्स और यहां पर जो आपने लिखा है वह अपने लिखा है एडिक प्रोड़क्ट्स

10:24ठीक है और यहां पर अपने इसको नविगेट करवाया और कुछ नहीं है

10:32और उसके अलावा इसको कहां पर लगा रहा है एड्मिन प्रोड़क्ट के उपर यहां पर आपने टू लगा रहा है इस टू के उपर क्लिक होने पर जाना चाहिए

10:44प्रोड़क्ट प्रोड़क्ट यह रहा आपका और

10:58प्रोड़क्ट प्रोड़क्ट इस एडिट प्रोड़क्ट करो यह आपका एडिट प्रोड़क्ट आ रहा है

11:22प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट प्रोड़क्ट

11:52तो यहाँ पर अपन admin के अंदर ही बना रहे हैं और हो क्या करने वाला है why

12:10कोरी का sequence कर देता हूं हमीशा admin dashboard की copy करते रहे हैं में इप Complet

12:20यह अपने बनाया, इसका नाम यहाँ पर क्या रख दो, query reply, तो मैं यहाँ पर कह दता हूँ, query reply, यहाँ पर अपन इसका name रख देते हैं, और यही सेम name अपन export के time भी रख देते हैं, यही सेम में को रखना है, name query reply, चीक है, यह बात हो गई, फिर उसके बाद आपको यहाँ पर

12:50from आता है, उसके अलाबा subject आता है, की, mail का subject क्या है, और अपने पास क्या आता है? body, और फिर reply का यहाँ बटन होता है, ऐसे तो होता है, mail अगर आप किसी को करते हूँ, तो mail के अंदर यही तो होता है, जिसे मैं यहाँ पर gmail को open करूं घ्यक है, तो जिसे मैं यहाँ यहाँ �

13:20कि अगर आप देखोगे तो किस तरीके से आता है अपना यह बनावा जैसे अपन बात करें इसकी बात करें तो इस तरीके से अपने पास आता है

13:44अपने पास यहां पर अपना यह बनावा है और इसको मैं यहां से हटा देता हूं और इसमें अपन लिख देते हैं

14:07अपने अपने के लिए तो फॉर्म ही दिखाना अपने को रिप्लाई के लिए तो फॉर्म ही अपन यहां पर क्रीट कर लेते हैं

14:35यह बनिसे और सब्सक्राइब और इस यहां पर आपने लेने

14:47तो यहां पर आप क्या देना अपना ठीके लिए अपना यहां पर ले लिया तो यह अपना इंप्त टेक्स्ट आज आगा

15:01तो इसका अपने को आपके ले लेता हो तो इसके बाद?

15:17अपने को इह पर क्या लेना लेना है ये तुसके बाद

15:22एक लेवल व किyty document कृशित है तो यहाँ पर क्या दो है,

15:30और और ने पूस्व क्लीक करने पर अपना क्वेडी एक क्लिक dik

15:51है.

15:58अपना क्योंट रिप्लाय वाला कॉंपोनेंट आना चीह हैं तो सबसे पहले स्कूरे इस्क्रूइवाले कमपनेंट का यूरल बना लो कैसे बना होगे एफ डोट जीए सक्सक्रीप पर आज्योग और इसका यूरल बना लो आप बोलोगे हैं आप लूट फिर आप बोलोगे प

16:28कौन सा component है, जो अपने पास अपना component है, query reply, ये लो query reply मैंने यहाँ पर pass कर दिया,

16:36इसके उपर hit करवाने पर ही भीजना है अपने को, चीक है, तो ये query reply वाला component अपना open हो जाना चाहिए,

16:42कब जब आप अपने query reply का, जो अपना यहाँ पर query वाला जो आपने बनाया है,

16:48admin query करके, इसके उपर जब आप किस button पर click करो, इस reply वाले button के उपर click करो,

16:53चीक है, तो ये आपने सिफ यहाँ पर क्या लिया है, एक button लिया है, टीडी के अंदर,

16:57अब इस button को convert कर दो, यहाँ पर इस button को क्या करो, इसके अंदर अपन लगा देते हैं, वो ही link tag,

17:05तो link tag के अंदर wrap कर देते हैं, इस button को, complete reply वाले button को मैं यहाँ पर इसके अंदर wrap कर देता हूँ,

17:12यह लो, ठीक है, और यहां पर अपन लगा देते हैं अपना two, और two के अंदर अपन यहां पर क्या लगा देंगे अपना,

17:20इस टू के उपर लगा देते हैं अपन आ जाते है अपना जो URL बनाया

17:25admin यही URL है इसको copy कर लो और इसको लगा दो carry reply जो आपने admin

17:32query बनाया है उसके उपर ठीक है तो यहां पर आके उस URL को लगा दो इस पर

17:37तो जैसे मैं इस पर क्लिक कर रहा हूं to from subject body अपने ने पास यहां पर आ रहा है अब इसको जल्दी से अपना कस्टमाइज कर लेते हैं तो यहां पर आ जाओ ये रहा अपना

17:49इसको जल्दी से चेंज कर लो । सब्सक्राइब कर लो

18:01तो फॉर्म लिए पॉर्म के उपर अपने यहां पर डिव लिया है इस डिव पर में लगा देता हूं और इसको लगा क्लास लगा क्या देते

18:11भी करनके से आप इसका क्या कर देना वाइड कर देना दिए अपर आप यहां पर उसको क्या कर देना अपना एक्सल कर

18:28देना प्यड्न आप यहां पर कर देना 6 की ओंड इक्षर रोछाल 새 और में बंड certainly

18:35यहाँ पर itival you by freaking are Random system March

18:54अबहुक्स बन जाना चाहिए यहांपर अपने पास यह एक बॉक्स चेन्ज सेटों रो

19:00shadow sm ना करके अपन यहां पर nd देते एक बार के लिए चीक है तो वह box अपने को दिखाई देगा

19:06इस तरीके से box बन क्या घा?

19:07तू हो गया from हो गया subject हो गया अब यहां पर टू जो अपना label है उस label के लिए अपन यहां पर एक class बना देते है जल्दी से मैं

19:15यहां पर एक class बनाता हूं इस label के लिए ठीक है और सबसे पहले तो मैं यहां पर कहता हूं कि आप label को block कर देना ठीक है उसके अलावा जिसका text है वह आप gray color के अंदर जैसे 700 इसको यहां पर

19:27पास कर देना और font को आप यहां पर क्या कर देना अपना medium कर देना उसके अलावा margin भी देना इसको bottom से वन की चीक है तो यह पहला label अपने पास क्रिएट हो जाएगा टू अपने पास क्रियेट हो गया सेम सब के उपर apply कर दो सेम यहां से क्या कर लो इसको copy कर लो इस label के उपर �

19:57ठीक है to from subject और body अपने पास यहां पर आ गया उसके बाद अपने पास क्या रहा है अपना input आ रहा है तो इस input के उपर भी अपन क्या लगा देते हैं अपनी class लगा देते हैं मैंने यहां पर class लगाई और इस input को अपन यहां पर ready कर लेते हैं तो input को सबसे पहले मैं यहां प

20:27करें ना। भाइय में डू के लगादेना और आप यहां पर अपनी बॉर्डर क्रियेट कर देना और जो बॉर्डर क्रियेट कर रहे हैं इसको इहां पर रांड़ेत भी कर देते हैं तो आप एक काम करो इसको आप

20:51यहां पर round इड़् भी करदेना अपनी इस बॉर्डर को और छीक तो मैंने बोल दीयाbé

20:57round 8 तो वो अपने पास roundних होके कि एगी उसके अलावा अपन जैसे

21:02MD क्षा पाद यह मैं उसके अलावा आपको यहां पर क्या करना है इसके उपर वही रंग वाला

21:10सबस्क्राइब सबक्द्प सब्सक्राइब

21:33वि मैं फ्रीट करणे ना थे ओकष्छा किया अब्सक्राइब

21:37तleness醇 आप fuzzy a pma Revoir जो अपर लगाने वाले हो उसका कलर आप यहाँ पर फट इंदर जाब 600 पे पास कर देड़ा चिक copper तो

21:48यह अपने पास अपना light two do चुछ है सेमॉब इसफी अपने पnot a ppi page कर लेते और सब्ट chasing à

21:56सा कॉपी कर लेता हूं यह पहला इंपूट हो चुका है दूसरा इंपूट अपने पास यह आ रहा है तो दूसरा इंपूट भी अपने पास यह आ

22:04तो इसके औपर भी लगा दो सीम क्लास टीक है फिर अपने पास अपना टेक्स इडिए आ रहा है टेक्स इडिया पर

22:10भी �

22:28यह अपना टेक्स एडिया है इसके बाद ही मैं यहां पर क्या करता हूं

22:32इसके बाद ही मैं यहाँ पर एक बटन ले लेता हूँ

22:35और उस बटन में अपन कहा देते है, reply

22:37ठीक है, इस बटन को भी अपन कस्टमाइज कर लेते है

22:41मैं यहाँ पर इसको एक class दे देता हूँ

22:43और class में अपन इसको कहा देते है

22:45कि इसका जो bg है वो आप यहाँ पर purple कर देना जिसे 500 ठीक है

22:51text जो है वो आप यहाँ पर इसका white कर देना

22:54उसके अलावा इसमें x direction में आप padding लगा दो जिसे 6 की

22:59और y direction के अंदर padding लगा दो इसमें 2 की

23:02आप इसको rounded भी कर देना

23:03मैं यहाँ पर कहता हूं rounded

23:05ठीक है

23:07चेक करें तो देखो यहाँ पर reply का एक button आरा अपने पास इस तरीके से

23:11y direction में जो padding लगाई है

23:14उसको तोड़ी से change कर लो एक बार padding को

23:17मैं यहाँ पर कहता हूं कि आप यहाँ पर

23:19जो px आप करें वो 5 कर देना

23:22और y जो है वो आप यहाँ पर 1 कर देना

23:25ठीक है

23:27बटन चोटा आ रहा है अच्छा रहा है फिर उसके बाद rounded आपने यहाँ पर कर दिया

23:31ठीक है यह अपने कर दिया उसके अलावा जब मैं hover करू तो hover के उपर जो इसका bg है

23:40वो आप purple के अंदर यहाँ पर 700 कर देना

23:45ठीक है और बिदेना चेक करो क्या बटन आ अपके वास इस तरीका सिर्फ दायकर इसको यहां राइट साइड कर दो क्या राइट साइड करते हैं है

23:56दिए तो में कान करते हूं इसको यहाँ पर अपने के इंदर ने अ होतो श've

24:17संटर नहीं अपने को यहाँ पर कहां लेकी जाना था उसको लेफ डाय लेकर डाइट

24:24कर रहे हैं एक पर लगा रखा है यहां ने नुट करने की तो अपने पास तरह इस तरीके से हो रहा है

24:39अपने पास न WürtIt की तो यह भ Teilरी जो आएगी वह सारी यहां पर आएगी डिलीट बीडिलीड रहे हैं रहे हैं कि

24:47और यहां पर भी वह एक बैक वाला बटन लगा दो क्योंकि सब बैक वाला बटन लगा रहा तो यहां पर भी लगा दो जैसे कि इसमें एड्मिन प्रोडक्ट में पर ने लगा रहा है बैक वाला बटन कहां लगा रहा है तो यहीं से उसको काफी कर लो बस यह रहा अपना बट

25:17तो यहां पर किता हुए

25:22चलगर इन टियाम स्वीगाक्र रखाए

25:43नहीं मैंनेज्न क्रोइच के ऊपर आपको नाविगेट करवाना इसी में यहाँ पर आ रहे हैं तो इस पर क्लिक कर Hンナ Quindi

25:53क्रोइव एडमीन क्रोइव की ऊपर तोगö यहाँ पर reply जैसे बेंक्ट पर क्लिक करूँ आ था अपना जीन

26:00यह एक्जिट दे स्टूर यह लोग ऑउट ऊजाना चीए एक रेड़ी तो यह पना डैश्बॉर्ड राड़ी है अपना डिलीट वाला काम आगे करेंगे

26:13add product अपना ready है manage query अपने पास यहाँ पर ready है

26:16और exit the store यहाँ पर exit हो जाएंगे reply करने पर reply कर पाएंगे यहाँ ठीक है

26:21और यही front end अपना यहाँ पर भी ready है

26:24यहाँ पर अपना categories work करना चाहिए search पर search work करना चाहिए

26:27home पर आ रहे हैं अपन contact पर आ रहे है

26:30मतलब query यहाँ पर कोई भी query देता है

26:32तो वो back end में store हो जानी चाहिए query

26:33मतलब वहाँ पर admin को दिख जानी चाहिए

26:35cart में वो जो भी product add करेगा

26:37वो सारे show होने चाहिए और यहाँ पर login और registration करके ही

26:41वो अपने इस dashboard के उपर आना चाहिए

26:43इतना सा काम अपने को यहाँ पर करना है

26:46यहाँ तक की चीज के लिए रहे तो एक बार comment करके बताओ

26:49कि यहाँ तक की चीज के लिए है

27:13झाल

27:43झाल

28:13तो यह तो बात हो गई अपने पास अपने किस चीज की फ्रेंट एंड की अब अपन बैकेंड के उपर भी आने वाले मतलब सबसे पहले आप किसी भी वेबसाइट पर जाते तो सबसे पहला काम क्या करते हो जैसे मालो यह वेबसाइट है

28:37इस वेबसाइट पर मैं आ रहा हूं तो आप यहां पर प्रोड़क्त देखोगे उसको add to cart करोगे सबसे पहले होता है अपना अकाउंट यहां पर रजिस्ट्र करना लॉगिन करोगे अपना पासवर्ट दोगे लॉगिन करोगे अगर अकाउंट नहीं होगा तो वो लेगा कि �

29:07लेना है उसका email लेना है पासवर्ट लेना है और यह database के अंदर अपने को स्टूर करवाना है यह काम अपने को करवाना है फॉर्स्ट काम अपना यह registration वाला काम स्टार्ट करते हैं अब आ जाते हैं सबसे पहले अपने registration के उपर मतलब अपन बैकेंड पर भी जाने वाले और

29:37सबसे पहले अपने पर अपनी वैल्यू को गैट करना है

30:07उसके बाद अपने इसको कहां लेके जाएंगे अपने बैकेंड के उपर अपने पर सबसे पहले फॉर्म को सब्मिट होने से रोकते हो और सब्मिट के बेसे पर यहां पर मैं एक function बनाता हूं जिसको मैं यहां पर कहता हूं

30:30अपने इसके बैसे पर अपना सब्मिट नहीं होगा ठीक है तो यहां पर आ जाओ और यहां पर अपना function क्रिएट कर देते कौन सा है

30:42कर दूसरा है हेंडल फॉर्म नाम का इहां पर ही हंडल फॉर्म सेलना मिने पर ऊदेज़ địंक आप

30:52थ्लिएप

31:01इस नहीं हो रहा है ज्खे पहला काम हो गया दूसरा अपने यहां goddamn

31:06यूज स्टेट की तरू आपके जितनी भी वैल्यूस है उनको गैट कर लो मतलब आपके पास यहां पर फुल नीम आ रहा है आपके पास यहां पर एमेल आ रहा है और आपके पास पासवर आ रहा है तो यूज स्टेट की तरू इस वैल्यू को अपन गैट कर लेता है तो यहां

31:36मैं याँ पर करता हूं कि वो भी क्या है blank का इनिशिली थर्ट इंदर अपने पास क्या है जाती है एक-थर्फ्थ बढऱ् करके ले रहा और एक अपन करिदते है WAS

31:57फंक्शन ठीक है अब अपने को क्या करना है इन वैल्यू को गेट करना है सबसे पहले इनिशल वैल्यू प्रेंट करवा दो कैसे करवाओगे अब यहां पर सबसे पहला अपने को एक फंक्शन बनाना है उस फंक्शन के बेसिस पर यहां पर जो भी वैल्यू चेंज हो रही है �

32:27देंगे जो आपने वहां पर यूज करा है वहां पर क्या यूज करा है FName, Email, Pass टिक है तो यहां पर जो मैं नेम देने वाला हूँ

32:34मैं देने वाला हूँ FName, same name अपने यहां पर assign करेंगे और value के अंदर अपने पास जो भी value आ रही है वह print करवा दो

32:40वो कहां से करवाओगे जो आपका form है उसमें से dot करके क्या निकाल लो अपना f name ले रखा है दूसरा आपने पास हा रहा है email, email के लिए जो आपने नाम दिया है वो ही यहाँ पर लिखना मतलब जो field आपने उसमें दी है अपने object में वही लिखनी है और value अपन यहाँ पर print करात

33:10है वही लिख दो और value के अंदर अपन यहाँ पर क्या करेंगे value के अंदर अपन कह देते हैं कि जो आपका form आ रहा है उसमें से dot करके मैं यहाँ पर क्या निकाल लोगा अपना पास ठीक है अब तीनों value यहाँ पर change होगी तो यहाँ पर अपने को उसको get करना है तो यहाँ प

33:40handle change करके मैं यहाँ पर एक function में अब यह function क्या करेगा यह function अपने जितने भी इंपूट है उनकी value को get करके लाएगा और यहाँ पर जो भी update होगा उसको update करेगा तो सबसे पहले मैं यहाँ पर कहता हूँ अपने set form को बला देता हूँ और set form के अंदर अपन यहाँ पर सबसे �

34:10event को अपने get नहीं किया यहाँ पर event को get कर लोगी कि event के basis पर आता है e.target. उसमें से मैं क्या निकालनों का अपना name यह तो उस object की की हो जाएगी और value क्या होगी जो भी value यहाँ पर target होगी वही value अपन यहाँ पर assign कर देंगे नहीं वाली इतना सा काम अपन यहाँ पर कर रहे

34:40support के अंदर भी हो रहे हैं तो यहाँ पर मैं लगा देता हूं अपना on change और on change में अपना handle change वाला function पर देता है

34:53हैं सिम्ट इसे ही password की बाता रही है तो यहां पर उन चंज अपना फंक्षन लगा letzten तो

35:02जो भी वेलिव जूगी वह अपने पास यहां पर गेट हो जाएगी तो को अपने

35:08हमा पर करते हैं एक बार के लिए ऑपन यह ऊपर प्रेंट कर वा लेते हैं उब में यहां 갈ता हो Systems

35:17और यहाँ पर मैं console करा रहा है तो अपने form नाम के state variable को चेक करें कि आपने पास value आ रही है या नहीं आ रही इंस्पेक्ट करो और इंस्पेक्ट करके एक बार console में आ जाओ और एक बार के लिए इसको refresh कर लो और चेक कर लो आपने यहाँ पर अपना क्या दिया

35:32first name full name दे यहाँ पर आपने अपने email id दे दी यह पर आपने बास word दे दिया चिक है और आपने रजिस्ट्र पे डिक कर हो तो ओए मेल और और अपने इमेल पर यह कर रहा है तो यह स

36:00पर और अपने डेटाबेस के अंदर स्टोर करने कि मतलब उसने रेजिस्ट्रेशन के टाइम जो इमेल पासवर्ड और जो अपना एफ नहीं दिया है वह अपन डेटाबेस में स्टोर कराएंगे और जब वह लॉग इन करने आगा अगर मैच होता है तो अपन उसको लॉग इन

36:30या तो registration करना पड़ेगा account created नहीं है तो मतलब अगर account नहीं बना तो registration करो अगर बना हुआ है आप password भूल चुके तो forget password भी आप कर सकते हो ठीक है तो यह सारी details अपन इसमें add कर देंगे अभी के लिए यह सिर्फ अपने front end पर get करा है यहां तक की चीज के लिए तो एक बार comment कर

37:00झालो झालो यहां वगं परन प्रक्राइब कर देंगे विसका है प्रलंग

37:30अब देखो यह जो आपने वैल्यू गैट करिए इस वैल्यू को अपने को बैकेंड पे लेगे जानी है अब बैकेंड पे कैसे लेगे जाओगे बैकेंड पे ले जाने के लिए अपने को

37:57आपने जो vi.config.jse उसमेए सबसे पहले अपन अपना προक्सी का सेट अप करतेते हैं ठीक है तो यहां पर अपन लगाा रखा देते हैं आपने प्राक्सी का सेट अप मैं कहेंडेता हूँ

38:07Trucker और Server के अंदर आपनो यहां पर क्या पास करते हैं बाखने बार में और बार ने का यहां पर चाहिता हूं

38:26पर चला रहा है तो यह चीज अपने यहां पर पास कर दी तो यह अपने प्रॉक्सी का सेटप कर दिया अपने फ्रेंट के उपर

38:49अब second काम अपने को यहाँ पर क्या करना है?

38:52proxy का setup अपने कर दिया

38:53अब backend पर अपने पास क्या होना चाहिए?

38:55अपना data यहाँ पर frontend से जो भी आ रहा है

38:57वो data अपने पास यहाँ पर आना चाहिए

38:59ठीक है? अब देखो यहाँ पर अपन course का setup भी कर सकते है

39:08जैसे कोर्स होता है फ्रन्टेंड से अगर कोई भी अपने पास रिक्वेस्ट आ रही है उसको बैकेंड के उपर हैंडल करने के लिए कोर्स का सैटप करते हैं वह तब ज्यादा यूज होता है जब आपन जैसे मालो कि मैं इस प्रोजेक्ट को डिपलोई कर रहा हूं और जैसे

39:38आपड़ोड जीए से अपने अपना कोर्स जो पैकेज है वो शायद इंस्टॉल कर रखा है या नहीं कर रहा देख लेते हैं एक नया ट्रेमिनल अपन उपन कर लेते हैं और अपने पैकेंड पर बीडिसकस कर रहे हैं तो मैं यहाँ पर आजाता हूं अपने इसको अपन कर �

40:08जो मेरे पास यहां पर आपना कूसको पैकेज में जो और बंट रिक रिक्वायर कर लिया और उसको यहां कर दो को यहां कर दो सीको अकाारे स щоб जो आशायिस करदेते और किया जो यह पने आपने पर रहते हैं यह आपने इहां पर फमयज से

40:19करके मैं यहां पर कहता हूं सी ओ आरेस यहां पर इसको असा काम रहता है तो यह अब सब जितने भी डॉमेन उन सब के लिए यह

40:40को बाद यह अपना बैकेन को आपने के रं कर बैकेन के रन करनें की कि की आपने as nutritious के अपके van करने के लिए एक अपको आप

41:00किसका रहा है आपके डेटाबेस का अब यहां पर एक बार जो आपका फ्रंट एंड है उसको भी आपको वापस से रन ही करना पड़ेगा क्योंकि आपने प्रॉक्षी का सेट अप करा एंपीम रन देव करके अपने आप इसको भी वापस से रन कर लेते हैं तो यह अपना फ्र

41:30प्रेच लगाएंगे उसके थूपन यहां पर अपना जो डेटा है वो भीजने वाले हैं तो मैं यहां पर जो है इस फंक्षन को मैं आपर एस इंको नस फंक्षन में करूँआ क्यों कि मैं आप ट्राइग के थूँज करने वाला हो ताकि अपन एरर हैंडलिंग भी अपनी क

42:00यहां वाला है दो मेरा वहां थे वाला है और आपका यह वाला जाने वाला है अपने आपने पर पर सस्के साथ पर आरतरा पर चरता आप Cohenी पर ऐसी के साथ करना आ है

42:22गृस्भा चाहिए इसी के साथ यहां पर जब आपको टीटा

42:47टाइप ठीक है और वो अपन यहाँ पर पास कर देते हैं अपना क्या

42:52application slash json ठीक है यह अपना content type अपने यहाँ पर पास कर दिया

43:02उसके अलावा उसके अलावा body के अंदर आपके पास यहाँ पर क्या जाता है आपका data

43:07वो कैसे बेज़ोंगे json.stringify करके अपन यहाँ पर भेजेंगे क्योंकि अपन इन सब चीजों पर discuss कर चुके

43:15इसलिए मैं यहाँ पर आपको यह नहीं समझा रहा यह सारा पहले से अपन practice करके आ चुके यह सारा काम

43:21अब यह data यहाँ से जा रहा है वही data पूरा जाएगा तो आपको यहाँ पर इस function को ऐस इनको नस बनाना पड़ेगा और जब data यहाँ से अपन भेज रहे तो यहाँ पर इसको जब response निकालेंगे तब अपने पास यहाँ पर आने वाला है

43:33मैं यहाँ पर कहता हूँ response चीक है और यह जो आपने फैच लगाया है इस पर अपन क्या लगाएंगे अपना अवेट अपन यहाँ पर लगा देंगे बस इतना सा काम कर लो कि मैं यहाँ पर try catch वाला जो काम है वो use करता हूँ तो यह अपना अवेट अपन यहाँ लगा दिय

44:03अब second अपने को यहाँ पर क्या करना है second अपने को अपना जो राउट है वो create करना है कहां पर जल्दी से बैक एंड पर आओ और अपने राउटर पर अपने API राउटर के उपर आप क्या करोगे यहाँ पर आप अपना पोस्ट का method क्या करोगे और उसमें आप जो URL आपने व

44:33आपके पास यहां पर request.body के अंदर आपके पास यहां पर डेटा आना चाहिए तो मैं अभी के लिए controller नहीं बना रहा है अभी के लिए एक बार अपने यहीं पर देख लेते हैं कि अपना जो backend वो काम कर रहा है या नहीं करता फिर अपने इसको controller में convert कर देंगे तो मैं आप

45:03तो जल्दी से आओ, यहां पर आओ, इसको यहां पर आप एक बार refresh करा लो, यहां पर आपना data पास कर दो, यहां पर email ID पास कर दो, और यहां पर कुछ भी password पास कर दो, register करो, backend पे आओ, आपका F name भी आ रहा है, आपका email भी आ रहा है और आपका password भी आ रहा है, यह कहां पर

45:33ठीक है अब देखो यहां तक की process बिल्कुल सही है अब अपन इसको controller में भी convert करते हैं अब मैं यहां पर एक controller बनाऊँगा और उस controller को अपन कहा देते है user.js करके जिसमें user का complete data होना चाहिए logic जो भी लिखने वाले एक अपन कहा देते है admin का controller admin.js मतलब admin की कुछ भी activity होगी admin का

46:03तो API.js यह रहा यह request.js जो आपने काम करा है इसको यहां ना करके कहां करने वाले हो अप इस जगे करने वाले हो तो топ है तो

46:11यहाँ पर आजाओ यूजर.GSQ पर और यहां पर उसको कर देत हैं पी�Donald

46:16और इसको एक वेयरीवल में असाइं कर दो महीं आपर कहता हूं क्लças को कॉंस्ट

46:20केंपर removal के तूर कॉंस्ट करें अपना जो भी कंट्रोलर है जैसे मैं कहतेता हूं

46:23और जी डीटा कंट्रोलर मैं आपको आपको क्या करना है इस इन डी डीटा करना है इक एक्सपोर्ट करणाेय किसको अपने आप इसको अपने अरफ्ल and इसको इंपोर्ट कर लेते हैं कैसी था

46:53कौन सी फाइल है आपकी यहां पर कंट्रूलर वाली तो मैं यहां पर करता हूं डॉट डॉट स्लैश कंट्रूलर कौन सी कंट्रूलर है आपकी यूजर डॉट जी एस कंट्रूलर तो मैं यहां पर इसको एक वैरीबल में साइन करते हूं मैं करता हूं कॉंस्ट और यहां पर �

47:23यहां पर अपन कहेंगे यूजर कंट्रोलर जो है उसमें से डॉट करके मैं किसको निकालूंगा आरीजी डेटा कंट्रोलर को परफेक्ट कंट्रोलर में कर दिया वही सेम प्रोसेस है सब चीजे परफेक्टली चल रही होगी कोई इशू नहीं आएगा उसके अंदर यह अपन

47:53आपको लॉजिक्स समझना मीन है और कुछ प्रोसेस अपन अलग करेंगे इसमें ठीक है

48:23यह यहां तक की चीज के लिए आप सब्सक्राइब सही को अब नेगुआ को आगे क्या करना है इस डीटा को

48:49करते हैं जल्दी से क्रियेट कहां क्रीट करेंगे कि अपने इस ख्रक्राइब करेंड और अपने चयो करने के अपन।

49:08यहां पर अपना स्कीमा बनाना है अपना जो फिल्ड वैल्यू सेट करनी है वो सारा काम पर इस पर करेंगे तो मैं आपने मंगोज को मैं यहां पर रिक्वायर कर लिया और एक वैरीबल मैं साइन कर दो मैं आपर कहता हूं

49:32इसके बाद नेक्स अपने को यहां पर क्या करना है इस मंगोज में से अपने पास क्या आता है अपना स्कीमा यहां पर कर लिया अब अपने को क्या करना है

50:02यहां पर करते हैं तो इसकी मंगोज माथनी आता है तौन यहां पर करता हूं की इसकी जो हैंवह benefiting हुआ

50:20यूनिक यह लिखना पड़ेगा आपने आपने यहां पर मैं करताऊं यहां पर करता हूं टाइप कि इसका टाइप पिसका इनका है और एमेले च्ञार यहां पर दें

50:38ग्रोड है सेकुंड ऑपने पस क्या है सेकंड इमेल है तो मैं यहां पर कहता हूं कि यह यूजर की क्या हैए ऑफिर में आपर यहां पर कहता हूं कि रिक्वाइड जो है वह अपने पास

50:59रहने वाला है ना क्या करते हैं यूजर का पास्वर आ अपने पास Parent unsan कर देता हूं दो कल लेगा US

51:24लो कि हैं पलूव में हैं और भुछ अपने हैंड हैं कि यहां इसको का रुझा तो एक हैंhad nor

51:36दो प्रहां पर आप उन्माय मतर्थ किया इसके मादार होगे शिंड केह sweat रहा ब्रुंस्का-ठीर

51:45user schema आपके यहां पर इसको कहाए और model में अपना इसको Pass mlm करेते हैं जो अपने model लिए

51:50तो यहां पर model लिपांगा और collection का नेम का नेम की क्या रहने वाला है User

51:57और उसके अधर जो फिल्ड और invaluable जाने वाली है वह एपना user schema है ज़ोपने है इसाइड़ किया है

52:02और इसको अपन यहां से क्या करने वाले है, इसी को अपन यहां से क्या करने वाले है, यहां से एक्सपोर्ट करने वाले है, तो मैं यहां पर कहता है, अपना module.exports, किसको export करना है, इस model को ही export करना है, यह छोटा सा स्कीमा अपने यहां पर बनाया है, जिसमें अपना registration का data store होन

52:32कि चीज क्लियर है तो इस रमें मोंगो डीवे अटलस को कनेक्ट कर चुका हूँ कोई बात नहीं अपन भी कर लेंगे कनेक्ट

52:47आज की क्लास में अपन इतना ही देखेंगे बाकि अपन नेक्स क्लास में डिसकस करने वाले हैं

52:54यहां तक की चीज आई हूप कि आप सभी को किलियर है

52:56और अब अपन बैकेंड पे भी आ चुके तो अब अपन फ्रेंट अपना रेडी है

53:00अब सारी प्रोसेस अपने को चलानी है

53:02फ्रेंट एंड से बैकेंड पे सारा काम अपने को करवाना है

53:05क्रड ओप्रेशन भी होगा अपने साक्यूरिटी वाला काम भी होगा

53:08अपनी इमेज अप्लोड वाला काम भी होगा

53:10अपनी मेल वाला काम भी होगा

53:12कि अगर अपन mail का reply कर रहे तो उसकी mail ID पर reply चला जाना चीए

53:16ये सारे काम अपन करने वाले है इस project के अंदर

53:18और अपन इस month के अंदर इसको कोशिश करेंगी कि अपना project complete हो सके