2
- 11 months ago
🎯 Today’s Learning Outcomes
By the end of this class, students will be able to:
✅ Implement form handling and validation for product details (name, price, description, image, etc.)
✅ Connect the form with Node.js + Express backend API to save products in MongoDB
✅ Display real-time success/error messages after product submission
✅ Understand the complete product creation flow used in real e-commerce projects
By the end of this class, students will be able to:
✅ Implement form handling and validation for product details (name, price, description, image, etc.)
✅ Connect the form with Node.js + Express backend API to save products in MongoDB
✅ Display real-time success/error messages after product submission
✅ Understand the complete product creation flow used in real e-commerce projects
Category
📚
LearningTranscript
00:00:00खार्ण गाईज गुड इवनिंग एवरिवन
00:00:15गुड इवडी वायाकर शैगल
00:00:26दानिया, लीफा, राजिंद्र
00:00:29एक बार सब रैस्पोंस कर दो कि
00:00:41स्क्रीन विजिवल है और वोईस भी किलियर है
00:00:44अल किलियर से ठीक है
00:00:50तो आज अपन डिस्कस करने वाद
00:00:52अपन आगे डिस्कस करते है आज जितना अपने प्रोजेक्ट अपना बना लिया था उसी में आगे डिस्कस करते है
00:01:01तो अपन आ जाते हैं अपने PS कोड के उपर और अपन उपन कर लेते हैं अपने उस फोल्डर को
00:01:14फोल्डर उपन ही अपना एक वाई के लिए सब टैप यहां पर क्लोज कर दो जितना आपने देख लिया था उसी में पना के देखते हैं ठीक है ये लू ये लू यहां पर आ जाओ और इसको रन कर दो जन्दी से
00:01:44सर हेडर नहीं होगा हेडर्स होगा कहां पर हेडर्स होगा कोई बात नहीं चलो सीडी करके अपने यहां पर अपने बैकेंड के उपर और इसको रन कर लेते हैं यहां पर अपने इसको रन कर लेते हैं यहां पर अपने इसको रन कर लेते हैं और यहां पर में मैं सीडी करके किस
00:02:14देख
00:02:15ठीक है
00:02:16सर हेडर नहीं होगा हेडर होगा
00:02:23अच्छा अकल जो अपने इश्यू आया था
00:02:25उसकी बात कर रहोगे आप
00:02:26देखते चलो क्या इश्यू आया था
00:02:28तो अपने यहाँ पर देख रहे थे कि
00:02:32अगर
00:02:33थोड़ा सा
00:02:36तवैद की वज़े से खासी चलती रही की
00:02:38तो आप उसको अवोइड कर देना प्लीज
00:02:40देखो अपने जो चीज देख ली थी
00:02:50उसमें अपन ये देख रहे थे कि
00:02:51जैसे मैं यहाँ पर आ रहा हूँ अपने प्रोड़क्ट पर ले सेक्शन के उपर
00:02:54ठीक है तो अपने लॉगिन करके अपन यहाँ पर आ रहे है
00:02:57जैसे मैं यहाँ पर आता हूँ
00:03:00यहाँ पर एमेल आइडी देती
00:03:01123456
00:03:02यह अपन लॉगिन करते हैं 5 तकीता में भी
00:03:05और मैं लॉगिन करता हूँ
00:03:0712345 ठीक है लॉगिन हो रहा है
00:03:11successfully लॉगिन यहाँ पर यह बता रहा है
00:03:12तो अपन यहाँ पर अगर कार्ट को
00:03:14एक्सेस करते हैं तो अपने पास क्या रहा था
00:03:16वो चीज़ अपन देखते हैं तो अपन यहाँ पर आते हैं
00:03:18अपने console में आके चेक करते हैं
00:03:21console में आके
00:03:22मैं यहाँ पर कार्ट को उपन करता हूं तो अपने पास आ रहा है एक्सेज डिनाइन नू टॉकन प्रोवाइटेड ठीक है यह क्यों आ रहा था किया दिक्कत थी अपने देखते हैं जल्दी से अपने अपने कार्ट स्लाइस क्यूप पर जल्दी से
00:03:37सबसे पहला जो अपने कार्ट स्लाइस क्यूप पर फीचर्स फीचर्स में कार्ट स्लाइस क्यूप पर मैं यहाँ पर आ जाता हूं ठीक है और यहाँ पर अपने हैडर्स के अंदर यह सारे चीज़े भीजी है अपना कॉंटेंट टाइप अप्लिकीशन स्लाइस जीशन और बी
00:04:07अपना extra reducer भी अपने लगा दिया था में भी और यह अपना extra reducer ठीक है इस builder में से अपने add case निकाला save card.fulfill अगर आ रहा है तो state or action अपने पास आ रहा है उसमें console अपने काले card save और action.payload ठीक है अब अपन बैकेंड पर आते हैं अपने जो auth है उसमें या तो issue होगा
00:04:29auth में पर ने कुछ गड़बर करी होगी auth में देख लेते हैं तो auth.js के पर आपना आ जाते हैं अब देखो यहाँ पर request.headers आएगा यहाँ पर
00:04:38बिल्गुल सही बात है यहाँ पर headers आएगा ना कि header आएगा यही issue था इसी issue की वज़े से अपने पास शाहिद दिक्कत आ रही थी है चिक है
00:04:47तो चलो कोई बात नहीं यहाँ तक का बिल्गुल सही है headers यहाँ पर आएगा और अपना के चेक करते हैं अब मैं यहाँ पर आता हूँ चिक है और इसको तो कर तो close और यहाँ पर फिर से आप card के उपर आओगे card save successfully चिक है तो यहाँ पर यह बता रहा है card save successfully यह response आ रहा है आ
00:05:17आपको यहाँ पर जब आप यहाँ पर login करके आ रहे हो तो आपको उसी user का data दिखाना है जो user यहाँ पर login करके आ रहा है तो जल्दी से अपन यहाँ पर card का जो data है वो अपन ने यहाँ पर सिर्फ क्या करवाया है save करवाया है लेकिन card का data अपन ने show नहीं करवाया तो अपन
00:05:47करेंगे तो जल्दी से यहां पर आ जाओ और अपने कार्ट स्लाइस कि उपर आ जाते हैं यह तो अपने पास अपना सेँ काड़ था ऐसे ही मैं यहां पर कांज करके और अपन एक और बना लेतें जिसमें आपर कहता हूं फैच
00:06:03काट करके अपन हिहां पर create कर लेता है अपना है ठीक है create
00:06:08you think और यह सारी चीज है आपको यहां पर suggestion दे रहा है मैं इसी को ले रहे था हूं बहुत बढ़ी आबात है
00:06:12तो और यह किसकी विज़े से दे रहा है यह शायद अपने वह इंस्ट्रॉल कर रहा है इसको डिसेबल कर दो अर इंस्ट्रॉल कर दो इसको
00:06:33कि तो यहां पर अपन क्या करेंगे जो अपना क्रिएट अशिंग ठंक है उसको मैं आपर बुला लेता हूं
00:06:39तेरे पापा सजेशन मत दे यार प्लोस करके वापस चला लू ठीक है तो create async ठंक अपने यहां पर इस पे अपन दे देते हैं कि अपना जो key देनी है वो मैं यहां पर कहता हूँ
00:06:58काट और यहाँ पर अपने को क्या करवाना अपना
00:07:00फैच करना है तो मैं आपर फैच कर देता हूँ
00:07:02ठीक है उसके बाद अपन यहाँ पर अपना
00:07:04एक फंक्शन बना लेते हैं जल्दी से सेम जो
00:07:06पहले बनाया था वोई काम अपन यहाँ पर कर रहे हैं
00:07:08तो मैंने यहाँ पर एक function मना लिया और इस function के अंदर अपने पास क्या आने वाला है कुछ तो चीज़े आने वाली है एक तो यहाँ पर token निकाल लो मैं यहाँ पर अपने tokens को निकाल लेता हूँ
00:07:18tokens आप कहां से निकालोगे चो local storage है उसमें से dot करके अपन यहाँ पर क्या निकाल लेंगे get item करके अपन अपने token को निकाल लेंगे मैं आपर कहता हूँ कि मेरे पास मेरे tokens आ जाने चीज़े क्योंकि tokens के basis पे अपन क्या करेंगे अगर token है तो data दिखा दो और अगर नहीं है तो क्
00:07:48अपर एक function मना देते है जल्दी से यह लो ठीक है और इसके अंदर वो ही अपन अपना जो backend पर अपने को hit करवाना है वो काम अपन यहाँ पर कर लेते हैं यह function मना दीक है function मत बनाओ यहाँ पर fetch लगाओ और यहाँ पर अपन अपना fetch लगाने वाले है ठीक है और यह जो function है �
00:08:18मैं कहा देता हूँ slash API prefix अपना है ठीक है इसी के साथ
00:08:22अपन slash card कहा देते हैं ठीक है इससे data show होगा अपना
00:08:26लेकिन कौन सा data show होना चाहिए जो user यहाँ पर
00:08:30जिसकी user ID होगी वो ही data show करवाना है जिसके
00:08:34पास user ID नहीं होगी वो data अपने को show ही नहीं करवाना
00:08:37तो इसका मतलब जो अपने पास अपना card access करने वाला है
00:08:42अपना card access करने वाला है उसकी उपर आओ एक बार यह अपना card है
00:08:47ठीक है इस card की उपर आता हूँ एक बार के लिए
00:08:49ठीक है अब देखो यहाँ पर आप क्या क्या चीज़े भीज रहे हो
00:08:59ठीक है यहाँ पर अपने पास अपना कार्ट आ रहा है और यहाँ पर अपने अपने इस लेक्टर के दूरू यह सारी चीज़ निकाल रखी है
00:09:11फिर उसके बाद अपन यहाँ पर इसकी जो टूटल चीज़ यह है वो सारी भेज रहे है
00:09:15अब देखो यहाँ पर अपने को क्या करना है
00:09:18यह use effect तो अपने लगाई रखा है
00:09:20जिसमें आपका card data जा रहा है
00:09:22अब इसके अंदर अपन भेजने वाले हैं
00:09:24जब अपने पास यह refresh हो
00:09:27तो यहाँ पर अपन क्या भेजेंगे
00:09:29अपनी ID और token
00:09:32दूनों चीज़ें अपन यहाँ से भेज देते हैं
00:09:34तो मैं यहाँ से token और ID के basis पर
00:09:36अपने card को शो करूँआ
00:09:37यह जो use effect लगा रहा है
00:09:39इसी के अंदर अपन एक काम करते हैं
00:09:41मैं यहाँ पर कहता हूँ
00:09:41एक तो user ID में यहाँ आपन निकाल लेता हूँ
00:09:44user ID अपने भीजी थी
00:09:45तो मैं यहाँ पर कहता हूँ
00:09:46localstories.getitem
00:09:49ठीक है
00:09:50और अपने user नाम से
00:09:52उसको key pass करी थी
00:09:54same ऐसे अपनी यहाँ पर कहता है
00:09:55अपनी token के लिए
00:09:56मैं यहाँ पर अपनी token को निकाल लेता हूँ
00:09:58और token के basis पर
00:10:00अपन यहाँ पर ही काम करवा लेंगे
00:10:01तो मैं कहता हूँ
00:10:02localstories.getitem
00:10:04और यहाँ पर अपन क्या निकाल लेंगे
00:10:06अपने token को निकाल लेंगे
00:10:07ठीक है
00:10:08ID और token दोनों चीजे अपन यहाँ पर निकाल लेता है
00:10:11यह क्यों निकाल रहा हूँ
00:10:12क्योंकि यहाँ पर अपने condition लगाते है
00:10:14और अपना जो dispatch है उसको work करवाते है
00:10:17मैं यहाँ पर एक condition लगा देता हूँ
00:10:18if condition मैंने लगाई
00:10:20कि अपने पास यहाँ पर एक तो token भी होनी चीए
00:10:25जब वो card को access कर रहा है
00:10:26दूसरा उसके पास उसकी क्या होनी चीए
00:10:29दूसरा उसके पास उसकी user ID भी होनी चीए
00:10:33यह भी अपने पास tree होना चीए
00:10:35ठीक है और तीसरा अपने पास क्या tree होना चीए
00:10:39तीसरा अपन यहाँ पर कह देते है
00:10:40कि जो मेरे पास मेरा card का data है
00:10:44ठीक है उसकी जो length है
00:10:46वो zero से greater than होनी चीए
00:10:48मतलब कुछ ने कुछ data होना चीए
00:10:51तब आपको यहाँ पर क्या करना है
00:10:52तब आपको इस dispatch को work करवाना है
00:10:55यह जो dispatch है
00:10:56इस dispatch को यहाँ पर क्या करना है
00:10:58आपको work करवाना है
00:11:00ठीक है
00:11:01इस dispatch को work करवाना
00:11:04और इसके work करने पर
00:11:06अपना जो save card है
00:11:07वो यहाँ पर work करेगा
00:11:09और save card के अंदर आपका card item जा रहा है
00:11:12कोई दिक्त नहीं है
00:11:12total price जा रही है ठीक है
00:11:14और आपकी total quantity जा रही है
00:11:16इसी के साथ अपन यहाँ पर अपनी
00:11:18user ID है वो भी अपन यहाँ पर
00:11:21pass कर देते हैं अपने user ID को
00:11:23ठीक है
00:11:24मैं यहाँ पर अपनी user ID को भी
00:11:26pass करता हूँ यह जो user ID है
00:11:27यह भी अपन अपने save card के अंदर
00:11:30pass कर रहे है ठीक है
00:11:31जो अपना save card है उसके अंदर
00:11:34मैं अपने user ID को भी
00:11:35यहाँ पर pass कर रहा हूँ
00:11:37ठीक है
00:11:38यह अपने save card के अंदर
00:11:51pass कर दी अपनी user ID ठीक है
00:11:53लेकिन अपने को अपना fetch card के लिए भी user ID पास करनी पड़ेगी
00:11:58ये तो save card के अंदर अपना token जा रहा है और एक अपनी user ID जा रही है
00:12:02ठीक है क्योंकि user ID भेजना जरूरी है और जब card save हो रहा है
00:12:06तो उसकी एक user ID save होनी चाहिए
00:12:08पहला काम क्या करा समझ में आया होगा आपको
00:12:11एक बार के लिए इस काम को अपने store करके रखते है
00:12:13इस काम को मैं अभी नहीं कर रहा है
00:12:14मैं सिर्फ यहाँ पर क्या कर रहा हूँ
00:12:16मैं बोल रहा हूँ कि मेरे पास वो login करके आए
00:12:20लोगिन करके आया है तो उसने user ID भी उसकी store हुई है
00:12:23और उसका token भी store हुआ
00:12:26जब वो card के उपर आ रहा है
00:12:30तो जब वो login करके card के उपर आ रहा है
00:12:33तो उसकी user ID और उस token को मैंने get करा
00:12:36और get करके मैं कहां पर बेज रहा हूँ
00:12:38जहाँ पर अपने dispatch लगाए
00:12:40अपने save card के उपपर
00:12:42तो ये अपने save card के उपड़ अपने पास card data आ रहा है
00:12:46और इस card data के अंदर आपके पास क्या आ रही है
00:12:49आपकी user id भी आ रही है
00:12:51और आपके पास आपका token भी आ रहा है
00:12:53ठीक है ?
00:12:54जो आपने यहाँ पर create कराए है
00:12:56ये वाला
00:12:56जो यह असिंग ठंक अपने बनाया यह वाला
00:12:59जो save करने वाला है
00:13:00उसके अंदर अपने पास अपने card data के अंदर
00:13:03सारी चीज़ा आ रही है ठीक है
00:13:04अब यह जब अपने पास जाएगा
00:13:07तो यह कहाँ पे जाएगा अपने back end के उपर
00:13:09तो जल्दी से अपने back end पे आओ एक बार
00:13:11जब आप save कर रहे हैं
00:13:13तो यूजर आइडी भी save करवा हो
00:13:14तो api.js यह रहा आपका card save
00:13:17जिसमें आपने auth लगा रखा है
00:13:19और यह रहा आपका save card data controller
00:13:22चीक है
00:13:22तो आपको किसके उपर आना है save card data controller के उपर
00:13:26अब यहाँ पर अपने को सारी चीज़े access करनी है
00:13:29आपने user id भी भीजी है
00:13:31तो यहाँ पर अपनी user id भी निकाल लो
00:13:34चीक है
00:13:34क्योंकि वो भी अपन यहाँ पर store करवाने वाले है
00:13:37अपनी user id को भी
00:13:38चीक है
00:13:39तो perfect यहाँ पर अपने new collection यहाँ पर create करा है
00:13:46यह सारा काम अपने करा
00:13:47और अभी काम करो
00:13:50यह तो सिर्फ अपर normally save करवा रहे है
00:13:53लेकिन अब save होगा user id के basis पे
00:13:56ठीक है
00:13:57user id के basis पे अपना data क्या होना चीए
00:13:59यहाँ पर save होना चीए
00:14:01तो यह तो अपने पास
00:14:04अपना card हो गया जिसको अपने directly save करवा दे है
00:14:06लेकिन अब condition लगा दो यहाँ पर
00:14:08और condition अपन लगाएगे अपनी user id के basis पे
00:14:11यह user id क्या है
00:14:12आपके database की id है
00:14:15तो card का collection आपके पास यहाँ पर क्या है
00:14:17यह रहा आपका card collection
00:14:19इसी के basis पे आप काम कर जो
00:14:21तो यहाँ पर अपने इसको बला लेते हैं
00:14:23तो मैं यहाँ पर
00:14:24अपने card collection को बलाता हूँ
00:14:26मैंने बला card collection
00:14:27dot find one अपन करते हैं
00:14:30मैं को तो सिफ पहला ही data है
00:14:31यहाँ पर find करना है
00:14:32तो मैंने find one लगा दिया
00:14:33और उसके अंदर condition लगा दता हूँ
00:14:34क्या जो user id है
00:14:36वो ही मैं यहाँ पर condition लगा देता हूँ
00:14:38अगर same बात आ रही है
00:14:39यहाँ पर same user id आ रही है
00:14:41तो आपको क्या करना है
00:14:42उसके add on करनी है चीज़े
00:14:44और अगर same user id आ रही है
00:14:46तो उस data को अगर वो हटा रहा है
00:14:48तो हटा दो
00:14:48अगर add कर रहा है तो add कर दो
00:14:50इसलिए मैं यहाँ पर ही condition लगा दो
00:14:52मैं यहाँ पर कहता हूँ
00:14:52let card
00:14:53और यहाँ पर लगा दो अपना add
00:14:55ठीक है
00:14:56यह अपने card collection के उपर क्या चला है
00:14:59अपना find one
00:14:59अब यहाँ पर अपन अपनी condition चला देते है
00:15:03if condition मैं यहाँ पर चलाई
00:15:05और इसके अंदर मैं यहाँ पर
00:15:07इस card को pass कर देते हूँ
00:15:08ठीक है
00:15:09इसके अंदर अपने इस card को पास कर देते हैं
00:15:11और else के अंदर अपन यहाँ पर अपना save करवा देंगे
00:15:13else के अंदर मैं यहाँ पर क्या करूँगा
00:15:15यह जो मेरा card का data है
00:15:18वो अपन यहाँ पर else वाले part के अंदर save करवा देंगे
00:15:21यह जो card का data है
00:15:22इसको else वाले पार्ट में आख लोगी
00:15:24ठीक है ये काम अपने यहाँ पर करा
00:15:29यहाँ से const रटा दो
00:15:30constant रखो के तो फिर save नहीं होगा
00:15:32const रटा दो ठीक है
00:15:33const यहाँ से remove कर दो
00:15:35अब देखो यहाँ पर अपने बुला कि
00:15:38यह जो cart है इसके अंदर
00:15:39if अगर condition same होती है
00:15:42मतलब यहाँ पर
00:15:43if condition true होती है
00:15:45same user ID मिलती है तब आपको क्या करना है
00:15:47जो अपना cart है
00:15:49उसके अंदर जो अपने पास
00:15:51अपना cart item है उसके अंदर
00:15:53किसको store कर देना जो front end से
00:15:55मिरे पास cart item आ रहा है उसको
00:15:57आप यहाँ पर store कर देना चीक है
00:15:59second आप यहाँ पर बोल देना जो cart है उसके अंदर जो total price है जो total price है उसके अंदर जो front end से मेरे पास total price आ रही है वो आप यहाँ पर store कर देना ठीक है
00:16:11थर्ड अपन क्या देते है कि यह जो मेरा काट है
00:16:14इसके अंदर अपने पास यहां पर और क्या आएगा आपकी टूटल
00:16:17quantity तो टूटल quantity के अंदर
00:16:20आप यहां पर किसको store कर देना
00:16:21जो अपने पास फ्रेंट से
00:16:23total quantity आ रही है वो store आप यहां पर कर देना
00:16:26ठीक है? तो ये काम अपने पास हो जाना चाहिए
00:16:30पर्फेक्ट इसमें कोई दिक्कत नहीं है और ये काम हो जाए तो जो आपका
00:16:34काठ है उसके उपर आप यहाँ पर क्या चला देना? अपना शेव चला देना
00:16:39ठीक है? और यहाँ पर अपना अवीट भी लगा दो
00:16:41ये काम अपने यहाँ पर क्या किया
00:16:43जब मेरे पास same user id मिले
00:16:45तब आपको क्या करना है
00:16:46वो सारी चीज़े यहाँ पर assign करनी है
00:16:49एक नया object बना के
00:16:50उसके अलावा else अगर नया है
00:16:53तो नया तो आप store करवाई दो
00:16:54नये में तो आपको क्या करना है
00:16:56नये में तो cart item भी आपको करवाना है
00:16:58और user id भी करवाओ
00:16:59user id को क्यों बोल रो
00:17:00user id को भी यहाँ पर store करवादो
00:17:03कि user id भी यहाँ पर store हो जानी चीए
00:17:05ठीक है
00:17:06user id भी यहाँ पर क्या हो नीचे
00:17:09अपनी store हो जानी चीए
00:17:10मैं यहाँ पर कहता हूँ user id
00:17:11और यहाँ पर अपन करते है user id
00:17:13ठीक है user id और यहाँ पर अपन पास करते है अपनी user की id
00:17:19perfect इसमें तो कोई doubt नहीं होगा मेरे साब से
00:17:23अगर doubt है तो आप बलाओ आपका अगर कोई भी doubt है
00:17:26तो आप यहाँ पर mention करो उसको
00:17:29लेकिन एक issue यह रहेगा कि जो आपने user id यहाँ पर पास करी है
00:17:35वो कि आपने अपने model में पास कर रकी है
00:17:37चाहँ तो करूँ
00:17:39model में कोई user id नहीं है
00:17:41तो मैं यहाँ पर user id नकाल लेता हूँ जल्दी से
00:17:44मैं यहाँ पर कहता हूँ कि मेरे जो user ID है
00:17:48ठीक है वो अपन यहाँ पर निकाल लेते है और कौमा लगा लेते हैं अब देखो मैं यूजर आइडी कैसे निकाल रहा हूँ
00:17:56मैं यहाँ पर कहता हूँ कि user ID का जो type है वो क्या रहने वाला है वो type रहने वाला है यहाँ पर जो अपने पास अपना mangos आ रहा है उसमें से dot करके मैंने यहाँ पर निकाला अपना schema schema में से dot करके मैंने यहाँ पर निकाला अपना types और types में से dot करके मेरी जो object ID आती है उसको मैं
00:18:26पर उसके बाद राफ करके अपन यहां पर कह देते हैं एक रैफ element ही लगा देते हैं अगर जमोरा तो ही यहां पर आपन कहके देते हैं जोर है
00:18:34और एक मैं यहां पर लगाता हूं require और require अपन यहां पर कह देते हैं true-eategory
00:18:43ठीक है इतना सा काम करो एक बार और उसके अलावा जो अपने पास अपना क्या है user.js
00:18:50अपने वापर ref लगाया ना user करके तो एक काम करो इसको user id को directly pass करो आप बोर दो user id
00:18:56ठीक है user id ने तो direct कर दो हो जाएगा वैसे एक काम को issue नहीं आने वाला
00:19:03perfect कोई दिक्कत नहीं सीच के अंदर तो चुरू चेक करते हैं क्या हूँ क्या रहा है
00:19:09मैं यहाँ पर अपने compass के उपर आता हूँ मॉंगोडी भी compass के उपर आजाओ एक बार के लिए
00:19:14इसको रन कर लो फ्रेंट एंड और बैक एंड को
00:19:33cd करके अपना जाते है अपने फ्रेंट एंड के उपर और इसको मैं यहाँ पर रन कर लेता हूँ
00:19:44npm run div
00:19:46second अपन बैक एंड को भी कर लेते है cd करके अपना जाते है अपने बैक एंड के उपर और इसको भी मैं यहाँ पर रन कर लेता हूँ
00:19:57npm run
00:19:59server run
00:20:02ठीक है और इसको पनिया पर
00:20:12run कर लेते हैं जल्दी से
00:20:14यहाँ पर आओ
00:20:22connect करो इसको
00:20:25और यही है अपने पास
00:20:28और यहाँ अपना cards
00:20:29ठीक है इसके अंदर अभी बहुत सारा data है
00:20:32मैं सब कुछ अटा देता हूँ मैं को किसी से कोई
00:20:33मतलब नहीं है क्योंकि यह तो आपने सिर्फ
00:20:35testing के लिए कराता सारा हटा दो यहाँ से
00:20:37बहुत सारा data store कर लिए है
00:20:47आपने से मतलब यहाँ तेम तो
00:20:54क्योंकि रिए हैं पोफजाओ यहाँ यहाँ यहाँ यहाँ यहाँ यहाँ यहाँ वजाओीं
00:21:02ठीक है तो अपन यहां पर सबसे पहले दिखते हैं यहां सही है बिल्कुल परफेक्ट है मैं लॉग इन करता हूँ
00:21:26इन करता है लॉग इन करता है तो मिल इन करते हैं तो यहां पर पर � mixer कारवद और से क्षेक्ट करने करता हु
00:21:41आप यहां पर नजवारचस करके देको और आपके पास यहां पर बता रहा है कार्ट आइटम जिसके अंदर एक यह है और दूसरा यह है
00:21:48छीक है,
00:21:48object id,
00:21:51dc, de, e0,
00:21:533 कैसे आई ए, 3 बार कैसे save हो रहा है,
00:21:55यह data,
00:21:57user id
00:21:59भी save हो रही है, यूजर id
00:22:01और object id,
00:22:04ये data की id है,
00:22:05user id, अपनी यहां पर
00:22:07यह save हो रही है,
00:22:09इस user की id जो है, वो यह है,
00:22:1132 32 32, छीक है,
00:22:14जैसे मैं एक बार और कुछ
00:22:15save करके देखता हूँ, कुछ तो mistake चल रही है
00:22:17चलो करवाती कर लेंगे
00:22:19इसका solution भी, यहाँ पर add to cart
00:22:22करो, और यहाँ पर आके
00:22:23check करो, आपने 3 यहाँ पर
00:22:25save करवाती है, ठीक है
00:22:27और refresh करके देखोगे, तो
00:22:29आपको यहाँ पर, जो first जो आ रहा है
00:22:31उसके अंदर बता रहा है, तीन object है, ठीक है
00:22:33total quantity 3, और यह अपने पास
00:22:35यहाँ पर इस तरह के दिखा रहा है, ठीक है
00:22:37यह बाकी क्यों फैच हुए, देखते है चलो
00:22:39कुछ use effect की वज़े से हो रहा है, इसको solution कर लेंगे
00:22:41ठीक है, अब
00:22:43यहाँ तक का तो बिलकुल सही है
00:23:01कार्ट के उपर आपने यहाँ पर ही काम किया, और
00:23:17save कार्ट आपने ही करा, इसके उपर आपने ही सारा काम कर लिया, अब देखो आपको
00:23:21क्या करना है, एक नएा fetch करना है, फैच कप करना है, जो data
00:23:25अपने पास save है, वो ही उस user को दिखाना है, जो log in कर कर
00:23:29करें तो आपने कौट कर रहा है तो
00:23:59और जो data आप निकाल के लेके आओगे
00:24:02वो आप निकाल के लेके आओगे अपनी
00:24:04ID की basis पे तो मैं यहाँ पर
00:24:06अपनी user ID को access करने वाला हूँ
00:24:07जो मेरे पास user ID होगी
00:24:09अब यह user ID आएगी कहां से
00:24:12जब आप इस fetch card को use करोगे
00:24:14कहां पर अपने card के अंदर
00:24:16यह जो fetch card अपने बनाए इसको
00:24:18अपने card के अंदर use करेंगे
00:24:19तो इसका मतलब इसको यहाँ से export भी करना पड़ेगा भाई
00:24:22तो यहाँ से आप इसको क्या कर दो
00:24:24export कर दो चिक है
00:24:25यह बने इसको export कर दिया
00:24:27यह user ID कहां से आएगी जब argument अपना पास
00:24:30को कहां पर अपने card के अंदर
00:24:31तब अपने वास अपनी user ID आने वाली है
00:24:33डोकर अपने निकाली लिया है यहाँ पर directly
00:24:35ठीक है
00:24:36अब देखो यहाँ पर next काम अपने को क्या करना है
00:24:39यह तो अपने यहाँ पर बोला कि
00:24:41backend पर यह हिट होगा और यहाँ पर user ID भी जाएगी आपकी
00:24:45यहाँ पर क्या करेगी
00:24:46user ID भी आपकी जाने वाली है
00:24:49तो मैं यहाँ पर कहता हूँ
00:24:50slash और यहाँ पर आपकी
00:24:53जो user ID आप यहाँ पर बोल रहों
00:24:55वो भी भीज़ देना
00:24:56ठीक है
00:24:57वो भी आपकी यहाँ पर जाने वाली है
00:24:59ठीक है
00:25:00उसके अलावा next आपको यहाँ पर क्या करना है
00:25:03अब यहाँ से तो आपको data निकालके लिए क्या आना है
00:25:05तो method तो यहाँ पर pass करना ही पड़ेगा
00:25:07आपको method आप यहाँ पर pass कर दो
00:25:09आप बोलो get का method है
00:25:10get pass नहीं करते लेकिन अपन करेंगे क्योंकि अपन यहाँ पर अपना headers भी देने वाले है
00:25:14तो headers यहाँ पर पास कर दो
00:25:15और headers के अंदर अपन यहाँ पर पहली चीज क्या देंगे
00:25:18पहला तो वही अपना content type जो अपन देते वे आ रहे थे
00:25:22वो ही मैं यहाँ पर पास करूँगा और वो मैं यहाँ पर कह देता हूँ
00:25:24अपना content type अपने पास क्या रहता है अपना application
00:25:28slash json चीक है और second वो ही अपन यहाँ पर पास करेंगे
00:25:34अपना authorization और authorization के अंदर अपन यहाँ पर क्या बेजने वाले है
00:25:38अपना peerer header ठीक है और यहाँ पर क्या बेजोगे आपने token
00:25:46क्योंकि token होगा तभी यह काम होना चाहिए नहीं तो यह काम नहीं होना चाहिए
00:25:50ठीक है इतना सा काम आपको यहाँ पर ही करना है फिर जो response आएगा
00:25:54उस response को आप यहाँ पर निकाल लेना तो मैं यहाँ पर कहता हूँ
00:25:57कि आप return कर देना किसको return कर देना जो मेरे पास यहाँ पर response आएगा
00:26:02तो मैं यहाँ पर कहता हूँ response.gson और इसको अपन यहाँ पर लगा देते है अपना await
00:26:08perfect छीक है यहाँ पर मैंने क्या कर आपना अवेट लगा दिया
00:26:13अब देखो यहाँ पर अपने को क्या करना है
00:26:16यहाँ तक बलगुल सही है अब ये जो आपने fetch card बनाए है
00:26:21इसको आप pass करोगे किस के अंदर अपने card के अंदर
00:26:24क्योंकि वहां से आप अपनी यूजर आईडी भीजने वाले हो
00:26:28तो यहां पर अपना जाते हैं अपने कार्ट के उपर और यहां पर अपन भीजते हैं अपनी क्या यूजर आईडी
00:26:34तो यहाँ पर एक और use effect लगा लो
00:26:37एक और use effect लगा लो
00:26:39और उसके अंदर अपन यहाँ पर pass करेंगे
00:26:42अपने dispatch को
00:26:43ठीक है dependency भी अपन यहाँ पर लगा देते हैं
00:26:46अब यहाँ पर क्या काम करेगा
00:26:48आपका dispatch यहाँ पर work करेगा
00:26:50सबसे पहले मैं इसके अंदर अपने token निकाल लेता हूँ
00:26:52मैं यहाँ पर कहता हूँ मेरे token
00:26:54local storage में से अपन निकाल लेंगे
00:26:56तो मैं कहा देता हूँ local storage dot
00:26:58get item ठीक है
00:27:00और यहाँ पर अपन अपने token को
00:27:02निकाल लेता हूँ
00:27:03मैं कहा देता हूँ token ऐसे ही same मैं यहाँ पर क्या निकाल लेता हूँ अपनी user की जो ID है उसको अपनी यहाँ पर निकाल लेते हैं तो local stories के अंदर ही save होगी वो और मैं यहाँ पर कर लेता हूँ get item चीक है और यहाँ पर अपनी user की ID चीक है अब आपको यहाँ पर क्या करना है condition �
00:27:33आपको एक toast message दिखाना है तोस्ट को import कर लो अगर नहीं आ रहा तो कोई दिक्कत नहीं है यहाँ पर toast को import कर लो
00:27:41import किसको import करना है आपके toast को यहाँ पर लगा दो from react to toast से और किसको बलाने वाले हो आपने toast को चीक है तो मैं यहाँ पर toast को बला लाता हूँ
00:27:57परफेक्ट अब यहाँ पर अपन क्या करेंगे अपनी toast को यहाँ पर बुलाने वाले है और मैं एक toast message दिखा देता हूँ और वो क्या दिखाऊंगा error वाला और उसमें आप दिखा दो की please
00:28:08please log into
00:28:12access your card
00:28:17perfect अगर token नहीं है तो अगर token नहीं है तो आपको क्या करना है यह दिखाना है और यह use effect कब work करेगा यह भी मैं आपको बताता हूँ
00:28:29तो यहाँ पर अपर नहीं कह दिया कि अगर token नहीं है तो यह काम कर देना और क्या करना उसको navigate कर देना कहां पर navigate कर देना और यह वाला काम अपना complete हो चुका है अगर token नहीं है तो और अगर token है उसके पास ठीक है
00:28:57इसका मतलब अगर token है तो आप यहाँ पर एक इफ condition लगाओ और उसमें बोलो कि अगर उसकी user ID अपने पास है तो उसके basis पे आपको यहाँ पर क्या करना है आपको dispatch यूज करना है ठीक है और dispatch के अंदर क्या करना है जो आपने अपना card slice बनाया उसमें fetch card वाला आपने यह प�
00:29:27यही user ID यहाँ पर आप access कर रहे है अगर आप देखोगे तो यही user ID अपने यहाँ पर access कर रहे है और यही backend पर जाने वाली है ठीक है तो perfect कोई दिक्कत नहीं है फिर उसके बाद मैं यहाँ पर बोल रहा हूँ ठीक है इतना सा काम यहाँ पर कर दो और यह जो आपका use effect है यह
00:29:57पास अपना कुछ ने कुछ response आना चाहिए ठीक है तो यह काम अपने सिर्फ इतना सा काम किया है अब देखो आपको यहाँ पर क्या करना है यहाँ पर आपने को क्या करना है अब आपको सिर्फ बैकेंड पर hit करवाना है और वहाँ पर check करनी है कि आपके पास आपकी user ID आ रह
00:30:27API slash card मतलब आपको slash card के उपर hit करवाना है बैकेंड पर API.js पर आ जाओ और एक नई API यहाँ पर create कर लो वो क्या बनाओगे आप API routes.get की API आपकी यहाँ पर बनेगी और यह रहा अपना card और इसी के साथ आपके पास क्या रही है आपकी ID भी आ रही है ठीक है जिसको मैं यहाँ
00:30:57card controller कुछ भी बना लो बना लेते हैं पहले फिर उसके बाद कर लेंगे उसको तो यह तो आपका save card था यह आपका search था save card के बाद ही मैं यहाँ पर क्या करता हूँ अपना एक नया अपना जो controller है वो अपन यहाँ पर create कर लेते हैं ठीक है जिसको अपन कहाँ रहते है get card controller ठीक ह
00:31:27ठीक है यह अपने यहाँ पर अपना create कर दिया get card controller और इसके अंदर वोई request और response आपके पास यहाँ पर आने वाले है और यहाँ पर इसको pass कर दो get card controller को ठीक है और यहाँ पर आके उसको क्या कर लो import कर लो आप बोलो कि आपका जो get card controller है उसको आपने यहाँ पर import कर लिया ठी
00:31:57वो कैसे आती है, वो आती है, आपके पास यहाँ पर console करवा के दिख लो, किसको console करवाओगे, आप यहाँ पर console करवाओगे, और आप बोलोगे, request.params.
00:32:07.2, क्या लिखा है, आपने वाँ पर, चेक करो, id, तो यहाँ पर id, perfect, चलो भाई, चेक करते हैं, मैं यहाँ पर आता हूँ, refresh कर लो, कोई दिक्कत नहीं है, सब कुछ perfect है, यहाँ पर आते हूँ, चीकर यह तो login है, login पर नहीं आना, card पर आओ, यहाँ पर card पर आप आए, तो आ
00:32:37back end पर आओ, यह रही है आपकी id, ठीक है, user id आ रही है, लेकिन अगर, अगर, वो login नहीं कर रखा, इसका मतलब उसके token और user id यहाँ पर नहीं बने वे, मतलब network में आओ, network में नहीं, application में आओ, और यहाँ पर आके, उसके जो token और यह सब चीज़े हटा दो, इसका मतलब उसन
00:33:07access your cart, जैसे अपन इसके क्लिक करें, इसका मतलब वो login नहीं कर रहा, तो वो अपने cart को access नहीं कर पा रहा, उसके पाद एक message आ रहा है, please login to access your cart, देखों यहाँ पर यह message आ रहा है, कब जब उसके token और उसकी user id उसके पास नहीं है, अगर token और user id होगी, तो अपने को क्या करना
00:33:37है, उसने बोला yellow, मैं तो यह हूँ, और 12345 मेरा password है, मैंने login कर लिया है, मेरे को मेरा cart दिखाओ, लेकिन अभी भी cart MPT है, क्योंकि सिर्फ आपने यहाँ पर अपनी ID भीजी है, यह ID आ रही है, अब इस ID के basis पे आपको उस user का cart data निकाल के लिए क्याना है, और उसको front end पे �
00:34:07देखो, flow समझना, अगर flow समझ में आ रहा है, तो चीज़े आपको clear रहेगी,
00:34:37चेक करिए, प्लीज, क्या चेक करना, VS Core में MongoDB का एक extension आता है, उसे install कर लीजिए, ठीक है, अभी कर लेंगे, MongoDB का extension भी आता है, extension बहुत सार होते हैं, लेकिन, देखो मैं इस compass को इसलिए use कर रहा हूं, ताकि अपन direct देख ले, बाकी वैसे use जो करते है, वो अपन अपने shell को
00:35:07तो क्या ही दिक्कत है इसमें, आप यहाँ पर क्या बोलोगे, इसको ID बोल दो, आप बोलोगे const, यह यूजर की ID है अपने पास, ठीक है, आपने बोला यह user की ID है मेरे पास, ठीक है, अब आपको क्या करना है, try cash तो लगा नहीं है, उसमें तो कोई आप दिक्कत है ही नहीं,
00:35:37find one, find one ही लगेगी यहाँ पर तो, क्योंकि आपका सिर्फ एक single data ही है, ठीक है, तो find one, एक ही user का data है, और वो किसके basis पर आपको find करना है, user की ID के basis पर, यह लोगा ही, अपने user ID पास कर दी, इसके basis पर जो data हैगा, उसको क्या करो, front end की उपर भीज दो, तो आप बोलोगे const, औ
00:36:07ठीक है, और भीज दो data, आप यहाँ पर बोलोगे response, dot status, और वो ही 200 का status है, dot, और यहाँ पर अपन JSON करके क्या करेंगे, अपना जो card है, वो पर यहाँ पर भीज देते हैं, ठीक है, car ticker के लिए अपने, वो भीज दो, और यहाँ पर अपन क्या दिखा देंगे अपनी, जो error �
00:36:37perfect, इसमें तो कोई issue नहीं होगा, मेरे साब से, तो यहाँ पर वो जैसे आएगा, तो वो check करेगा, और उसके basis भी सारा गाम होने वाला है, अब देखो, card को check कर रहा है, तो card को check करने के लिए भी token बोलो, card को check करने के लिए भी token आप यहाँ पर बोलो, क्योंकि आप token भीज र
00:37:07लगा दो यहाँ पर भी, बोलो भाई token है या नहीं है, वो भी तो बताओ, user ID तो लेकिया रहा है, लेकिन token भी तो check करवा, दूनों चीजी होना ज़रूरी है, user ID के basis पर तो data दूँआ, लेकिन token के basis पर मैं इसको secure बना हुआ, तो यह दूनों काम अपन यहाँ पर करवा रहे
00:37:37response आने वाला है, और उस response को अपने return कर दिया कि इसके लिए अपने extra reducer के लिए, क्योंकि extra reducer के अंदर ही आपका क्या आता है, response आता है, जो भी आप यहाँ पर अपने create async ठंके थूरू hit करवाते हो, तो extra reducer के अंदर अपना response निकाल लो, ठीक है, और उसको कहां assign कर दो, उस
00:38:07पर दिख जाएगा, आपके front end पर दिख जाएगा, मतलब यह जो आपने initial state ले रखी है, इस initial state के अंदर उस data को assign कर दो, कब जब आपके extra reducer के अंदर वो data आने वाला है, यह तो आपका save card वाला है, builder का जो आपने यहाँ पर create करा है, इसी की जैसे same मैं यहाँ पर एक और create कर
00:38:37और यहाँ पर अपने पास क्या है, दूसरा fetch card का अपने पास था, उसी में से जो response आ रहा है, वो fulfill वाली चीज़ ही मैं आपर निकालना चाता हूँ, तो मैंने बोला fulfill, ठीक है, वही अपने पास यहाँ पर आगे क्या आता एक function, function मना दो जल्दी से कोई दिक कर नहीं है, और
00:39:07card, total price, total quantity, तो वो सारी चीज़ें आपर assign कर दो, और actions के अंदर क्या रहा है, actions के अंदर जो आपके पास backend से data आ रहा है, जो आपने भीजा है data, यह आपने data भीजा था, जो data आपका यह रहा है, यह जो card का data रहा है, यह किसके अंदर आएगा, यह आपके actions के अंदर आएगा,
00:39:37अपना card items, card items थो नहीं ले रखा, अपने, state में से dot करके अपने यहापर क्या निकाला, अपने card item नहीं, अपने card ही ले रखा, अपने card ले रखा, तो इस card को मैंने यहापर assign कर दिया, ठीक है, मैंने बोला, state, state में से dot करके मैंने यहापर क्या बोला, अपने card को यहापर नि
00:40:07और अगर नहीं आता डीटा तो condition second लगा दो एक blank क्या एरे, ठीक है, same, ऐसे ही next आगया जो, फिर उसके बाद state उसमें से dot अपन यहाँ पर क्या करके निकालेंगे अपनी, जो total price है वो निकाल लो और जो आपके पास action है, उस action के अंदर dot पे लोड़ा रहा होगा, और पे लिए
00:40:37अंदर आपके पास यहां पर क्या रहोगा आपका
00:40:39डीटा, यहांपर आप देखो कि टोल
00:40:41प्राइज आपकी आ breakfast लिए, तो वो टोल प्राइज यहांपर निकाल लू
00:40:44रहे हैं, अगर यहां आता तो ठावड़ी कही है कि नहीं
00:40:46तो क्या करो, zero print करवा देना
00:40:48फिर उसके बार next state
00:40:50और state में से dot करके
00:40:52मैं यहाँ पर क्या निकाल लूँगा अपनी total quantity
00:40:54और total quantity के अंदर अपने पास
00:40:56जो अपना actions आ रहा है
00:40:57ठीक है उसमें से dot
00:40:59payload dot
00:41:01और अपने पास जो
00:41:03अपने backend से आ रहा है वो total quantity करके आ रहा है
00:41:06जो spelling mistake है तो फिर
00:41:08देखके ही copy paste कर लो रागी कोई दिखकत ही ना हो
00:41:11और यहाँ पर क्या करो
00:41:13zero print करवा दो
00:41:21यह लोगा है
00:41:23ठीक है अब देखो
00:41:25यहाँ पर अपने पास क्या रहा है एक console भी करवा लो
00:41:27ताकि अपने को पता रहे कि fulfill हो रहा है
00:41:29data आ रहा है कि नहीं आ रहा
00:41:30तो मैं आपर console करा देता हूँ और
00:41:32मैं आपर कहतेता हूँ
00:41:33fast data
00:41:37ठीक है
00:41:38fast data और इसके
00:41:40अंदर अपन कहतेते हैं जो अपना actions है
00:41:42उसमें dot to
00:41:44पेलूट जो आ रहा है वो आप यहाँ पर एक बार दिखा देना
00:41:46कि आ भी रहा है या नहीं आ रहा है यह तो पता जले
00:41:48अगर नहीं आ रहा तो फिर अपन error को भी प्रिंट कर वा लेंगे
00:41:51एक बार के लिए
00:41:51perfect चलो चेक करते हैं
00:41:55अब मैं यहाँ पर एक बार के लिए refresh कर देता हूँ
00:41:57और मैं अपने card पे चेक करता हूँ
00:41:59तो देखो तीन item आपको यहाँ पर दिखाई दे ले
00:42:01तीन item आपको यहाँ पर दिखाई दे ले
00:42:04और उसी user के item यहाँ पर दिखाई दे
00:42:06उसने यहाँ पर बोला कि यहार मेल को यहाँ पर क्या करना है
00:42:08यह card भी एड करनी है
00:42:09उसने यहाँ पर कितने item एड कर दिए
00:42:11अपने 4 item मेड कर दी है
00:42:13card पहले से add दी
00:42:14उसकी quantity increase कर दी
00:42:31जितनी बार आप refresh करोगे, कोई दिक्कत नहीं हो, चार आइटम यहाँ पर show हो रहे हैं, क्योंकि वो data अब आपका save हो रहा है, और save होने के बाद आपको अपनी user ID की basis पर दिख रहा है, लेकिन अगर अपने पास उसके tokens यह ही नहीं, अगर अपने पास उसके tokens यह ही नहीं, मैं
00:43:01यहाँ पर देखो हलकी सी card की जलग भी आ रही है, इसके अंदर, उसको भी अपन solve कर देंगे, कोई दिक्कत नहीं है, जब आप इस card पर click करते हो, तो आपका card भी दिख रहा है, blank करके, ठीक है, उसको भी हटा देंगे अपन, कोई issue नहीं है, उसमें अपन loading वाला street जो है, व
00:43:31झाला वाला जाया म element, की जला तो, तो, यहीं है, इसको भी आपका की जया एक ऊमवतता है, is
00:44:01ट्राइ करूंगा ठीक है एक बार आप ट्राइ करना उसके बार एजी लगेगी चीजिए
00:44:29अब देखो यह तो बिल्कुल सही है यहाँ पर अपने एक काम करते हैं जब मैं इसको एकसेस कराओ तो काट की हलकी सी जलग दिख रही है उस चीज़ को अपने यहाँ पर एक बार सही करते हैं तो यहाँ अपने एक लोडिंग वाला कुछ दिखा देते हैं मैसेस्ता ताकि अ�
00:44:59यह काट नहीं यह वाला काट मैं या पर एक यूज श्टेट लगा देता हूँ ताकि व्लूदुंह ऴलाकाम ना दिखे अपने को ठीक है
00:45:08कि आपका यूज्ट रहा यहां पर आ जो और एक यूज श्टीट ले लो अपर ठेके यूज़े श्टीट में आपर गुला और इसको मैं इनिश्ली कह दाता हूं ट्रू इसको एक क्लिएट कर लो जल्दी से मैं आपर कह दाता हूं यह लो और यहां पर अपन कुछ भी वैरिय
00:45:38साइट चेकिंग बहुत कर देता हूँ
00:45:39ठीक है ये दो अपने यहाँ पर क्रिएट कर लिए
00:45:48स्टेट वैरियेबल और अपना स्टेट फॉंक्शन
00:45:50ठीक है इसके बेसिस पर अपन यहाँ पर
00:45:52अपनी कंडिशन मना लेता है
00:45:54कि अपने पास यहाँ पर
00:45:56अगर ये true हो तो अपने को क्या दिखाना है
00:45:58ठीक है वो काम अपन यहाँ पर कर लेता है
00:46:00तो जो अपने पास अपना return आ रहा है
00:46:04उसके पहले ही मैं यह काम कर देता हूँ
00:46:06यह रहा अपना return इसी के पहले मैं
00:46:08यहाँ पर एक condition लगा देता हूँ
00:46:10क्योंकि यह वाली state आपको यहाँ पर दिखनी चीए
00:46:12नहीं तो वो आपका card यहाँ पर blank दिख रहा है
00:46:14इस reason से उसको अपन यहाँ पर यह लगा देता हूँ
00:46:17अगर यह true है तो उसके basis पर आपको क्या करना है
00:46:21return करना है
00:46:22क्या return करना है वो दिखा देते हैं अपन return करके
00:46:24टीक है एक div ले लेता हूँ मैं यहाँ पर और
00:46:29इसी के अंदर अपन यहाँ पर क्या करते हैं एक div ले लेते हैं
00:46:34एक div मै नहीं यहाँ पर ले लिए और उसके अंदर अपन
00:46:37यहाँपर class लगा देते थोड़ी सी और मैं कहριता हूँ आभ इसको fix'd कर
00:46:41उसके अलावा इंसेट कर देना
00:46:44जीरू कर देना
00:46:45आप और भी एनिमेशन भी लगा सकते हूँ
00:46:46कोई बड़ी बात नहीं है एनिमेशन लगाना चाहो तो
00:46:48ठीक है और जिस्टिफाइ
00:46:50सेंटर कर देना इसको आईटम
00:46:52सेंटर कर देना ठीक है जो मैं
00:46:55पूरा सेंटर में आना चाहिए
00:46:56बीजी आप यहाँ पर एक ब्लैक कलर का
00:46:59बैग्राउंड कलर कर देना और बीजी की
00:47:01जो ओपेसीटी है वो आप यहाँ पर
00:47:03सैट कर देना जैसे फूटी
00:47:05ठीक है यह इतना सा काम आप कर देना
00:47:07और इसके अंदर आप जो दिखाओ
00:47:09वो लूडिंग काट करके आप यहाँ पर दिखादेना
00:47:12जैसे महीं डिवोर्ट ले ले देता हूँ इसके अंदर
00:47:13और उसके अंदर लिख देते हैं अपन रोड़िंग
00:47:15काट
00:47:17ठीक है यह अपने को दिखाए देना चाहिए
00:47:20और यहाँ पर लगा दो अपनी
00:47:21last theme and class trim
00:47:23में यहाँ पर कहता हूं वी जी इसका
00:47:25white color करते ना और जो padding है
00:47:27वो आप यहाँ पर 6 की apply करते
00:47:29अल direction से आप य바ष्ण के राउंडेट
00:47:31करते ना rounded आप यहाँ पर करते ना
00:47:33यह से LG और यहाँ पर
00:47:35कहते दते हैं पर shadow और shadow भी
00:47:37आप यहां पर LG कर देना, स्क्रीब ठिक है, यह कब व영 करेगा, जिब चैकिंग ऊस अपने पास यहां पर क्या रहेगा, अपना
00:47:42true रहेगा ठीक है checking और जब अपने पास क्या रहेगा अपना true रहेगा
00:47:47चलो भई चेक करते हैं
00:47:50यहाँ पर यह अपने बुला कि checking और तो अपने पास true है लेकिन इसको true false करवा होगे कहां से आप
00:47:56इसको true false करवा होगे आप जब आपके पास यहाँ पर data fetch होके आ रहा है तब आप यहाँ पर इसको true false करवाते हो
00:48:02ठीक है तो एक काम करो इनिशली तो वो false true होके आ रहा है अगर data आ रहा है तो
00:48:12यहाँ पर एक काम कर लो जल्दी से यह तो set checking is out है और यह आपने किस के लिए किया है यह रहा आपका काम पूरा complete user ID के लिए
00:48:25if user ID अपने पास यहाँ पर आ रही है तो उसके basis पर पनी condition लगा दी एक else order लगा दो इसके उपर ही ठीक है और यहाँ पर कह दो कि जो आपका set checking is out है मतलब यहाँ पर तो data आने वाला है तो इसको तो यहाँ पर क्या कर दो false कर दो और अगर data नहीं आ रहा तब आप यहाँ पर
00:48:55एक ड़ingly करते हैं हो रहा है यह नहीं हो रहा thereICK करो बंद करो यहाँ पर
00:49:02इस पर क्लिक करो तो अकुरु देखो लोडिंग का अपने पास अपने पास हल्का सा दिख रहा है Ap cannot noon का इoured बिल्कुल इंस्टेश हो रहा है loading का
00:49:12वा रहा है ठीक है क्यूं क्यूं कि फास कर रहा है प्लीज ऑ्प स्थे कोकी उसके
00:49:32कि यहां तक की चीज़ के लिए आप सबी को अगर यहां तक की चीज़ के लिए तो एक बाए कमेंट करके बताओ यह सर के लिए रहे
00:49:59अरजुन करें कि एड्मिन को सेक्यर नहीं करेंगे क्या यह बिल्कुल एड्मिन को सेक्यर करने के लिए इस ओत मिडल वेर के थ्रू ही करना है और यह आपका टास्क है यह आपका टास्क है जो आपको करना है वैसे बेसिकली होता क्या है एड्मिन का एक URL बनता है complete और वो URL मिल
00:50:29directly अपने admin को भी login करवा सकते हो
00:50:31इसी login की through
00:50:32मतलब जो जहां से user login करें
00:50:34वहां से admin भी login कर सकता है
00:50:35यह आपका काम है
00:50:37ठीक है कुछ तो काम दूँ मैं आपको
00:50:39तो यह काम आप करना
00:50:40same JWT की through ही होगा
00:50:43बस आपको क्या करना है
00:50:44admin को secure बनाना है
00:50:45तो वही auth middleware आपको लगाना है
00:50:51करना इस काम को
00:50:54और दिक्कत आये तो बदाना
00:50:55use auth क्या होता है
00:51:10use auth एक नाम दे रखा है और कुछ ही नी
00:51:12एक variable name आप बता रहे हैं
00:51:15use auth ऐसे पूछो की कुछ चीज बताओ
00:51:19उसके basis पे मैं आपको explain करूँगा
00:51:21यह तो सब वेरिवल्स नीम है जो आप बता रहे हो
00:51:25auth authentication जो अपन यहाँ पर कर रहे है
00:51:30authentication वही होता है
00:51:31auth अपने पास किसने माइक तॉन नहीं कर लगा ना
00:51:33ठीक है
00:51:34अब देखो यहाँ पर अपने एक काम और कर लेते हैं
00:51:40और वो काम यह है
00:51:41कि आप login करके आ चुके हो
00:51:44इसका मतलब यहाँ पर यह login का
00:51:46यह नहीं आना चीज ए
00:51:47इसकी जगे क्या आना चीज ए
00:51:48इसकी जगे अगर मतलब आपके tokens आ चुके है
00:51:51तो यहाँ पर logout का बटन आ जाना चीज भई
00:51:53बात तो यही होनी चीज है
00:51:55login का हटे और logout का आ जाए यहाँ पर बटन
00:51:57चीज है
00:51:58और जैसे आप उस पर click कर दो
00:52:00मतलब logout कर दो
00:52:02तो फिर आपके आपके बास login का आ जाना चीज है
00:52:04यही काम करवाना है अपने को
00:52:05तो यह काम भी अपन कर लेते हैं अपनी नयवबार के उपर
00:52:08मतलब tokens के basis पर ही होगा सारा काम
00:52:10तो tokens के basis पर इस काम को भी अपन
00:52:12complete कर लेते जल्दी से
00:52:13तो यहाँ पर आ जाओ
00:52:16इसको छूटा कर दो थोड़ा सा और
00:52:18इस card को भी close कर दो
00:52:20इसका भी कोई काम नहीं है इसका भी कोई काम नहीं है
00:52:22इसका भी कोई काम नहीं है इसका भी कोई काम नहीं है
00:52:24बेकेंड को एक बाइक लिए close कर दो यह front end है
00:52:26और इसके अंदर अपने को जो काम है वह भी नयवबार से अपना काम है
00:52:30की आपने को नेवके इवार के उपर भी काम करना है है मतलब यहां पर अपने को दिखाना है अपना ल॓ग इन
00:52:44खोर में मैं जासरे पर यहां है थे हो चक्छान है कि पर टोर्षा पर में आप तूइस को कैसे लेका होगे वही
00:52:50होगे वही आप लोकल स्टोरीज के अंदर सीव करवा रहे हैं तो इसको निकाल लो तो आप यहापने टोकन यहाँ पर आ चुके है अब आपको क्या करना है अब आपको जहां पर आपके पास आपका यह जो लॉगिन वाला दिख रहा है उसी के अंदर आपको
00:53:18कंडिशन लगानी है और आपको लोगाउट वाला बटन दिखाना है बस इतना सा अगाम करना है इस टोकन की वेसिस पे ठीक है तो जल्दी से स्क्रॉल करके आओ कहां पर है आपका लोगिन वाला यह रहा लोगिन वाला ठीक है यही है अपने पास ठीक है और यह पूरा कंप्ल
00:53:48नहीं है इफ अगर मेरे पास यहां पर टोकन नहीं है तब आपको क्या करना है तब आपको यहां पर लोगिन वाला ही दिखाना है तब आपको लोगिन वाला ही दिखाना है ठीक है और एल्स आपको यहां पर क्या करना है लोगाउट वाला बटन दिखाना है ठीक है तो यहा
00:54:18आइकन लेते हैं लोग आउट कौन सा ले यह वाला ले लेते चलो इसको इंपोर्ट कर लो यह मैंने यह से कौपी कर लिया और इसको यहां पर पूर्ट कर लो
00:54:34ठीक है आयो लोगाउट करके तो इसको यहां पर यूज कर लो कहां पर रगाई अपने कंडिशन स्क्रॉल करो यह रही यही पर अपने इसको अपने आइकन को बिला लेंगे जो अपने पास क्या है आयो लोगाउट करके ठीक है इस आइकन को यहां पर बिला लो परफेक्ट च
00:55:04कर दो और लॉगिन आप या पर कर लो सक्सेस्फिली लॉगिन या पर बता रहा है रिफ्रेश करने पर आ रहा है वो ठीक है इसका सॉलिशन भी कर देंगे कोई दिकत नहीं है और फिर उसके बाद इसके उपर क्लासेस लगा दो जल्दी से कुछ यहां पर यह जो आपके पास �
00:55:34चाहिए और फोन को मैं यहां पर कहता हूं सेमी बूल कर देना आप ठीक है और टेक्स्ट को आप यहां पर रैड कलर के अंदर देना 500 ठीक है और के उपर करसर भी आ जाना चीए तो मैं आपके तो अपना करसर पॉइंटर च्छिक है बस और होड़ की उपर जो टेक्स्ट का
00:56:04आए फ्किन आ गया घिके अब इसको करते ही लोग आउट करवाना है तो लोगू आउट करवादो मतलब इस पर और कुलिग पर आप क्या ओक एप फंक्शन बना
00:56:34ठीक है, अब
00:56:36यहाँ पर इस handle logout के अंदर आपको
00:56:38क्या करना है, यह जो function आपने बनाया है
00:56:40इस function के अंदर जो local storage है
00:56:42उसमें से dot आप यहाँ पर क्या करोगे
00:56:44remove item और किसको remove करोगे
00:56:46आप यहाँ पर अपने token को
00:56:48remove कर दो, ठीक है
00:56:50उसी के साथ आप local storage में से
00:56:52dot यहाँ पर क्या करो remove item और यहाँ पर जो user ID है उसको भी आप यहाँ पर क्या करो remove कर दो
00:56:59दोनों चीज़ों को remove कर दो अगर वो ही remove हो जाएंगे तो वो logout हो जाएगा
00:57:03उसी के साथ एक toast message भी दिखा दो toast dot success और वहाँ पर दिखा दो logout
00:57:09logout successfully ठीक है और इसको navigate कर दो
00:57:20navigate navigate ले रखा है नहीं ले रखा तो यहाँ पर अपने navigate को बला लो
00:57:26आप बोलोगे use navigate और इसको एक variable में assign कर दो तो आप यहाँ पर क्या बोलोगे
00:57:32const navigate ठीक है इसको एक variable में assign कर दो और यहाँ पर इसको क्या करवा दो अपने
00:57:39navigate करवा दो और कहां पर navigate करा दो
00:57:42homepage के उपर ठीक है
00:57:43जब वो यहाँ पर उसके उपर
00:57:45click करें तो चलो
00:57:47यहाँ पर जैसे ही आप click करोगे
00:57:49logout successfully अब अगर
00:57:51आप card को access करोगे नहीं होगा
00:57:54क्योंकि आपने logout कर लिया है
00:57:55यहाँ पर आप email id पास करोगे
00:57:5712345 दैन उसके
00:57:59बाद login करोगे तो आप successfully
00:58:01login हो चुके हो आप अपने card को
00:58:03access कर सकते हो जो id आप दे रहे हो
00:58:05और यहाँ से अगर आप logout कर रहे हो तो आप
00:58:07यहाँ पर logout भी हो चुके हो आप card को
00:58:09access नहीं कर सकते हो ठीक है
00:58:11तो यह बात होगी अपने पास किस चीज़ की
00:58:13ये बात हो गई अपने पास अपने JWT के उपर मतलब अपने अपने कार्ट को तब ही दिखाया है जब उसके पास tokens है और अगर tokens नहीं है तो अपन उसके कार्ट को access नहीं दे रहे है ठीक है अगर tokens है तो access दे रहे है और अगर tokens नहीं है तो access नहीं दे रहे हैं यहां तक की ची�
00:58:43इसी के साथ एक काम और कर लो
00:58:46इंस्पेक्ट करो और यहाँ पर भी चेक कर लो
00:58:49जो आपने responsive के अंदर काम किया है
00:58:51यहाँ पर यह इतनी बार कैसे आ रहे है
00:58:54लूप के अंदर यह कैसे आ रहे है
00:58:56कुस्तों mistake कर रखी है
00:58:58home contact card user
00:59:00home contact card user
00:59:02यह क्या हो गया
00:59:03response के अदर द्यानी ने दर है अप
00:59:05क्या हो गया यह और क्यूं हो गया यह
00:59:08यहाँ पर आओ
00:59:11कुस्तों गड़बड कर रखी है
00:59:13यह इतनी बार कोपी पेस्ट किस ने कर दिया है यह आपर
00:59:17home contact card user
00:59:31फिर home contact card user
00:59:34ऐसा गया हूँ
00:59:35किसे ने कर विस्ट किया है
00:59:37अपनी किया हुगा
00:59:38कोई और तो कौन आएगा
00:59:40inspect करो और फिर से आओ
00:59:42home contact card user
00:59:44ठीक है
00:59:45अब इसी के अंदर आपको क्या करना है
00:59:47logout वाला भी दिखाना है
00:59:49ठीक है
00:59:49तो user की जगे logout दिखा दो जल्दी से
00:59:51यहाँ पर भी condition लगा दो
00:59:53यह आपका user
00:59:54यहाँ पर भी condition लगा दो जल्दी से
00:59:56ताकि यह भी अपना complete रहा है
00:59:58अगर आपने project दिखा हो
01:00:00तो वो responsive के अंदर भी पूरा सही रहना चाहिए
01:00:02और भी अगर छोटी मोटी mistake है
01:00:03वो आप सही कर सकते हो
01:00:05सिर्फ conditions वाली चीज़े अगर मैं miss कर रहा हूँ
01:00:07तो आप complete कर लेना उसको
01:00:09उनमें कोई बड़ी बात नहीं है
01:00:11ठीक है अगर token नहीं है
01:00:14तो आपको यहाँ पर क्या करना है
01:00:15token नहीं होने पर तो यहीं दिखाना है
01:00:17कोई दिक्कत ही नहीं है
01:00:18ठीक है अगर उसके पास यहाँ पर token नहीं है
01:00:23और अगर token है
01:00:25तो token होने पर तो आपको क्या करना है
01:00:28token होने पर तो आपको यहाँ पर
01:00:30अपना एक बटन दिखा देना और तो क्या है एक बटन दिखा देना और उसमें लिख देना आप यहाँ पर क्या लोग आउट ठीक है उसमें आप यहाँ पर लोग आउट लिख देना और ओन क्लिक पर वो भी लगा देना ओन क्लिक और ओन क्लिक पर जो आपका हैंडल लोग आ
01:01:00063
01:01:04at the right
01:01:06gmail.com
01:01:08टीक है
01:01:09पासवर आपने पास करा 12345
01:01:12आपने लॉग इन करा टीक है
01:01:13तो यहाँ पर लोग आउट आगा लिका हुआ
01:01:15इस पर जैसे क्लिक करोगे
01:01:16लोग आउट सक्सेस्फुली
01:01:18टीक है
01:01:21तो यह बात हो गई अपने पास किस चीज की
01:01:23इसको secure बनानी की
01:01:25अब बात आती है
01:01:26यहाँ पर वो चेक करेगा
01:01:28यूजर आएगा
01:01:29लोग इन करेगा
01:01:29लोग इन करा उसने
01:01:30उसने पासवर दिया
01:01:3212345 ठीक है
01:01:33फिर उसके बाद उसने अपने कार्ट को चेक करा
01:01:35अब कार्ट चेक करने के बाद
01:01:36वो यहाँ पर क्या करने वाला है
01:01:38जो भी उसके पास आइटम है
01:01:39बात लोग तीन आइटम यहाँ पर बता रहे
01:01:41अब एक ही आइटम है
01:01:42वो इसको जैसे चेक आउट करें
01:01:43तो चेक आउट पर अपने को
01:01:44पेमिंट करवाना है
01:01:46अब payment वाला काम अपने को यहाँ पर करना है
01:01:48कि वो जैसे ही check out करें
01:01:50तो उसको payment अपने को करवाना है
01:01:51वो payment कर सके अपना इसका
01:01:53ठीक है वो काम अपने को यहाँ पर करना है
01:01:56अगर यहाँ तक की चीजे
01:01:58clear है तो बताओ
01:02:00yes sir यहाँ तक की चीज के लिए रहे
01:02:01इसमें कोई डाउट नहीं है
01:02:02सरे कुशन था
01:02:19रिलिटेट टू इंटर्शिप
01:02:21येस बिल्कुल अपना कुशन आप पूछिए
01:02:22जो भी कुशन था आपका
01:02:24इसी के साथ
01:02:49अटनेंस के पॉइंट वन में आपको बताता हूँ
01:02:51अटनेंस के पॉइंट वन के अंदर आपको मेंचन करना है
01:02:53रिडक्स
01:02:54ये अटनेंस का पॉइंट वन है
01:02:56और अटनेंस के पॉइंट टू के अंदर आपको क्या मेंचन करना है
01:02:58अटनेंस के पॉइंट टू के अंदर आपको मेंचन करना है
01:03:02क्या मेंचन करना है
01:03:05फाइनल प्रोजेक्ट
01:03:08मेभी अपनी कल या परसो
01:03:11कल तो नहीं परसो लास्ट क्लास हो सकती है
01:03:13जिसमें अपन इस प्रोजेक्ट को पुरा कम्प्लीट कर लेंगे