📖 Today’s Class: Building Complete Admin — Add Product (Frontend + Backend) 📅 Skillwaala’s Free Full Stack Web Development Course - video Dailymotion

skillwaala

🎯 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

Transcript

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जिसमें अपन इस प्रोजेक्ट को पुरा कम्प्लीट कर लेंगे

📖 Today’s Class: Building Complete Admin — Add Product (Frontend + Backend) 📅 Skillwaala’s Free Full Stack Web Development Course

Category

Transcript

Be the first to comment

Recommended