Clerk এবং Upstash Redis দিয়ে একটি নিরাপদ, স্কেলেবল সেশন স্টোর তৈরি করা

Redis-এর প্রধান ইউজ-কেসের একটি হলো ব্যবহারকারীর সেশন সংরক্ষণ ও পরিচালনা করা যাতে ওয়েব অ্যাপ্লিকেশনে অনুরোধ জুড়ে স্টেট বজায় থাকে। এটি অনেকভাবে করা যায়, এবং কিছু নতুন সার্ভারলেস টুল সহজে ডিপ্লয় করা অপশন অফার করে।

ব্যবহারকারীর সেশন ডেটা ম্যানেজমেন্ট বিভিন্ন ব্যবসায়িক অ্যাপ্লিকেশনের জন্য অত্যন্ত গুরুত্বপূর্ণ। উদাহরণস্বরূপ, পার্সোনালাইজেশন প্ল্যাটফর্মরা ব্যবহারকারীর ইন্টারঅ্যাকশন ও পছন্দ সংরক্ষণ করতে Redis ব্যবহার করে, যাতে কাস্টমাইজড কন্টেন্ট বা প্রোডাক্ট সুপারিশ দেওয়া যায়। গেমিং জগতে, Redis রিয়েল-টাইমে প্লেয়ার ইন্টারঅ্যাকশন ট্র্যাক করে মাল্টিপ্লেয়ার অভিজ্ঞতা সুগম করতে সাহায্য করে। বিজ্ঞাপন প্ল্যাটফর্মও সেশন ডেটা সংরক্ষণ করতে Redis-র উপর নির্ভর করে, যা বিজ্ঞাপন ডেলিভারি অপ্টিমাইজ করে এবং ভবিষ্যতের ক্যাম্পেইন পার্সোনালাইজ করে। নিচের উদাহরণে, আমরা বিশেষভাবে একটি ই-কমার্স অ্যাপ্লিকেশনের ওপর ফোকাস করব এবং অন্বেষণ করব কীভাবে Redis শপিং কার্ট দক্ষতার সাথে পরিচালনা করতে ব্যবহার করা যায়।

প্রজেক্ট বিবরণ

এই ব্লগপোস্টে, আমরা Clerk, Next.js এবং Upstash Redis ব্যবহার করে একটি শপিং অ্যাপ্লিকেশনের জন্য একটি সেশন স্টোর তৈরি করব। এখানে আমরা যে ফিচারগুলো ইমপ্লিমেন্ট করব তার তালিকা:

ব্যবহারকারীরা সাইন-আপ, সাইন-ইন এবং সাইন-আউট অ্যাকশন করতে পারবে।
প্রতিটি ব্যবহারকারীর নিজস্ব অনন্য শপিং কার্টে আইটেম যোগ ও সরাতে পারবে।
ব্যবহারকারীরা শপিং কার্টে আইটেমের পরিমাণ আপডেট করতে পারবে।

এই প্রজেক্টে QStash এবং Upstash Reltelimit সম্পর্কিত কিছু অন্যান্য ফিচারও আছে:

অ্যাপ্লিকেশনের নির্দিষ্ট অ্যাকশন ইভেন্ট শুরু করবে, যা QStash-এর মাধ্যমে ইমেল শিডিউল করবে। এই ইমেলগুলো পরবর্তীতে Resend দ্বারা পাঠানো হবে। উদাহরণস্বরূপ, চেকআউট করার পর, একটি শিপিং কনফার্মেশন ইমেল ২৪ ঘণ্টা পরের জন্য শিডিউল হবে। একইভাবে, একটি আইটেম কেনার পর, ব্যবহারকারীদের একটি নির্দিষ্ট টাইম-ডিলে এর পর একটি প্রম্পট পাঠানো হবে তাদের কেনা আইটেমটি রেটিং দেওয়ার জন্য।
ব্যবহারকারীরা আইটেম রেটিং দিতে পারবে। সব রেটিং ডেটা 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_********

আমরা Clerk-এর পাথগুলোর কনফিগারেশনও .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 কম্পোনেন্টও ইমপ্লিমেন্ট করব।

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)(.*)"],
};

এইটি পুরো অ্যাপ্লিকেশনকে সুরক্ষিত করে। যদি আপনি সাইন-ইন না করেই কোনো পেজ এক্সেস করতে চান, তবে আপনাকে অথেন্টিকেশনের জন্য ইন্ডেক্স পেজে রিডাইরেক্ট করা হবে।

এই পয়েন্টে, আমাদের অ্যাপকে সাইন-আপ এবং সাইন-ইন পেজ দরকার। আমরা এই ফাইলগুলোর নেভিগেশন Header থেকে প্রদান করব এবং এই কম্পোনেন্টটি এক্টিভ ইউজারের উপর ভিত্তি করে রেন্ডার হবে। যদি এক্টিভ ইউজার থাকে, তবে ইউজার সাইন-আউট করতে পারবে এবং তাদের প্রোফাইল দেখতে পারবে। অন্যথায়, সাইন-ইন এবং সাইন-আপ রুট দেখানো হবে।

এখানে এক্টিভ ইউজার ছাড়া Header-এর অবস্থা:

Clerk এবং Upstash Redis দিয়ে একটি নিরাপদ, স্কেলেবল সেশন স্টোর তৈরি করা

শেষ ধাপ হলো ইউজার অ্যাকশনের জন্য প্রয়োজনীয় রুট তৈরি করা। এই প্রজেক্টে, আমরা বিল্ট-ইন 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-এ সংযোগ সেট আপ করতে, আমরা Console থেকে UPSTASH_REDIS_REST_URL এবং UPstash_REDIS_REST_TOKEN মান কপি করে আপনার .env ফাইলে পেস্ট করব।

UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

আমাদের Cart Context app/context/CartContext.tsx ফাইলে থাকবে। আমরা এই কনটেক্সটকে মূল অ্যাপ্লিকেশনের চারপাশে র‍্যাপ করব, যা আমাদের এর প্রদত্ত মেথডগুলো ব্যবহার করতে দেয়। এখানে ক্ষমতার একটি দ্রুত রানডাউন:

ব্যবহারকারীরা আপনার কার্টে আইটেম যোগ করতে পারবে এবং পরিমাণ অ্যাডজাস্ট করতে পারবে।
আইটেম কার্ট থেকে সরানো যায়।
পুরো কার্ট রিসেট করা যায়।
একটি চেকআউট ফিচারও আছে। এখানে কনটেক্সট API-এর একটি ওভারভিউ। আমরা প্রতিটি মেথড ধাপে ধাপে ব্রেক ডাউন ও ইমপ্লিমেন্ট করব।

এলগরিদমটি হাইয়ার ওভারভিউতে কীভাবে কাজ করে:

কার্টটি, একটি সেশন স্টোর হিসেবে বিবেচিত, Upstash Redis-এ একটি হ্যাশে রাখা হবে। এই হ্যাশের ইউনিক আইডেন্টিফায়ার ব্যবহারকারীর আইডির উপর ভিত্তি করবে, তাই প্রতিটি ইউজারের একটি কার্ট থাকবে cart:<USER_ID> ফরম্যাটে।
কার্ট ডেটা Redis হ্যাশে সংরক্ষণ করার সময়, আমরা আইটেম আইডিকে কি হিসেবে এবং প্রতিটি আইটেমের পরিমাণকে ভ্যালু হিসেবে ব্যবহার করব। Redis-এর বিল্ট-ইন কমান্ডের কারণে, কার্ট মডিফাই করা সহজ।
ক্লায়েন্ট সাইডে, কার্টটি আইটেম অবজেক্টের একটি অ্যারে состояন হিসেবে ম্যানেজ হবে। পেজ লোড হলে, useEffect হুক Upstash Redis থেকে কার্ট ডেটা ফেচ করবে। কার্টে যেকোনো পরিবর্তন হলে, সব প্রাসঙ্গিক কম্পোনেন্ট রি-রেন্ডার হবে।
Redis-এর সরল ডেটা স্ট্রাকচার addItem এবং removeItem ফাংশনালিটি ইমপ্লিমেন্ট করা সহজ করে দেয়। redis.hincrby() কমান্ড ডিপ্লয় করে, আমরা কার্টে আইটেম যোগ বা সরানো থেকে শুরু করে আইটেমের পরিমাণ অ্যাডজাস্ট করার সব কাজ হ্যান্ডেল করতে পারি। এই ইউটিলিটি Redis-এর দক্ষতাকে प्रमাণ করে।
resetCart ফাংশনের জন্য, আমরা শুধু হ্যাশের কি Upstash ডাটাবেস থেকে redis.del() ব্যবহার করে ডিলিট করব।

এখন আপনি কার্টের কনসেপচুয়াল আউटलাইন বুঝতে পেরেছেন, আস্তিন চড়ায় কোর মেথডগুলোর মধ্যে যাই।

কার্টে আইটেম যোগ করা

Redis হ্যাশের দৃষ্টিকোণ থেকে, একটি আইটেম যোগ করা বা এর পরিমাণ পরিবর্তন করার জন্য একই কমান্ড দরকার। hincrby কমান্ড বা কি তৈরি করে এর মান ১ সেট করে বা কমান্ডের 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);
    // আমরা স্টেট অবজেক্টে প্রদত্ত আইডি দিয়ে একটি আইটেম তৈরি করি, এবং পরিমাণ ১ সেট করি।
    const newCartItemIDs = { ...cartItems, [id]: 1 };
    setCartItemIDs(newCartItemIDs);
    setCart(newCart);
  } else {
    const item = items.find((i) => i.id === id);
    // এই আইটেমটি বর্তমানে স্টেট অবজেক্টে কি হিসেবে আছে, তাই আমরা মানটি ১ দ্বারা বাড়াই।
    const updatedItemQuantities = { ...cartItems, [id]: cartItems[id] + 1, };
    setCartItems(updatedItemQuantities);
    redis.hincrby(`user:${userId}`, id.toString(), 1);
  }
};

কার্ট থেকে আইটেম সরানো

সরানো অপারেশন যোগ করার মতই। আপনি hincrby ব্যবহার করে একটি হ্যাশ ভ্যালু কমাতে পারেন, increment প্যারামিটারকে -1 দিয়ে।

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-এর রেসপন্সের উপর ভিত্তি করে কম্পোনেন্ট রেন্ডার করি।

কার্ড কম্পোনেন্টে, আমরা CartContext থেকে প্রয়োজনীয় ফাংশন এবং অবজেক্ট রিট্রিভ করি।

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

এখন যেহেতু আমাদের কার্টের স্টেট ডাইনামিক, এটি এর বর্তমান স্ট্যাটাসের উপর ভিত্তি করে নির্দিষ্ট কম্পোনেন্ট রেন্ডারিং প্রম্পট করতে পারে। এখন, আমরা একটি ডেডিকেটেড কার্ট কম্পোনেন্ট আনোগামি করব। এই স্পেসটি কার্টের সমগ্র কন্টেন্ট দেখার, পরিমাণ অ্যাডজাস্ট করার, বা রিসেট বাটন চাপার Epicenter হিসেবে কাজ করবে।

আমরা shadcn/ui শিট কম্পোনেন্টকে আমাদের বেস হিসেবে ব্যবহার করব, এর ইন্টেরিয়ার পেরসোনালাইজ করার পরিকল্পনায়।

যখন কার্ট খালি থাকে, কম্পোনেন্টটি পরিস্থিতি স্পষ্টভাবে চিত্রিত করে:

যদি আইটেমগুলো কার্টে ঢুকতে শুরু করে, সেগুলো এই কম্পোনেন্টে সহজে দৃষ্টিগোচর হয়। শুধু আপনার সিলেকশন দেখতে পাবেন না, আপনি পরিমাণ টুইক করতে পারবেন বা আপনার আইটেমগুলোর সমষ্টিগত মূল্য গেজ করতে পারবেন।

এই কম্পোনেন্টের তৈরি সম্পর্কে ফুল ওয়াকথ্রু এর জন্য নিচে দেখুন। আপনি যদি মিনুটিয়া খুঁজছেন, যেমন বাটন কনফিগারেশন, আমি আমাদের GitHub রিপোজিটরিতে যাওয়ার সুপারিশ করব, যেখানে সম্পূর্ণ কোডবেস আপনার ব্যবহারের জন্য উপলব্ধ।

কোডের এই চূড়ান্ত স্নিপেটের সাথে, আমাদের প্রজেক্ট তার চূড়ান্ত পর্যায়ে পৌঁছে গেছে। আমরা কনসেপ্ট থেকে ইমপ্লিমেন্টেশন পর্যন্ত সফলভাবে যাত্রা করেছি, Upstash Redis-এর শক্তি এবং shadcn/ui লাইব্রেরির ফ্লেক্সিবিলিটি ব্যবহার করে আমাদের কার্ট ফিচারকে জীবন্ট করেছি।

উপসংহার

ব্যবহারকারী ম্যানেজমেন্টের জন্য Clerk এবং দক্ষ ডেটা স্টোরেজের জন্য Upstash Redis-এর কম্বিনেশন আমাদের ডাইনামিক কার্ট সিস্টেম তৈরি করতে অবিচল ভূমিকা রক্ষা করেছে। একসাথে, তারা আমাদের অ্যাপ্লিকেশনের ব্যাকবোন তৈরি করেছে, নিরাপত্তা এবং পারফরম্যান্স দুটোই নিশ্চিত করে। এই প্রজেক্ট একটি চমৎকার উদাহরণ যে কীভাবে Upstash Redis, Clerk-এর মত পাওয়ারফুল টুলগুলো একসাথে ব্যবহার করে খুব জটিল সমস্যাগুলো সমাধান করে।

এই প্রজেক্টে আরও উন্নতির জন্য কিছু সুপারিশ:

ব্যবহারকারীর অভিজ্ঞতা: আমরা একটি রবাস্ট এবং ফাংশনাল কার্ট স্থাপন করেছি, তবে ইউজার ইন্টারফেস এনহ্যান্সমেন্টে গভীরে যাওয়া—অ্যানিমেশন, ফিডব্যাক লুপ, বা এমনকি ডিটেইলড প্রোডাক্ট প্রিভিউ—একটি আরও স্মুথ ইউজার জার্নি দিতে পারে।
পারফরম্যান্স: Upstash Redis-এর মৌলিক ব্যবহার দিয়ে, আমরা এডভান্সড ক্যাশিং কৌশলগুলোর গভীরে যেতে পারি, হয়তো সার্ভিস ওয়ার্কার ইন্টিগ্রেট করে উন্নত লোড টাইম এবং একটি সমৃদ্ধ অফলাইন অভিজ্ঞতার জন্য।
ফিচার: উইশলিস্ট, বর্তমান কার্ট কন্টেন্টের উপর ভিত্তি করে টেইলর্ড প্রোডাক্ট রিকমেন্ডেশন, বা প্রোমোশনাল কোড অ্যাপ্লাই করার একটি সিস্টেম যোগ করে শপিং অভিজ্ঞতা উন্নত করা যায়।
ইন্টিগ্রেশন: সুগম চেকআউট প্রসেসের জন্য পেমেন্ট গেটওয়ে ইন্টিগ্রেট করার বা থার্ড-পার্টি ইনভেন্টরি বা CRM সিস্টেমের সাথে ইন্টারফেস করার পোটেনশিয়াল আছে একটি সম্পূর্ণ ই-কমার্স সমাধানের জন্য।

এই ডেভেলপমেন্ট অ্যাডভেঞ্চারের সাথে থাকার জন্য ধন্যবাদ। আপনার ফিডব্যাক শুনতে আগ্রহী এবং এই ফাউন্ডেশনাল স্ট্রাকচারে আপনি কী উদ্ভাবন আনে তা দেখতে খুশি হব! আপনার যদি এই প্রজেক্ট সম্পর্কে কোনো প্রশ্ন বা সমস্যা থাকে, fahreddin@upstash.com-এ আমার সাথে যোগাযোগ করতে দ্বিধা করবেন না।

আপনি প্রজেক্টের GitHub রিপোজিটরি এখানে পাবেন।

QStash এবং Resend ব্যবহার করে ইমেল শিডিউল করার অংশটি অন্য একটি পোস্টে কভার করা হবে। তবুতেই আপনি উদাহরণ রিপো চেক করে ইমপ্লিমেন্টেশন দেখতে পারেন।