UniMarket

আমরা কীভাবে UniMarket বানালাম: একটি সার্ভারে দ্রুত, দ্বিভাষিক মার্কেটপ্লেস

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

UniMarket বাংলাদেশের জন্য বাংলা ও ইংরেজির একটি মাল্টি-সেলার মার্কেটপ্লেস। স্টোর, সেলার সেন্টার, অ্যাডমিন প্যানেল আর ইনস্টল করার মতো অ্যাপ, সবই আমরা একটি TypeScript প্রজেক্ট হিসেবে বানিয়েছি এবং নিজেদের সার্ভারে চালাই। যে সিদ্ধান্তগুলো সবচেয়ে গুরুত্বপূর্ণ ছিল আর কেন সেগুলো নিয়েছি, এখানে তারই একটি ঘুরে দেখা।

UniMarket-এর একটি ক্যাটাগরি পেজ ডার্ক থিমে, পণ্যের একটি সারি, প্রতিটিতে দাম, ছাড়ের ব্যাজ আর একটি Add বোতাম।
ডেস্কটপে একটি ক্যাটাগরি পেজ।

স্ট্যাক আর কেন এগুলো

স্তরবাছাইকেন
অ্যাপNext.js 16, React 19 ও TypeScriptসার্ভারে রেন্ডার হওয়া পেজ ব্রাউজারের JavaScript ছোট রাখে, আর একটি ভাষায় স্টোর, সেলার সেন্টার, অ্যাডমিন ও API সব হয়।
স্টাইলিংডিজাইন টোকেনসহ Tailwind CSS 4ছোট CSS, আর একই টোকেন থেকে লাইট ও ডার্ক থিম।
ডেটানিজস্ব ইনস্ট্যান্সে MongoDBআলাদা অপশনের পণ্যের জন্য নমনীয় ডকুমেন্ট মানানসই, আর আলাদা ইনস্ট্যান্স সার্ভারের অন্য সার্ভিসগুলোকে অক্ষত রাখে।
সাইন-ইনওয়ান-টাইম কোড, Google ও Apple, ফোনের কোডের জন্য Firebase Authবাংলাদেশের ক্রেতারা ফোন নম্বর দিয়ে সাইন-ইন করেন, আর কোডে ভুলে যাওয়ার মতো পাসওয়ার্ড নেই।
হোস্টিংনিজস্ব VPS, nginx, Cloudflare ও Let’s Encryptখরচ আগে থেকে জানা, আর ব্যাকআপ, মেইল ও লিমিটের ওপর পূর্ণ নিয়ন্ত্রণ।

দ্রুত পেজ, বাংলাতেও

ভিজিটর যে পেজগুলো দেখেন তার বেশিরভাগ পাবলিক, তাই সেগুলো ক্যাশ হওয়ার মতো করে বানানো। কার্টের সংখ্যা বা সাইন-ইন করা নামের মতো ব্যক্তিগত যা কিছু, আলাদাভাবে ভরা হয় এবং পেজকে আটকে রাখে না। ছবি আপলোডের সময়ই নির্দিষ্ট মাপে আধুনিক ফরম্যাটে রূপান্তর হয়।

ফন্ট ছিল চমক। বাংলা ওয়েব ফন্ট বড়: আমরা যেটি চেষ্টা করেছি তা প্রায় ২০০ KB। আমাদের পরীক্ষায় এটি মোবাইল Lighthouse পারফরম্যান্স স্কোরের দশ পয়েন্টের বেশি কেড়ে নিয়েছিল। তাই বাংলা লেখা ফোন বা কম্পিউটারে আগে থেকে থাকা ফন্টে দেখানো হয়, আর একটি ছোট নিজস্ব ফন্ট শুধু ল্যাটিন অক্ষর ও সংখ্যা ঢাকে। পাঠক প্রতিদিনের পড়া ফন্টই দেখেন, আর বাড়তি কিছু ডাউনলোড হয় না।

আমাদের লোকাল প্রোডাকশন বিল্ডে পরীক্ষা করা প্রতিটি পেজে Accessibility, Best Practices ও SEO ১০০ পেয়েছে, আর মোবাইল Performance ৯৩ থেকে ৯৮-এর মধ্যে ছিল। এগুলো লোকাল বিল্ডে আমাদের নিজেদের মাপা সংখ্যা, আর পরে থার্ড-পার্টি স্ক্রিপ্ট যোগ করলে তা কমবে।

দুটি ভাষা, সত্যিই দুটি ভাষা

বাংলা ও ইংরেজির প্রত্যেকের নিজস্ব ঠিকানা, আর দুটির মধ্যে hreflang লিংক, যাতে সার্চ ইঞ্জিন সঠিকটি দেখায়। প্রতিটি ইন্টারফেস স্ট্রিং একটি টাইপ করা ডিকশনারিতে থাকে, আর কোনো বাংলা স্ট্রিং বাদ গেলে বিল্ড ব্যর্থ হয়, তাই আধা-অনুবাদ করা পেজ চালু হতে পারে না। দাম বাংলায় বাংলা অঙ্কে আর ইংরেজিতে ল্যাটিন অঙ্কে দেখানো হয়।

একটি চেকআউট, একাধিক সেলার

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

টাকা রাখা হয় পূর্ণ পয়সায়, যেখানে এক টাকা ১০০ পয়সা, তাই কোনো যোগফল দশমিকের কারণে কখনো গোলাকার হয় না।

ডিফল্টেই নিরাপদ

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

যে ইমেইল পৌঁছায়

UniMarket অর্ডারের প্রতি ধাপে ইমেইল পাঠায়, তাই ডেলিভারেবিলিটি প্রোডাক্টেরই অংশ। মেইল যায় আমাদের নিজস্ব মেইল সার্ভার থেকে DKIM সিগনেচারসহ, আর ডোমেইন SPF ও DMARC রেকর্ড প্রকাশ করে। আমাদের পরীক্ষায় অর্ডারের ইমেইল তিনটি যাচাইই পাস করেছে এবং স্প্যামে নয়, ইনবক্সে পৌঁছেছে।

খোলা ট্যাব না ভেঙে ডিপ্লয়

একটি ডিপ্লয় সার্ভারে বিল্ড করে, নতুন রিলিজে সুইচ করে আর দেখে নেয় সেটি সুস্থ কি না। দ্বিতীয় একটি কমান্ড আগের রিলিজে ফিরে যায়। প্রতিটি রিলিজের নিজস্ব ডিপ্লয়মেন্ট আইডি আছে, তাই কোনো ক্রেতা ডিপ্লয়ের ওপারে ট্যাব খোলা রাখলে পেজ বুঝতে পারে তার বোতামগুলো পুরোনো রিলিজের, এবং এরর দেখানোর বদলে নিজে রিলোড হয়।

ডেটাবেসের ব্যাকআপ প্রতি রাতে নেওয়া হয় আর শেষ ১৪টি ব্যাকআপ রাখা হয়।

UniMarket এখন আর্লি অ্যাক্সেসে, ডেমো ক্যাটালগসহ। মার্কেটপ্লেসটি চালু এবং কাজ করছে, আর unimarket.bd ডোমেইন পরিকল্পনায় আছে।

22Softwares টিম চালু UniMarket অ্যাপ ও এর সেলার সেন্টার গাইডের সঙ্গে মিলিয়ে তথ্যগুলো যাচাই করেছে।

প্রশ্নোত্তর

UniMarket কী দিয়ে বানানো?

ফ্রন্ট ও ব্যাক এন্ডে Next.js 16, React 19 ও TypeScript, স্টাইলিংয়ে Tailwind CSS 4, ডেটার জন্য MongoDB আর ফোনে সাইন-ইন ও পুশ নোটিফিকেশনের জন্য Firebase।

UniMarket কেন ডিভাইসের নিজস্ব বাংলা ফন্ট ব্যবহার করে?

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

22Softwares কি আমার জন্য এমন একটি মার্কেটপ্লেস বানাতে পারে?

হ্যাঁ। আমরা মাল্টি-সেলার স্টোর শুরু থেকে শেষ পর্যন্ত ডিজাইন, তৈরি ও পরিচালনা করি: স্টোরফ্রন্ট, সেলারদের টুল, অ্যাডমিন, পেমেন্ট, ডেলিভারি, ইমেইল আর হোস্টিং।