এই পুরো ফেব্রুয়ারী জুড়ে আমি একটি কোর্সের ওয়েবসাইট নিয়ে কাজ করেছি।

পুরো কাজটা করেছি- আমার ওয়েবসাইটে ১০জন সেলেব্রেটি শিক্ষকের কোর্স আছে, দৈনিক কয়েক হাজার ভিজিটর / অনেক হাজার পেজ ভিউ হবে – এটা ভেবে। নইলে ১-২টা কোর্স, মোট ১০০ বা কয়েকশো স্টুডেন্ট – ধরে নিয়ে কাজ অনেক কম সময়ে হয়ে যেতো।

টেক স্ট্যাক

Nextjs, Tailwindcss, Coolify, Self hosted Supabase, Google Oauth,

Nextjs আসলেই বিভিন্ন কারণে ‘কম ভালো’। আমি Remix/React Router 7 এর অনেক সুনাম (আর nextjs এর দুর্নাম) দেখেছি টুইটারে, অচিরেই রিমিক্স/RR7 ট্রাই করার ইচ্ছা আছে।

আর Nuxt 3 তো অফিশিয়াল Mastering Nuxt 3 টিউটোরিয়াল থেকে শিখেছিলাম, সেটার বিভিন্ন ভালো দিক আছে, যেমন- ইমপোর্টের জন্য ৮-১০ লাইন খরচ না করা।

Tailwindcss আসলেই ভালো।

আর Supabase নিঃসন্দেহে ডেভেলপার এক্সপেরিয়েন্স অনেক ভাল করে দিয়েছে, ভেন্ডর লক করা ছাড়া (আসলেই কি?)। Firebase, Cloudflare, Vercel-ও করেছে, খুব শক্তভাবে ভেন্ডর লক করে।

ফোল্ডার স্ট্র্যাকচার

/ হোমপেজে Hero Section, ২টি কোর্সের বর্ণনা + লিংক, Faq, Features ইত্যাদি।

/course প্রটেকটেড রাউট, লগিন করা থাকতে হবে।

/course/[courseName] এ গেলে ঐ কোর্সের ল্যান্ডিং / মার্কেটিং পেজ আর এনরোল বাটন। (কোর্স না কিনে থাকলে)

/course/[courseName]/enroll এ গেলে ফর্ম, পেমেন্ট ডিটেইল

/course/[courseName]/pending কেনার পর অ্যাডমিন ভ্যারিফাই করা পর্যন্ত কোর্স অ্যাক্সেস করার চেষ্টা করলে এই পেজে আসবে।

/course/[courseName] কোর্স কেনা থাকলে এই পেজে চ্যাপ্টারগুলোর টাইটেল দেখাবে, ধরা যাক ৮ চ্যাপ্টারের নাম দেখাচ্ছে।

/course/[courseName]/[chapter]/এই পেজে গেলে যেই চ্যাপ্টারে ক্লিক করেছে- সেটার ভিডিওগুলোর তালিকা, ধরার যাক প্রথম চ্যাপ্টারে ১০টি ভিডিও আছে।

/course/[courseName]/[chapter]/[topic] এই পেজে ভিডিও প্লেয়ার

Third Party Services

mux – ভিডিও হোস্ট।

resend – ট্রাঞ্জেকশনাল ইমেইলের জন্য।

uploadthing – পেমেন্ট করার সময় ট্রাঞ্জেকশন আইডি না দিয়ে MFS অ্যাপ বা ম্যাসেজের স্ক্রিনশট আপলোডের জন্য। (ঐচ্ছিক)

sentry – বাগ ফিক্স + সেশন রিপ্লে

খরচ কম + স্পিড বেশি

আমার শুরু থেকেই টার্গেট ছিলো-

১। হোস্টিং/ডাটাবেজ ইত্যাদির জন্য Vercel+ Supabase-কে টাকা দেবো না।

১। BDIX স্পীড যেন থাকে, যেহেতু ভিজিটর সবাই বাংলাদেশরই হবে।

টাকা না দেয়ার ব্যাপারটা- উভয়টার মিনিমাম প্রো-টায়ারে Vercel $25 + Supabase Pro $25 + Minimum Compute (1 vcpu 2 gb ram) $9.99 = $59.99 ডলার মাস (আরো অনেক কাহিনী), অনেক বেশি। বছরে প্রায় লক্ষ টাকা।

নিজে ম্যানেজ করলে 2 vcpu 4 GB ram ৬০ ডলারে (অফারে ভিপিএস কিনতে পারলে) সারা বছর হয়ে যাবে। এর দ্বিগুণ বা ৪ গুণ শক্তিশালী ভিপিএস নিলেও ঐ খরচের তুলনায় কিছুই না।

এবার আরেকটু বিস্তারিত বলি। কেন ভার্সেল নয়?

ভার্সেলে ফ্রি টায়ারে ১ মিলিয়ন Edge Requests লিমিট, Nextjs/SSR/Sveltekit ইত্যাদির প্রথম ভিজিটে ৫০-৭০ Edge Requests লাগে, তারপরের পেজগুলোতে ১০-২০ রিকোয়েস্ট।

১ মিলিয়নে ২০ হাজার পেজ ভিউ হয়ত হবে (৫০ রিকোয়েস্ট প্রতি পেজ হিসেবে) – খুব কম না, তবুও, তারপর তো পেইড প্ল্যানে যেতে হবে।

আমার Vercel Usage (অনেকগুলো হবি/প্র্যাকটিস প্রজেক্ট)

Edge Requests 59K/1M

Function Invocations 15K/100K

Edge Middleware Invocations 7.4K/1M

তারমানে আমার ক্ষেত্রে (এবং অনেকের ক্ষেত্রেই হয়ত) যত এজ রিকোয়েস্ট খরচ হয় তার ৪ ভাগের ১ভাগ Function Invocations এবং ৮ ভাগের ১ ভাগ Edge Middleware Invocations।

আর সুপাবেস- এদের প্রাইসিং এর আগামাথা বোঝা কঠিন। যা বুঝেছি-

আপনার ফ্রি অ্যাকাউন্টে ২টা প্রোজেক্ট দেবে, ৫১২ র‍্যাম আর shared cpu (NANO)

আপনি যদি ১ জিবি বা আরো বেশি র‍্যাম + নন-শেয়ার্ড/ডেডিকেটেড সিপিইউ চান- তাহলে ২৫ ডলার দিয়ে প্রো প্ল্যান কিনতে হবে, তারপর কম্পিউটের জন্য আলাদা করে ফি।

এই Self Hosted এর সিদ্ধান্ত আমার সময় ব্যয় + মাথাব্যথা ৩ গুণ বাড়িয়ে দেয়। (তবুও খুশি, অনেক কিছু শেখা হয়েছে)

2 vCPU 4 GB ram BDIX VPS কেনা ছিলো, সেটাতে ৫+ Self Hosted app রান ছিলো।

সেটাতেই Coolify সেটাপ করে সেখানে আমার কোর্সসাইট+Supabase ডিপ্লয় করি।

এই পর্যন্তও ঠিক ছিলো।

Google Oauth

Supabase এ GUI দিয়ে খুব সুন্দরভাবে Oauth সেটাপ করা যায়, যদিও ফ্রি প্ল্যানে কাস্টম ডোমেইন সেট করা যায় না। আপনার ওয়েবসাইট যদি হয় abcd.com, গুগল দিয়ে লগিন করার সময় দেখাবে আপনি etrogjhfletwpytz.supabase.co তে লগিন করার চেষ্টা করছেন। খুবই বিরক্তিকর।

***

টাকা যেহেতু খরচ করবো না- তাই এবার আমাকেই VPS > data/coolify/services/Supabase/ docker-compose.yml এ নিচের লাইনগুলো অ্যাড করতে হয়

GOTRUE_EXTERNAL_GOOGLE_ENABLED: true

GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: ****.apps.googleusercontent.com

GOTRUE_EXTERNAL_GOOGLE_SECRET: GOCSPX-z–*************Vt

GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: https://supabasekong.my-coolify-domain.tld/auth/v1/callback

github/supabase/auth আপনাকে এতটুকুই বলবে। কিন্তু আরো ব্যাপার আছে।

কুলিফাই-সুপাবেসে GOTRUE_SITE_URL: ‘${SERVICE_FQDN_SUPABASEKONG}’ থাকে ডিফল্টে, Coolify GUI থেকে পাল্টানো যায় না, disabled হয়ে থাকে।

docker-compose.yml এ গিয়ে পাল্টাতে হয়- GOTRUE_SITE_URL: ‘https://my-course-website.com’

আর ADDITIONAL_REDIRECT_URLS: ‘http://localhost:3000,’https://my-course-website.com’

এই ভ্যালুগুলো হয়ত কারো কারো কাছে জঞ্জাল- আমার কাছে খুবই গুরুত্বপূর্ণ।

***

আরো কাজ বাকি আছে।

গুগল অথ ব্যবহার করলে- নিজের লোগো আপলোড করলে (গুগলে লগিনের সময় আপনার অ্যাপের নাম + লোগো দেখাবে) and/or ১০০+ ইউজার হয়ে গেলে ভ্যারিফিকেশনের জন্য সাবমিট করতে হয়। (এছাড়াও প্রতি বছর অ্যানুয়াল রিভিউ এর একটা ব্যাপার আছে।)

গুগল অথের অনেক স্ট্যান্ডার্ড আছে- ওয়েবসাইটের ব্র্যান্ডিং, হোমপেজে কী কী উল্লেখ থাকতে হবে, Terms & Condition, Privacy Policy কিভাবে কী থাকতে হবে, ইত্যাদি। ওগুলো এখনো করা হয়নি।

2025

Course Website

2024

Self Hosted