क्लर्क और अपस्टैश रेडिस के साथ एक सुरक्षित, स्केलेबल सेशन स्टोर बनाएं

<पी> रेडिस के मुख्य उपयोग मामलों में से एक वेब अनुप्रयोगों में अनुरोधों की स्थिति को बनाए रखने के लिए उपयोगकर्ता सत्रों को संग्रहीत और प्रबंधित करना है। यह कई तरीकों से किया जा सकता है, और कुछ नए सर्वर रहित उपकरण आसानी से तैनात करने के विकल्प प्रदान करते हैं।

<पी> उपयोगकर्ता सत्र डेटा प्रबंधन विभिन्न व्यावसायिक अनुप्रयोगों के लिए महत्वपूर्ण है। उदाहरण के लिए, वैयक्तिकरण प्लेटफ़ॉर्म उपयोगकर्ता इंटरैक्शन और प्राथमिकताओं को संग्रहीत करने के लिए रेडिस का उपयोग करते हैं, जिससे वे अनुकूलित सामग्री या उत्पाद सुझाव पेश करने में सक्षम होते हैं। गेमिंग की दुनिया में, रेडिस वास्तविक समय में खिलाड़ियों की बातचीत को ट्रैक करके एक सहज मल्टीप्लेयर अनुभव प्रदान करने के लिए उपयोगकर्ता डेटा को प्रबंधित करने में मदद करता है। विज्ञापन प्लेटफ़ॉर्म सत्र डेटा संग्रहीत करने के लिए रेडिस पर भी भरोसा करते हैं, जो विज्ञापन वितरण को अनुकूलित करता है और भविष्य के अभियानों को वैयक्तिकृत करता है। निम्नलिखित उदाहरण में, हम विशेष रूप से एक ई-कॉमर्स एप्लिकेशन पर ध्यान केंद्रित करेंगे और पता लगाएंगे कि रेडिस का उपयोग शॉपिंग कार्ट को प्रभावी ढंग से प्रबंधित करने के लिए कैसे किया जा सकता है।

परियोजना विवरण

<पी> इस ब्लॉगपोस्ट में, हम शॉपिंग एप्लिकेशन के लिए सेशन स्टोर बनाने के लिए क्लर्क, नेक्स्ट.जेएस और अपस्टैश रेडिस का उपयोग करेंगे। यहां उन सुविधाओं की सूची दी गई है जिन्हें हम इस परियोजना में लागू करेंगे:

उपयोगकर्ता साइन-अप, साइन-इन और साइन-आउट क्रियाएं करने में सक्षम होंगे।
प्रत्येक उपयोगकर्ता अपने अद्वितीय शॉपिंग कार्ट में आइटम जोड़, हटा सकता है।
उपयोगकर्ता शॉपिंग कार्ट में आइटम की मात्रा अपडेट कर सकेंगे।

<पी> इस प्रोजेक्ट में QStash और Upstash रेटलिमिट से संबंधित कुछ अन्य विशेषताएं हैं:

एप्लिकेशन के भीतर कुछ कार्रवाइयां ईवेंट शुरू करेंगी, जिससे QStash के माध्यम से ईमेल का शेड्यूल किया जा सकेगा। ये ईमेल बाद में पुनः भेजें द्वारा भेजे जाएंगे। उदाहरण के लिए, चेक आउट करने पर, शिपिंग पुष्टिकरण ईमेल 24 घंटे बाद के लिए शेड्यूल किया जाएगा। इसी तरह, किसी आइटम को खरीदने के बाद, उपयोगकर्ताओं को एक निश्चित समय-विलंब के बाद एक संकेत प्राप्त होगा, जो उन्हें अपनी खरीदारी को रेटिंग देने के लिए प्रोत्साहित करेगा।
उपयोगकर्ताओं के पास वस्तुओं को रेट करने का विकल्प भी है। सभी रेटिंग डेटा को अपस्टैश रेडिस पर उपयुक्त डेटा संरचनाओं में सावधानीपूर्वक संग्रहीत किया जाता है। उपयोगकर्ता इंटरैक्शन के संतुलित प्रवाह को सुनिश्चित करने और किसी भी संभावित दुरुपयोग को रोकने के लिए, रेटिंग इवेंट को अपस्टैश रेटलिमिट की दर-सीमित क्षमताओं द्वारा नियंत्रित किया जाता है।

डेमो

<पी> आप यहां प्रोजेक्ट का तैनात डेमो देख सकते हैं।

<पी> आप यहां इस प्रोजेक्ट के Github रिपॉजिटरी तक भी पहुंच सकते हैं।

Next.js एप्लिकेशन बनाना

<पी> एक नई टर्मिनल विंडो खोलें, और नीचे दिए गए संकेत के साथ एप्लिकेशन बनाएं:

npx create-next-app@latest

<पी> यह आपसे प्रोजेक्ट विकल्प पूछेगा, और आपका Next.js प्रोजेक्ट टेम्पलेट तैयार होगा।

npx create-next-app@latest
Need to install the following packages:
 create-next-app@13.4.18
Ok to proceed? (y) y
✔ What is your project named? shopstash
✔ Would you like to use TypeScript? No / -> Yes
✔ Would you like to use ESLint? No / -> Yes
✔ Would you like to use Tailwind CSS? No / -> Yes
✔ Would you like to use `src/` directory? -> No / Yes
✔ Would you like to use App Router? (recommended) No / -> Yes
✔ Would you like to customize the default import alias? -> No / Yes
Creating a new Next.js app in /Users/***/shopstash.

क्लर्क को एकीकृत करना

<पी> किसी प्रोजेक्ट में क्लर्क को जोड़ना काफी सरल है। हम पूर्वनिर्मित घटकों और हुक के लिए क्लर्क के नेक्स्ट.जेएस एसडीके का उपयोग करेंगे। सबसे पहले, आइए इसे इंस्टॉल करें:

npm install clerk@nextjs

<पी> फिर, हम क्लर्क डैशबोर्ड पर अपना एप्लिकेशन बनाएंगे। आप अपनी पसंद के आधार पर आवश्यक साइन-अप जानकारी के लिए कॉन्फ़िगरेशन कर सकते हैं। एक बार जब आप ऐप बना लेंगे, तो आवश्यक क्रेडेंशियल मांगे जाएंगे। हम इन्हें .env.local पर कॉपी कर देंगे फ़ाइल. यहाँ एक उदाहरण है:

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_********
CLERK_SECRET_KEY=sk_test_********

<पी> हम '.env.local' फ़ाइल में क्लर्क के लिए पथ भी कॉन्फ़िगर करेंगे।

.env.local

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

<पी> अब, सक्रिय सत्र और उपयोगकर्ता संदर्भों का उपयोग करने के लिए, हम रूट लेआउट को <ClerkProvider> से लपेटेंगे . इस ट्यूटोरियल में गहराई से, हम Header को भी लागू करेंगे घटक.

लेआउट.tsx

import { ClerkProvider } from "@clerk/nextjs";
 
import Header from "./components/Header";
 
export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
 <ClerkProvider>
 <html lang="en">
 <body className="bg-white">
 <Header />
 <main className="container bg-white">
 <div className="flex min-h-screen items-start justify-center ">
 <div className="mt-5">{children}</div>
 </div>
 </main>
 </body>
 </html>
 </ClerkProvider>
 );
}

<पी> अब, क्लर्क हमारे प्रोजेक्ट में स्थापित हो गया है। अगला कदम यह तय करना है कि प्रमाणीकरण के पीछे कौन से पेज छिपाए जाएं। हम यह ऑपरेशन middleware.tsx में करेंगे फ़ाइल को रूट फ़ोल्डर में रखा गया है।

मिडिलवेयर.tsx

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({});
 
export const config = {
 matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

<पी> इससे पूरा एप्लिकेशन सुरक्षित रहता है. यदि आप साइन इन किए बिना किसी पेज तक पहुंचने का प्रयास करते हैं, तो आपको प्रमाणीकरण के लिए इंडेक्स पेज पर रीडायरेक्ट कर दिया जाएगा।

<पी> इस बिंदु पर, हमारे ऐप को साइन-अप और साइन-इन पेजों की आवश्यकता है। हम इन फ़ाइलों को हेडर से नेविगेशन प्रदान करने जा रहे हैं और यह घटक सक्रिय उपयोगकर्ता के आधार पर प्रस्तुत किया जाएगा। यदि कोई सक्रिय उपयोगकर्ता है, तो उपयोगकर्ता साइन-आउट कर सकेगा और अपनी प्रोफ़ाइल देख सकेगा। अन्यथा, साइन-इन और साइन-अप मार्ग दिखाए जाएंगे।

<पी> सक्रिय उपयोगकर्ता के बिना हेडर की स्थिति यहां दी गई है:

<पी>

क्लर्क और अपस्टैश रेडिस के साथ एक सुरक्षित, स्केलेबल सेशन स्टोर बनाएं

<पी> अंतिम चरण उपयोगकर्ता क्रियाओं के लिए आवश्यक मार्ग बनाना है। इस प्रोजेक्ट के लिए, हम अंतर्निहित क्लर्क साइन-अप/साइन-इन घटकों का उपयोग करेंगे, लेकिन आप अद्वितीय उपयोगकर्ता हस्ताक्षर प्रवाह के लिए अनुकूलित पेज डिज़ाइन भी बना सकते हैं। साइन-अप के लिए, हम app/sign-in/[[...sign-up]]/page.tsx बनाने जा रहे हैं मार्ग.

ऐप/साइन-इन/[[...साइन-अप]]/पेज.tsx

import { SignUp } from "@clerk/nextjs";
 
const SignUpPage = () => {
 return (
 <>
 <SignUp />
 </>
 );
};
export default SignUpPage;

<पी> साइन अप पृष्ठ लगभग साइन इन के समान है, और हम इसे समान पथ से कार्यान्वित करेंगे।

ऐप/साइन-इन/[[...साइन-अप]]/पेज.tsx

import { SignIn } from "@clerk/nextjs";
 
const SignInPage = () => {
 return (
 <>
 <SignIn />
 </>
 );
};
export default SignInPage;

<पी> हमारे प्रोजेक्ट में क्लर्क के सफल एकीकरण के साथ, अब हम आगे बढ़ने के लिए तैयार हैं। सक्रिय उपयोगकर्ता सुविधा मौजूद है, जो प्रत्येक विशिष्ट उपयोगकर्ता के लिए रेडिस पर एक अद्वितीय सत्र स्टोर स्थापित करने के लिए हमारे लिए मंच तैयार कर रही है। हमारी रणनीति में क्लर्क से उपयोगकर्ता आईडी प्राप्त करना और बाद में अपस्टैश रेडिस पर उक्त उपयोगकर्ता के लिए सत्र डेटा संग्रहीत करना शामिल है। प्रक्रिया को स्पष्ट करने के लिए, आइए एक शॉपिंग कार्ट बनाने पर विचार करें। यहां, प्रत्येक व्यक्तिगत सत्र अपना संबंधित कार्ट आइटम डेटा बनाए रखेगा।

<पी> सबसे पहले और सबसे महत्वपूर्ण, हमें यह संकल्पना करने की आवश्यकता है कि कार्ट आइटम क्या होता है। जब हम शेष एप्लिकेशन तैयार करेंगे तो यह हमारे ब्लूप्रिंट के रूप में काम करेगा। यदि आप अपने एप्लिकेशन को विभिन्न प्रकार की वस्तुओं से भरना चाहते हैं, तो चैटजीपीटी जैसे उपकरण अमूल्य हो सकते हैं। वैकल्पिक रूप से, अधिक प्रत्यक्ष दृष्टिकोण में उन्हें इस उदाहरण से जुड़े GitHub रिपॉजिटरी से सोर्स करना शामिल होगा। और, निःसंदेह, अपने फ्रंटएंड को वास्तव में जीवंत बनाने के लिए, आपको प्रत्येक आइटम के लिए उपयुक्त छवि डिज़ाइन या स्रोत करने की आवश्यकता होगी।

public/items.tsx

export const items = [
 {
 id: 1,
 title: "Elegant Leather Watch",
 image: "/images/1.png",
 description: "A sophisticated leather watch for all occasions.",
 company: "Timepiece Creations",
 price: 99.99,
 },
];

शॉपिंग कार्ट लागू करना

<पी> एक सामान्य शॉपिंग एप्लिकेशन में, उपयोगकर्ता का कार्ट कई अनुभागों से पहुंच योग्य होना चाहिए। यह प्रासंगिक घटकों को कार्ट की सामग्री के आधार पर प्रस्तुत करने की अनुमति देता है। उदाहरण के लिए, चाहे आप किसी व्यक्तिगत आइटम के विवरण पृष्ठ पर हों या सभी आइटमों की सूची देख रहे हों, आपको यह देखने में सक्षम होना चाहिए कि कोई उत्पाद पहले से ही आपके कार्ट में है या नहीं। हमारा उदाहरण कैसा दिखाई देगा इसकी एक झलक यहां दी गई है:

<पी>

<पी> इसे संभव बनाने के लिए, हम रिएक्ट कॉन्टेक्स्ट एपीआई का उपयोग करने जा रहे हैं, जो अर्ध-वैश्विक पैमाने पर आवश्यक कार्ट संचालन (जैसे आइटम जोड़ना, उन्हें हटाना या कार्ट को रीसेट करना) तक पहुंच प्रदान करता है।

<पी> अपस्टैश रेडिस से कनेक्शन स्थापित करने के लिए, हम UPSTASH_REDIS_REST_URL कॉपी करेंगे और UPSTASH_REDIS_REST_TOKEN कंसोल से मान लें और उन्हें अपने .env में पेस्ट करें फ़ाइल.

.env

UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

<पी> हमारा कार्ट संदर्भ app/context/CartContext.tsx में रखा जाएगा फ़ाइल. हम इस संदर्भ को मुख्य एप्लिकेशन के चारों ओर लपेटेंगे, जिससे हम इसके द्वारा प्रदान की जाने वाली विधियों का उपयोग कर सकेंगे। यहां क्षमताओं का त्वरित विवरण दिया गया है:

उपयोगकर्ता अपने कार्ट में आइटम जोड़ सकते हैं और मात्रा समायोजित कर सकते हैं।
आइटम को कार्ट से हटाया जा सकता है।
संपूर्ण कार्ट को रीसेट किया जा सकता है।
यहां एक चेकआउट सुविधा भी है। यहां संदर्भ एपीआई का एक व्यापक दृश्य दिया गया है। हम प्रत्येक विधि को चरण दर चरण तोड़ेंगे और लागू करेंगे।

<पी> यहां बताया गया है कि एल्गोरिदम उच्च अवलोकन में कैसे काम करता है।

कार्ट, जिसे एक सत्र स्टोर के रूप में माना जाता है, को अपस्टैश रेडिस पर हैश में रखा जाएगा। इस हैश के लिए विशिष्ट पहचानकर्ता उपयोगकर्ता की आईडी पर आधारित होगा, इसलिए प्रत्येक उपयोगकर्ता के पास cart:<USER_ID> के प्रारूप में नामित एक कार्ट होगा .
कार्ट डेटा को रेडिस हैश में सहेजते समय, हम आइटम आईडी को कुंजी के रूप में और प्रत्येक आइटम की मात्रा को मान के रूप में उपयोग करेंगे। रेडिस के अंतर्निहित आदेशों के लिए धन्यवाद, कार्ट को संशोधित करना आसान हो गया है।
क्लाइंट पक्ष पर, कार्ट को आइटम ऑब्जेक्ट की एक सरणी वाली स्थिति के रूप में प्रबंधित किया जाएगा। जब कोई पेज लोड होता है, तो useEffect हुक अपस्टैश रेडिस से कार्ट डेटा प्राप्त करता है। यदि कार्ट में कोई परिवर्तन होता है, तो सभी प्रासंगिक घटकों को पुनः प्रस्तुत किया जाता है।
रेडिस की सीधी डेटा संरचनाएं addItem के कार्यान्वयन को सरल बनाती हैं और removeItem कार्यक्षमताएँ redis.hincrby() को तैनात करके कमांड, हम कार्ट के भीतर आइटम जोड़ने या हटाने से लेकर आइटम मात्रा समायोजित करने तक के कार्यों को संभाल सकते हैं। यह उपयोगिता रेडिस की शक्ति को रेखांकित करती है।
resetCart के लिए फ़ंक्शन, हम redis.del() का उपयोग करके अपस्टैश डेटाबेस से हैश कुंजी को हटा देंगे .

<पी> अब जब आपने कार्ट की वैचारिक रूपरेखा को समझ लिया है, तो अब समय आ गया है कि हम अपनी आस्तीनें चढ़ाएं और मूल तरीकों पर ध्यान दें।

आइटम को कार्ट में जोड़ना

<पी> रेडिस हैश के दृष्टिकोण से, किसी आइटम को जोड़ने या उसकी मात्रा बदलने के लिए समान कमांड की आवश्यकता होती है। hincrby कमांड या तो कुंजी बनाता है और उसका मान 1 पर सेट करता है या increment के आधार पर संबंधित मान बढ़ाता है कमांड का पैरामीटर.

<पी> क्लाइंट-साइड पर, हम या तो एक नया आइटम पेश करके या कार्ट की स्थिति में मात्रा में बदलाव करके इन कार्यों को प्रतिबिंबित करेंगे।

contexts/CartContext.tsx

const addItem = async (id: number) => {
 const item = items.find((i) => i.id === id);
 if (!item) return;
 
 const doesItemExist = cart.some((i) => {
 return id === i.id;
 });
 
 let newCart: Item[];
 
 if (!doesItemExist) {
 newCart = [...(cart || []), item];
 redis.hincrby(`user:${userId}`, id.toString(), 1);
 
 //We create an item in the state object with the given id, and set the quantity to 1.
 const newCartItemIDs = { ...cartItems, [id]: 1 };
 
 setCartItemIDs(newCartItemIDs);
 setCart(newCart);
 } else {
 const item = items.find((i) => i.id === id);
 
 //This item currently exists in the state object as key, so we increase the value by 1.
 const updatedItemQuantities = {
 ...cartItems,
 [id]: cartItems[id] + 1,
 };
 
 setCartItems(updatedItemQuantities);
 redis.hincrby(`user:${userId}`, id.toString(), 1);
 }
};

कार्ट से आइटम हटाना

<पी> हटाना जोड़ने की क्रिया के समान है। आप hincrby का उपयोग करके हैश मान को कम कर सकते हैं , increment देकर -1 के रूप में पैरामीटर .

contexts/CartContext.tsx

const removeItem = async (id: number, force: boolean = false) => {
 const doesItemExist = cart.some((i) => {
 return id === i.id;
 });
 
 if (!doesItemExist) return;
 
 if (cartItems[id] === 1 || force) {
 const newCart: Item[] = cart.filter((item: { id: number }) => {
 return item.id !== id;
 });
 
 // Creating the new state object for cart
 const newCartItems = { ...cartItems };
 delete newCartItems[id];
 
 //Removing the item from Upstash Redis hashset.
 redis.hdel(`user:${userId}`, id.toString());
 
 setCart(newCart);
 setCartItems(newCartItems);
 } else if (cartItems[id] > 1) {
 const updatedItemQuantities = {
 ...cartItems,
 [id]: cartItems[id] - 1,
 };
 
 setCartItems(updatedItemQuantities);
 redis.hincrby(`user:${userId}`, id.toString(), -1);
 }
};

<पी> कार्ट की कार्यक्षमता अब सभी आवश्यक तरीकों के साथ पूरी हो गई है। यह वैश्विक पहुंच के साथ पूरे प्रोजेक्ट में निर्बाध रूप से एकीकृत है। इस सुविधा के लिए दो उदाहरणात्मक उपयोग मामलों पर एक नज़र डालें:

<पी> सूचकांक पृष्ठ :यहां, सभी आइटम प्रदर्शित किए गए हैं। प्रत्येक आइटम के साथ अद्वितीय बटन होते हैं, जिससे आप उन्हें अपने कार्ट में जोड़ सकते हैं। यदि कोई उत्पाद पहले से ही आपके कार्ट में मौजूद है, तो आपके पास उसे हटाने का विकल्प होगा।
<पी> हम shadcnui का उपयोग करेंगे रिएक्ट यूआई लाइब्रेरी, और एक मॉडल/शीट बनाएं जो कार्ट में सभी आइटम को एक पेज पर समेकित करता है। यह स्थान केवल ब्राउज़िंग के लिए नहीं है; आप आवश्यकतानुसार आइटम मात्रा को संशोधित कर सकते हैं। और यदि आप परिवर्तनशील महसूस कर रहे हैं, तो कार्ट को रीसेट करने या चेकआउट के लिए आगे बढ़ने के विकल्प वहीं हैं।

सूचकांक पृष्ठ

<पी> ध्यान देने वाली बात:इंडेक्स पेज पर आइटम विशेष रूप से सक्रिय, साइन-इन उपयोगकर्ताओं के लिए प्रदर्शित किए जाते हैं। सबसे पहले, हम क्लर्क से उपयोगकर्ता डेटा प्राप्त करते हैं और क्लर्क की प्रतिक्रिया के आधार पर घटकों को प्रस्तुत करते हैं।

<पी> कार्ड घटक में, हम केवल आवश्यक फ़ंक्शन और ऑब्जेक्ट CartContext को पुनः प्राप्त करेंगे।

कंपोनेंट्स/कार्डकंपोनेंट.tsx

export default function CardComponent(props: { item: cardProps }) {
 const { item } = props;
 const { id, title, image, company } = item;
 const { addItem, removeItem, cartItems } = useContext(CartContext);
 
 return (
 <>
 <Card className="transition duration-200 hover:shadow-lg">
 <Link href={`/products/${id}`}>
 <CardHeader>
 <CardTitle>{title}</CardTitle>
 </CardHeader>
 <CardContent>
 <Image src={image} alt={title} width={300} height={300}></Image>
 <CardDescription>{company}</CardDescription>
 </CardContent>
 </Link>
 <CardFooter>
 <div className="grid grid-rows-2">
 <CartButton
 id={id}
 cartItems={cartItems}
 addItem={addItem}
 removeItem={removeItem}
 />
 </div>
 </CardFooter>
 </Card>
 </>
 );
}

<पी> यहां महत्वपूर्ण घटक कार्ट बटन है, जहां आप कार्ट से आइटम जोड़ या हटा सकते हैं। यह बटन कार्ट की वर्तमान स्थिति का उपयोग करके प्रस्तुत किया जाएगा।

कंपोनेंट्स/कार्टबटन.tsx

const CartButton = ({
 id,
 cartItems,
 addItem,
 removeItem,
}: {
 id: number;
 cartItems: cartContent;
 addItem: (id: number) => Promise<void>;
 removeItem: (id: number, force: boolean) => Promise<void>;
}) => {
 const itemExists: boolean = cartItems?.hasOwnProperty(id);
 const { triggerEvent } = useContext(UserStateContext);
 return (
 <button
 className={`${
 itemExists ? "bg-red-400 text-black" : "bg-cyan-500 text-black"
 } flex items-center justify-center gap-3 rounded-full px-4 py-2 transition-all duration-300`}
 onClick={() => {
 if (itemExists) {
 removeItem(id, true);
 } else {
 addItem(id);
 }
 }}
 >
 <p className="text-sm font-bold">
 {itemExists ? "Remove from Cart" : "Add to Cart"}
 </p>
 <FaCartShopping size="25" />
 </button>
 );
};

<पी> अब जबकि हमारे कार्ट की स्थिति गतिशील है, यह अपनी वर्तमान स्थिति के आधार पर विशिष्ट घटक रेंडरिंग का संकेत दे सकता है। इसके बाद, हम एक समर्पित कार्ट घटक पेश करेंगे। यह स्थान कार्ट की संपूर्ण सामग्री को देखने, मात्रा समायोजन करने या रीसेट बटन दबाने के लिए केंद्र के रूप में काम करेगा।

<पी> हम अपने आधार के रूप में shadcn/ui शीट घटक की ओर रुख कर रहे हैं, इसके इंटीरियर को निजीकृत करने की योजना के साथ।

<पी> ऐसे परिदृश्यों में जहां कार्ट खाली खड़ा होता है, घटक स्थिति की स्पष्ट तस्वीर पेश करता है:

<पी>

<पी> हालाँकि, जैसे ही आइटम कार्ट में आते हैं, वे इस घटक में आसानी से दिखाई देने लगते हैं। आप न केवल अपना चयन देख सकते हैं, बल्कि आपको मात्रा में बदलाव करने या अपनी वस्तुओं का सामूहिक मूल्य मापने की भी स्वतंत्रता है।

<पी>

<पी> इस घटक के निर्माण की पूरी जानकारी के लिए, नीचे देखें। यदि आप बटन कॉन्फ़िगरेशन जैसी बारीकियों की तलाश में हैं, तो मैं हमारे GitHub रिपॉजिटरी पर जाने की सलाह दूंगा, जहां संपूर्ण कोडबेस आपके उपयोग के लिए है।

<पी> कोड के उस अंतिम स्निपेट के साथ, हमारा प्रोजेक्ट अपने निष्कर्ष पर पहुंचता है। हमने अवधारणा से कार्यान्वयन तक सफलतापूर्वक यात्रा की है, अपस्टैश रेडिस की शक्ति और shadcn/ui लाइब्रेरी के लचीलेपन का उपयोग करके अपनी कार्ट सुविधा को जीवंत बनाया है।

निष्कर्ष

<पी> उपयोगकर्ता प्रबंधन के लिए क्लर्क और कुशल डेटा भंडारण के लिए अपस्टैश रेडिस का संयोजन हमारे गतिशील कार्ट सिस्टम के निर्माण में सहायक रहा है। साथ में, उन्होंने सुरक्षा और प्रदर्शन दोनों सुनिश्चित करते हुए हमारे एप्लिकेशन की रीढ़ बनाई है। यह प्रोजेक्ट इस बात का एक बेहतरीन उदाहरण है कि कैसे अपस्टैश रेडिस, क्लर्क जैसे शक्तिशाली उपकरण एक साथ उपयोग किए जाने पर बहुत जटिल समस्याओं को आसानी से हल करते हैं।

<पी> इस परियोजना में और सुधार के लिए यहां कुछ सुझाव दिए गए हैं:

<पी> उपयोगकर्ता अनुभव: हालाँकि हमने एक मजबूत और कार्यात्मक कार्ट स्थापित की है, लेकिन उपयोगकर्ता इंटरफ़ेस संवर्द्धन - एनिमेशन, फीडबैक लूप, या यहां तक कि विस्तृत उत्पाद पूर्वावलोकन - में गहराई से जाने से और भी अधिक सहज उपयोगकर्ता यात्रा प्रदान की जा सकती है।
<पी> प्रदर्शन: अपस्टैश रेडिस के मूलभूत उपयोग के साथ, हम उन्नत कैशिंग रणनीतियों में आगे बढ़ सकते हैं, शायद बेहतर लोड समय और एक समृद्ध ऑफ़लाइन अनुभव के लिए सेवा कर्मियों को एकीकृत कर सकते हैं।
<पी> विशेषताएं: इच्छा-सूचियों के साथ कार्ट की क्षमताओं का विस्तार करना, वर्तमान कार्ट सामग्री के आधार पर तैयार किए गए उत्पाद अनुशंसाएं, या प्रचार कोड लागू करने की प्रणाली खरीदारी के अनुभव को बेहतर बना सकती है।
<पी> एकीकरण: सुचारू चेकआउट प्रक्रिया के लिए भुगतान गेटवे को एकीकृत करने या व्यापक ईकॉमर्स समाधान के लिए तृतीय-पक्ष इन्वेंट्री या सीआरएम सिस्टम के साथ इंटरफ़ेस को एकीकृत करने की भी संभावना है।

<पी> इस विकास साहसिक कार्य का अनुसरण करने के लिए धन्यवाद। हम आपकी प्रतिक्रिया सुनने के लिए उत्सुक हैं और उन नवाचारों को देखना पसंद करेंगे जो आप इस मूलभूत संरचना में ला सकते हैं! यदि आपके पास इस परियोजना के बारे में कोई प्रश्न या समस्या है, तो बेझिझक मुझसे fahreddin@upstash.com पर संपर्क करें।

<पी> आप प्रोजेक्ट का जीथब रिपॉजिटरी यहां पा सकते हैं।

<पी> वह भाग जहां हम QStash और Resend का उपयोग करके ईमेल शेड्यूल करते हैं, उसे किसी अन्य पोस्ट में शामिल किया जाएगा। तब तक आप कार्यान्वयन देखने के लिए उदाहरण रेपो की जांच कर सकते हैं।