Clerk और Upstash Redis के साथ एक सुरक्षित, स्केलेबल सत्र स्टोर बनाएं

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

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

प्रोजेक्ट विवरण

इस ब्लॉग पोस्ट में, हम एक शॉपिंग एप्लिकेशन के लिए सत्र स्टोर बनाने के लिए Clerk, Next.js और Upstash Redis का उपयोग करेंगे। यहां उन विशेषताओं की सूची है जिन्हें हम इस प्रोजेक्ट में लागू करेंगे:

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

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

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

डेमो

आप प्रोजेक्ट का डिप्लॉयड डेमो यहां देख सकते हैं।

आप इस प्रोजेक्ट का 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.

Clerk को एकीकृत करना

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

npm install clerk@nextjs 

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

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

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

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 कंपोनेंट भी लागू करेंगे।

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> ); }

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

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

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

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

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

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

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

साइन अप पेज साइन इन के लगभग समान है, और हम इसे समान पथ में लागू करेंगे।

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

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

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

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, }, ];

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

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

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

Upstash Redis से कनेक्शन सेट अप करने के लिए, हम कंसोल से UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN मान कॉपी करेंगे और उन्हें अपनी .env फ़ाइल में पेस्ट करेंगे।

UPSTASH_REDIS_REST_URL=<YOUR_URL> UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

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

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

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

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

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

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

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

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

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); // हम दिए गए आईडी के साथ राज्य ऑब्जेक्ट में एक आइटम बनाते हैं, और मात्रा को 1 पर सेट करते हैं। const newCartItemIDs = { ...cartItems, [id]: 1 }; setCartItemIDs(newCartItemIDs); setCart(newCart); } else { const item = items.find((i) => i.id === id); // यह आइटम वर्तमान में राज्य ऑब्जेक्ट में कुंजी के रूप में मौजूद है, इसलिए हम मान को 1 से बढ़ाते हैं। const updatedItemQuantities = { ...cartItems, [id]: cartItems[id] + 1, }; setCartItems(updatedItemQuantities); redis.hincrby(`user:${userId}`, id.toString(), 1); } };

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

हटाना जोड़ने के ऑपरेशन के समान है। आप increment पैरामीटर को -1 देकर hincrby का उपयोग करके हैश मान को घटा सकते हैं।

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; }); // कार्ट के लिए नया राज्य ऑब्जेक्ट बनाना const newCartItems = { ...cartItems }; delete newCartItems[id]; // Upstash Redis हैशसेट से आइटम हटाना। 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 React UI लाइब्रेरी का उपयोग करेंगे, और एक मॉडल/शीट बनाएंगे जो एक ही पेज पर कार्ट के सभी आइटम को समेकित करता है। यह स्थान केवल ब्राउज़िंग के लिए नहीं है; आप आवश्यकतानुसार आइटम मात्रा को संशोधित कर सकते हैं। और यदि आप परिवर्तनशील महसूस कर रहे हैं, तो कार्ट को रीसेट करने या चेकआउट करने के विकल्प वहीं हैं।

इंडेक्स पेज

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

कार्ड कंपोनेंट में, हम कार्टकॉन्टेक्स्ट से आवश्यक फ़ंक्शन और ऑब्जेक्ट को पुनः प्राप्त करेंगे।

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> </> ); }

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

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 रिपॉजिटरी पर जाने की सिफारिश करूंगा, जहां संपूर्ण कोडबेस आपके उपयोग के लिए उपलब्ध है।

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

निष्कर्ष

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

इस प्रोजेक्ट पर आगे के सुधार के लिए कुछ सुझाव यहां दिए गए हैं:

• उपयोगकर्ता अनुभव: जबकि हमने एक मजबूत और कार्यात्मक कार्ट स्थापित किया है, उपयोगकर्ता इंटरफ़ेस संवर्द्धन—एनिमेशन, फीडबैक लूप, या यहां तक कि विस्तृत उत्पाद पूर्वावलोकन—में गहराई से उतरने से एक और भी सहज उपयोगकर्ता यात्रा प्रदान की जा सकती है।

• प्रदर्शन: Upstash Redis के मूलभूत उपयोग के साथ, हम उन्नत कैशिंग रणनीतियों में आगे बढ़ सकते हैं, शायद बेहतर लोड समय और एक समृद्ध ऑफ़लाइन अनुभव के लिए सर्विस वर्कर्स को एकीकृत कर सकते हैं।

• विशेषताएं: वर्तमान कार्ट सामग्री के आधार पर विशलिस्ट, अनुकूलित उत्पाद सिफारिशें, या प्रचार कोड लागू करने के लिए एक सिस्टम के साथ कार्ट की क्षमताओं का विस्तार खरीदारी अनुभव को बढ़ा सकता है।

• एकीकरण: एक सहज चेकआउट प्रक्रिया के लिए भुगतान गेटवे को एकीकृत करने या व्यापक ईकॉमर्स समाधान के लिए तृतीय-पक्ष इन्वेंट्री या CRM सिस्टम के साथ इंटरफेस करने की क्षमता है।

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

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

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