HomeConnect Frontend হলো একটি অত্যাধুনিক ওয়েব অ্যাপ্লিকেশন যা ব্যবহারকারীদের প্রপার্টি কেনা, বেচা এবং ভাড়া নেওয়ার জন্য একটি দৃষ্টিনন্দন এবং ইউজার-ফ্রেন্ডলি ইন্টারফেস প্রদান করে। এটি Next.js 15 (App Router) ব্যবহার করে তৈরি করা হয়েছে, যা দ্রুত লোডিং স্পিড এবং এসইও (SEO) অপ্টিমাইজেশন নিশ্চিত করে।
আমরা ফ্রন্টএন্ডে ইন্ডাস্ট্রির সেরা টুল এবং লাইব্রেরি ব্যবহার করেছি:
- Framework: Next.js 15 (React 19)
- Build Tool: Turbopack (দ্রুত ডেভেলপমেন্ট এবং বিল্ডের জন্য)
- Language: TypeScript
- Styling: Tailwind CSS (কাস্টম ডিজাইন সিস্টেম)
- UI Components: Shadcn/UI (Radix UI ভিত্তিক এক্সেসিবল কম্পোনেন্ট)
- State Management: Redux Toolkit & RTK Query
- Form Handling: React Hook Form + Zod Validation
- Map Integration: Leaflet (OpenStreetMap)
- Icons: Lucide React
আমাদের ফ্রন্টএন্ড প্রজেক্টটি Next.js App Router স্ট্রাকচার অনুসরণ করে।
src/app: অ্যাপ্লিকেশনের সব রাউট এবং পেজ এখানে থাকে।(main): পাবলিক পেজসমূহ (যেমন: হোম, প্রপার্টি লিস্ট, ব্লগ)।(auth): লগইন এবং সাইনআপ পেজ।dashboard: প্রোটেক্টেড ইউজার ড্যাশবোর্ড (Tenant এবং Landlord এর জন্য আলাদা ভিউ)।
src/components: রিইউজেবল ইউআই কম্পোনেন্ট (Button, Card, Modal, Navbar)।src/redux: গ্লোবাল স্টেট ম্যানেজমেন্ট (User Session, API Cache)।src/lib/api: ব্যাকএন্ডের সাথে কমিউনিকেশনের জন্য এপিআই ফাংশন।
ব্যবহারকারীরা তাদের পছন্দমতো প্রপার্টি খুঁজতে পারেন।
- ফিল্টারিং: লোকেশন, দাম, বেডরুম সংখ্যা, প্রপার্টি টাইপ ইত্যাদি দিয়ে ফিল্টার করার সুবিধা।
- ম্যাপ ভিউ: ম্যাপের মাধ্যমে এরিয়াভিত্তিক প্রপার্টি দেখা।
- লিস্টিং টাইপ: Rent (ভাড়া) এবং Sale (বিক্রয়) এর জন্য আলাদা ট্যাব।
রোল-ভিত্তিক (Role-based) ডায়নামিক ড্যাশবোর্ড:
- Landlord Dashboard: নিজের প্রপার্টি ম্যানেজ করা, নতুন প্রপার্টি অ্যাড করা, ভাড়াটিয়ার অ্যাপ্লিকেশন দেখা।
- Tenant Dashboard: বুকিং রিকোয়েস্ট দেখা, পেমেন্ট হিস্ট্রি চেক করা, ফেভারিট প্রপার্টি লিস্ট।
- لینڈলর্ডরা ছবি, ভিডিও, ফ্লোর প্ল্যান এবং বিস্তারিত তথ্যসহ প্রপার্টি পোস্ট করতে পারেন।
- ফর্ম ভ্যালিডেশনের মাধ্যমে সঠিক তথ্য নিশ্চিত করা হয়।
- ইউজাররা সরাসরি ক্যালেন্ডার থেকে ডেট সিলেক্ট করে বুকিং করতে পারেন।
- স্ট্রাইপ (Stripe) ইন্টিগ্রেশনের মাধ্যমে নিরাপদ পেমেন্ট প্রসেস সম্পন্ন হয়।
- মোবাইল, ট্যাবলেট এবং ডেস্কটপ - সব ডিভাইসেই সুন্দরভাবে দেখার জন্য অপ্টিমাইজড।
আমরা Redux Toolkit এবং RTK Query ব্যবহার করেছি যা অ্যাপ্লিকেশনের পারফরম্যান্স অনেক বাড়িয়ে দেয়।
- Auth Slice: ইউজারের লগইন স্ট্যাটাস এবং টোকেন ম্যানেজ করে।
- RTK Query: সার্ভার ডাটা ক্যাশিং (Caching) করে, ফলে একই ডাটা বারবার লোড করতে হয় না। যেমন - একবার প্রপার্টি লিস্ট লোড হলে তা ক্যাশে থেকে যায় এবং পেজ নেভিগেশন ফাস্ট হয়।
TypeScript এর ব্যবহারের ফলে আমাদের কোড অনেক বেশি এরর-মুক্ত। src/types/property.types.ts ফাইলে আমাদের সব গুরুত্বপূর্ণ টাইপ ডেফিনিশন আছে।
PropertyResponse: এপিআই থেকে আসা প্রপার্টি ডাটার স্ট্রাকচার।CreatePropertyData: নতুন প্রপার্টি তৈরির জন্য ডাটা মডেল।PropertyFilters: সার্চ ফিল্টারের টাইপস।
- AI Integration (Future Scope): আমাদের সিস্টেমে AI ভিত্তিক প্রপার্টি রিকমেন্ডেশন এবং প্রাইস প্রেডিকশন যুক্ত করার পরিকল্পনা ও গঠন আছে।
- SEO Friendly: Next.js এর সার্ভার সাইড রেন্ডারিং (SSR) এর কারণে সার্চ ইঞ্জিনে ভালো র্যাঙ্কিং পাওয়া সহজ।
- Real-time Feedback: টোস্ট নোটিফিকেশন (Sonner) এর মাধ্যমে ইউজার প্রতিটি অ্যাকশনের ফিডব্যাক পান।
HomeConnect ফ্রন্টএন্ড একটি আধুনিক, দ্রুত এবং ইউজার-কেন্দ্রিক অ্যাপ্লিকেশন। এর ক্লিন কোড আর্কিটেকচার এবং কম্পোনেন্ট-ভিত্তিক ডিজাইন প্রজেক্টটিকে বিশ্ববিদ্যালয়ের ডিফেন্স এবং রিয়েল-লাইফ ব্যবহারের জন্য একটি আদর্শ উদাহরণ হিসেবে উপস্থাপন করে।