💡 [Vibe Coding & No-Code for Designers Series]
এটি ডিজাইনারদের জন্য একটি স্পেশাল ৪ পর্বের প্র্যাক্টিক্যাল সিরিজ। এখানে আমরা দেখব কীভাবে কোডিং ব্যাকগ্রাউন্ড ছাড়াই LLMs (Cursor/Claude) এবং প্রম্পট ইঞ্জিনিয়ারিংয়ের মাধ্যমে ফিগমার স্ট্যাটিক ডিজাইনকে লাইভ ও ফাংশনাল ওয়েব অ্যাপ্লিকেশন বা এক্সটেনশনে রূপান্তর করা যায়।
এই প্র্যাক্টিক্যাল সিরিজের শেষ পর্বে আপনাদের স্বাগতম। আগের তিন পর্বে আমরা ডিজাইন থেকে কোড করা, ক্রোম এক্সটেনশন ডেভেলপ করা এবং মাইক্রো-অ্যানিমেশন ফাইন-টিউন করার এআই ওয়ার্কফ্লো নিয়ে আলোচনা করেছি।
আজকে আমরা আমাদের লোকাল কম্পিউটারে তৈরি করা অ্যাপটিকে ইন্টারনেটে লাইভ করার জন্য রেডি করব।
শুধু তাই নয়, আমরা এআই-এর সাহায্যে ডেটাবেস হিসেবে Supabase কানেক্ট করব এবং দেখব কীভাবে একজন সাধারণ ভিজিটরকে সাইন-আপ করিয়ে মেম্বারশিপ বা পেইড প্রোডক্টের অ্যাক্সেস দেওয়া যায়।
১. ভারсел (Vercel): ফ্রিতে সেকেন্ডের মধ্যে ডিপ্লয়মেন্ট
আমাদের লোকাল কোড সবার ব্রাউজারে রান করানোর সবচেয়ে সহজ মাধ্যম হলো Vercel। এটি সম্পূর্ণ ফ্রি এবং গিটহাব (GitHub) অ্যাকাউন্টের সাথে কানেক্ট করে এক ক্লিকেই লাইভ ওয়েবসাইট সেটআপ করা যায়।
ডিপ্লয় করার প্রসেস:
- আপনার কোড ফাইলগুলো গিটহাব-এ একটি নতুন রিপোজিটরিতে পুশ করুন।
- Vercel.com এ গিয়ে আপনার গিটহাব অ্যাকাউন্ট দিয়ে লগইন করুন।
- Import Project এ ক্লিক করে আপনার রিপোজিটরি সিলেক্ট করুন।
- Deploy বাটনে ক্লিক করুন।
মাত্র ১ মিনিটের মধ্যে Vercel আপনাকে একটি লাইভ পাবলিক সাবডোমেইন (your-app.vercel.app) দিয়ে দেবে। এর পর থেকে গিটহাবে কোড আপডেট করলেই আপনার লাইভ সাইট অটোমেটিক আপডেট হয়ে যাবে।
২. সুপারবেস (Supabase): ব্যাকএন্ডের হেডেক দূর করা
আমাদের অ্যাপে ইউজাররা সাইন-আপ করতে পারবে এবং তাদের নিজস্ব ডাটা সেভ করতে পারবে। এর জন্য আমাদের দরকার একটি ডেটাবেস। কোনো জটিল নোড বা পাইথন ব্যাকএন্ড না লিখে আমরা ব্যবহার করব Supabase (যা চমত্কার একটি ফায়ারবেস অল্টারনেটিভ)।
আপনার Supabase ড্যাশবোর্ডে গিয়ে একটি প্রজেক্ট তৈরি করুন। এবার Cursor-এর চ্যাটে গিয়ে লিখুন:
"I have created a Supabase project. Guide me step by step on how to connect Supabase CDN to my HTML page. Then write a login and signup script in my JavaScript. When a user signs up with email and password, save their details in Supabase auth and redirect them to a dashboard page."
এআই আপনাকে সঠিক স্ক্রিপ্ট ট্যাগ এবং সাইন-আপ লজিকের কোড লিখে দেবে। আপনাকে শুধু Supabase ড্যাশবোর্ড থেকে আপনার URL এবং Anon Key কপি করে এনে কোডে বসাতে হবে।
৩. পেইড গেটিং (Premium Gate) এবং মেম্বারশিপ লজিক
ধরুন আপনি একটি কালার পিকার বা ইউআই টুল তৈরি করেছেন। আপনি চান ফ্রি ইউজাররা ৫টি পর্যন্ত কালার সেভ করতে পারবে এবং তার চেয়ে বেশি সেভ করতে চাইলে সাবস্ক্রিপশন বা ওয়ান-টাইম পেমেন্ট করতে হবে।
এই প্রিমিয়াম গেটিং লজিকটি এআই দিয়ে তৈরি করার প্রম্পট স্টাইল:
"Implement a premium gate logic in our save color function. Check if the logged-in user has saved 5 colors already. If they have, prevent saving more colors and pop up a modal that says 'Upgrade to Premium'. Check their user profile metadata in Supabase to verify if the user's is_premium status is true. If it is true, bypass the limit."
এআই এই পুরো অথরাইজেশন চেক এবং মেম্বারশিপ গেটের জাভাস্ক্রিপ্ট কোড লিখে দেবে। আপনার পেইড মেম্বারশিপ অ্যাপ এখন পুরোপুরি রেডি!
৪. ভাইব কোডিংয়ের পরবর্তী পদক্ষেপ
ভাইব কোডিং কোনো ম্যাজিক নয়, এটি একটি নতুন ধরনের কোলাবোরেশন। এআই আপনার কোডিংয়ের কাজকে সহজ করেছে, কিন্তু বিজনেসের আইডিয়া, চমৎকার ইউআই ডিজাইন এবং ইউজার এক্সপেরিয়েন্সের দায়িত্ব কিন্তু আপনারই।
ডিজাইনারদের জন্য এআই এখন একটি ক্যানভাসকে জীবন্ত করার নিখুঁত ব্রাশ। এখন আর ডেভেলপারদের ওপর নির্ভরশীল হয়ে বসে থাকতে হবে না। আজই আপনার পছন্দের প্রজেক্ট নিয়ে ভাইব কোডিং শুরু করে দিন।
ধন্যবাদ সবাইকে পুরো সিরিজে সাথে থাকার জন্য।
এই সিরিজের অন্যান্য পর্বগুলো:
- 🔗 পর্ব ১: ফিগমা ফাইল থেকে ফুল-ফাংশনাল কোড: ভাইব কোডিংয়ের সূচনা
- 🔗 পর্ব ২: Cursor ও Claude ব্যবহার করে ২ ঘণ্টায় ক্রোম এক্সটেনশন বানানোর প্র্যাক্টিক্যাল গাইড
- 🔗 পর্ব ৩: এআই কে দিয়ে ফ্রন্টএন্ড কোডিং ও অ্যানিমেশন ডেব ক্র্যাশ কোর্স
- 📌 পর্ব ৪ (আপনি এখানে আছেন): ভিজিটর থেকে পেইড মেম্বার: ভারсел ও সুপারবেস দিয়ে ওয়েব অ্যাপ ডিপ্লয়মেন্ট