এই সাইটটা কী দিয়ে বানানো

App Router, server component, আগে থেকে তৈরি রাখা পাতা, আর ফর্মের পেছনের route handler।

পাতা তৈরি আর রাউটিং এক জায়গাতেই, তাই ফর্ম চালাতে আলাদা কোনো API সার্ভিস লাগে না।

পুরো সাইটের চেহারা যে component দিয়ে লেখা।

বাকি সব কিছু এই component-এর নিয়ম ধরেই লেখা।

লেখা, component আর server action, সবখানে type দিয়ে লেখা।

লেখায় ভুল থাকলে লেখার সময়েই ধরা পড়ে, সাইটে গিয়ে নয়।

স্টাইলের ভিত। config/design-tokens.ts-এর রং আর মাপ এখান থেকেই theme-এ যায়।

স্টাইল থাকে কোডের ঠিক পাশেই। প্রতিটা component নিজের চেহারা নিজের সাথে রাখে, এক পাতার স্টাইল আরেক পাতায় গিয়ে গোলমাল করে না।

একটা component-এর নিজের class আর বাইরে থেকে দেওয়া class মেলানোর সময় কোনটা থাকবে ঠিক করে।

এটা না থাকলে component-এর class আর বাইরের class চুপচাপ টক্কর দেয়। কোনটা জিতবে, এটাই ঠিক করে।

বোতাম, কার্ডের মতো ছোট UI অংশগুলোর বিভিন্ন রূপ এখানে লেখা।

প্রতিটা component-এর সব রূপ এক জায়গায় লেখা থাকে, পুরো কোডে ছড়িয়ে থাকে না।

যে অল্প কয়েকটা অ্যানিমেশন CSS keyframe দিয়ে করা যায় না, সেগুলো।

শুধু যেটুকু CSS keyframe দিয়ে হয় না, সেটুকুর জন্য। বাকি সব অ্যানিমেশন CSS-এই।

ফর্মের তথ্য রাখা আর বারবার পাঠানো আটকাতে Firestore, ড্যাশবোর্ডে লগইনের জন্য Auth।

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

সার্ভার থেকে ডেটা লেখা, আর অ্যাডমিন কে তা চেনার custom claim।

যে লেখাগুলো ব্রাউজারের হাতে ছাড়া যায় না, আর যে claim দেখে ড্যাশবোর্ডে ঢুকতে দেওয়া হয়।

ফর্ম আসার খবর আর নিশ্চিত করার ইমেইল পাঠায়।

সোজা API দিয়ে ইমেইল যায়, দেখভাল করার মতো কোনো SMTP সার্ভার নেই।

প্রতিটা ফর্মের তথ্য আর সাইট চালুর সময় environment variable ঠিক আছে কি না দেখে।

একই schema ব্রাউজারেও ফর্ম যাচাই করে, সার্ভারেও। তাই দুই জায়গার নিয়ম কখনো আলাদা হয়ে যায় না।

সাইটের আইকনগুলো।

সব আইকন একই মাপে আঁকা, তাই পাতা বদলালে আইকন মোটা-চিকন হয়ে যায় না।

প্রযুক্তির তালিকায় ব্র্যান্ডগুলোর লোগো।

শুধু সেখানেই, যেখানে প্রযুক্তিটার নিজের লোগো দেখানোই ঠিক।