زبانجو — پلتفرم جستجو و رزرو کلاس زبان

چالش اصلی

زبانجو یک پلتفرم برای پیدا کردن و ثبت‌نام در کلاس‌های زبان است که با هدف ایجاد ارتباط میان زبان‌آموزان و آموزشگاه‌ها طراحی شده است.

در این پروژه مسئولیت توسعه به‌صورت کامل بر عهده من بود و پروژه از ابتدا تا انتها به‌صورت Full-Stack توسعه داده شد؛ از طراحی UI و UX و تعریف Featureها و جریان‌های کاربری گرفته تا توسعه فرانت‌اند، طراحی API، منطق بک‌اند، دیتابیس و پنل‌های مدیریتی.

یکی از ویژگی‌های اصلی پروژه، وجود چند نوع کاربر و پنل متفاوت بود. به همین دلیل معماری سیستم باید به‌گونه‌ای طراحی می‌شد که هر نقش بتواند امکانات و دسترسی‌های مخصوص خود را داشته باشد.

پنل‌های مختلف سیستم

برای مدیریت نقش‌ها و نیازهای مختلف کاربران، چند محیط مجزا در پروژه طراحی و پیاده‌سازی شد:

پنل کاربری

زبان‌آموزان از طریق پنل کاربری می‌توانند اطلاعات حساب خود را مدیریت کرده و فرآیندهای مربوط به کلاس‌ها و ثبت‌نام را دنبال کنند.

پنل مدیریت آموزشگاه

یکی از بخش‌های اصلی پروژه، پنل اختصاصی آموزشگاه‌ها بود.

این پنل برای مدیریت اطلاعات آموزشگاه، کلاس‌ها، دوره‌ها و داده‌های مرتبط با فعالیت آموزشگاه در پلتفرم طراحی شد.

هدف این بود که آموزشگاه تنها یک ارائه‌دهنده اطلاعات ثابت نباشد و بتواند بخش‌های مختلف مربوط به کلاس‌ها و فعالیت خود را از طریق پنل مدیریت کند.

پنل مدیریت سیستم

در کنار پنل کاربران و آموزشگاه‌ها، یک پنل مدیریتی برای مدیریت کلی پلتفرم نیز طراحی شد.

این بخش برای مدیریت داده‌ها، کاربران، آموزشگاه‌ها و کنترل بخش‌های مختلف سیستم در نظر گرفته شد.

وجود این سه سطح مدیریتی باعث شد پروژه عملاً با یک سیستم چندنقشی و Role-based Access مواجه باشد و مدیریت دسترسی‌ها به یکی از بخش‌های مهم معماری پروژه تبدیل شود.

طراحی UI و UX

طراحی UI و UX پروژه به‌صورت کامل توسط خودم انجام شد.

از طراحی ساختار صفحات و مسیرهای کاربری گرفته تا طراحی کامپوننت‌ها، فرم‌ها، جداول، پنل‌ها و جزئیات تعاملی رابط کاربری، همه بخش‌ها متناسب با نیازهای پروژه طراحی و پیاده‌سازی شدند.

برای ساخت رابط کاربری از Nuxt UI و Tailwind CSS استفاده شد و ساختار کامپوننت‌ها به‌گونه‌ای توسعه داده شد که در بخش‌های مختلف پروژه قابلیت استفاده مجدد داشته باشند.

توسعه Full-Stack

زبانجو به‌صورت کامل به‌عنوان یک پروژه Full-Stack توسعه داده شد.

در سمت Frontend، صفحات، کامپوننت‌ها، فرم‌ها، تعاملات کاربری و جریان‌های مختلف سیستم پیاده‌سازی شدند.

در سمت Backend نیز APIها، منطق تجاری، اعتبارسنجی داده‌ها، احراز هویت، مدیریت دسترسی‌ها و ارتباط با Database توسعه داده شدند.

به این ترتیب Frontend و Backend پروژه به‌صورت یکپارچه طراحی شدند و Featureهای مختلف از رابط کاربری تا لایه داده به‌صورت کامل توسط خودم پیاده‌سازی شدند.

معماری Backend و Database

برای Backend از قابلیت‌های Server-side در Nuxt و Nitro استفاده شد.

ارتباط با Database توسط Prisma ORM انجام شد و ساختار دیتابیس برای موجودیت‌های مختلف سیستم و روابط میان آن‌ها طراحی شد.

در این بخش مفاهیمی مانند:

• طراحی مدل‌های دیتابیس
• روابط بین موجودیت‌ها
• Migration
• Seed
• Query و مدیریت داده‌ها
• طراحی API
• اعتبارسنجی ورودی‌ها

به‌صورت عملی در پروژه مورد استفاده قرار گرفتند.

برای اعتبارسنجی داده‌ها نیز از Zod استفاده شد.

سیستم احراز هویت و دسترسی

به دلیل وجود چند نوع کاربر و چند پنل مدیریتی، سیستم Authentication و Authorization از اهمیت بالایی برخوردار بود.

فرآیند ورود کاربران، مدیریت Session، Token و سطح دسترسی هر نقش در Backend و Frontend مدیریت شد.

این ساختار باعث شد هر کاربر بر اساس Role خود تنها به بخش‌ها و قابلیت‌هایی که مجاز به استفاده از آن‌هاست دسترسی داشته باشد.

سیستم نقشه و موقعیت مکانی

از آنجا که یکی از قابلیت‌های اصلی زبانجو پیدا کردن آموزشگاه‌ها و کلاس‌های زبان است، قابلیت‌های مرتبط با موقعیت مکانی و نقشه نیز در پروژه مورد توجه قرار گرفت.

برای این بخش از ابزارهایی مانند MapLibre GL، OpenLayers و Neshan Maps استفاده شد تا امکان نمایش موقعیت آموزشگاه‌ها و تعامل کاربر با داده‌های مکانی فراهم شود.

مدیریت محتوا

برای بخش‌های محتوایی پروژه از Nuxt Content و MDC استفاده شد.

همچنین برای ایجاد و مدیریت محتوای ساختاریافته و ویرایش محتوای متنی، ابزارهایی مانند TipTap در پروژه مورد استفاده قرار گرفتند.

Progressive Web App

پروژه با در نظر گرفتن قابلیت‌های Progressive Web App توسعه داده شد و زیرساخت PWA با استفاده از @vite-pwa/nuxt در نظر گرفته شد.

این ساختار امکان ارائه تجربه‌ای نزدیک‌تر به یک اپلیکیشن نصب‌شده را فراهم می‌کند و قابلیت‌هایی مانند Service Worker و مدیریت رفتار اپلیکیشن در محیط مرورگر را در اختیار پروژه قرار می‌دهد.

SEO و Open Graph

سئوی فنی پروژه نیز در کنار توسعه Featureهای اصلی مورد توجه قرار گرفت.

برای این بخش از ابزارهایی مانند Nuxt SEO، Nuxt Schema.org و Nuxt OG Image استفاده شد.

همچنین ساختار پروژه با در نظر گرفتن Metadata، اطلاعات ساختاریافته و قابلیت‌های مرتبط با موتورهای جستجو توسعه داده شد.

سیستم Open Graph نیز می‌تواند برای صفحات مختلف بر اساس داده‌های همان صفحه، تصویر مناسب تولید کند و نیازی به ساخت دستی یک تصویر برای تک‌تک صفحات وجود نداشته باشد.

MCP و دسترسی Agentها

یکی دیگر از بخش‌های جالب پروژه استفاده از Nuxt MCP Toolkit بود.

این بخش با هدف فراهم کردن ساختاری برای تعامل ابزارهای هوش مصنوعی و Agentها با قابلیت‌های پروژه در نظر گرفته شد.

این تجربه در ادامه آشنایی با معماری Agentها و MCP، امکان بررسی این موضوع را فراهم کرد که چگونه می‌توان قابلیت‌های یک وب‌سایت را به‌شکل ساختاریافته در اختیار Agentها قرار داد.

نتیجه

زبانجو یکی از پروژه‌های Full-Stack گسترده‌ای بود که در آن مسئولیت توسعه محصول از طراحی تا پیاده‌سازی فنی را بر عهده داشتم.

از طراحی UI و UX، تعریف Featureها و جریان‌های کاربری گرفته تا توسعه Frontend، Backend، API، Database، Authentication، پنل کاربری، پنل آموزشگاه و پنل مدیریت سیستم، بخش‌های اصلی پروژه به‌صورت یکپارچه توسعه داده شدند.

همچنین قابلیت‌هایی مانند نقشه و موقعیت مکانی، PWA، SEO، Open Graph، مدیریت محتوا و MCP نیز در معماری پروژه مورد توجه قرار گرفتند.

نسخه‌ای که در حال حاضر برای نمایش در دسترس است یک Demo از پروژه است و نسخه اصلی محصول همچنان در حال توسعه بوده و هنوز به‌صورت عمومی Deploy نشده است.