Lingo Hub Academy 🎓

درباره پروژه

Lingo Hub Academy یک وب‌اپلیکیشن مدرن برای مدیریت و رزرو اتاق‌های آموزشی آکادمی زبان است. این پروژه به کاربران کمک می‌کند تا با یک تجربه کاربری ساده و فارسی‌محور، رزرو زمان‌های آموزشی را انجام دهند، وضعیت اتاق‌ها را مشاهده کنند و از امکانات داشبورد شخصی استفاده کنند.

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

امکانات اصلی

• ورود و ثبت‌نام کاربران
• مشاهده اتاق‌ها و وضعیت دسترسی آن‌ها
• رزرو زمان‌های مورد نظر برای آموزش یا جلسه
• مشاهده تاریخچه رزروها در داشبورد کاربری
• نمایش اخبار و اطلاعیه‌های آکادمی
• پشتیبانی از تم روشن/تاریک
• رابط کاربری فارسی و راست‌به‌چپ

چگونه کار می‌کند

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

تکنولوژی‌های به‌کاررفته

• React 19
• Vite
• React Router
• Tailwind CSS
• React Query
• React Hook Form
• Supabase
• Styled Components

راه‌اندازی در محیط توسعه

پیش‌نیازها

• Node.js نسخه 18 یا بالاتر
• npm یا pnpm

مراحل نصب

git clone https://github.com/your-username/lingo-hub.git
cd lingo-hub/frontend
npm install

تنظیم متغیرهای محیطی

برای اجرای صحیح پروژه، فایل محیطی زیر را ایجاد کنید:

# frontend/.env.local
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

اجرای پروژه در حالت توسعه

cd frontend
npm run dev

پس از اجرای دستور بالا، پروژه معمولاً در آدرس زیر در دسترس خواهد بود:

http://localhost:5173

دستورات مفید

cd frontend
npm run dev      # شروع سرور توسعه
npm run build    # ساخت نسخه Production
npm run lint     # اجرای ESLint
npm run preview  # پیش‌نمایش نسخه ساخته‌شده

ساختار پروژه

frontend/
  src/
    api/          # لایه دسترسی به بک‌اند
    features/     # ماژول‌های feature-based
    ui/           # کامپوننت‌های عمومی و قابل استفاده مجدد
    utils/        # ابزارهای کمکی
    pages/        # صفحات اصلی برنامه

نکات مهم برای توسعه‌دهندگان

• دسترسی به Supabase فقط از مسیرهای مربوط به سرویس‌ها در پوشه API انجام می‌شود.
• برای تبدیل داده‌ها بین فرمت snake_case و camelCase، از mapperها استفاده شود.
• برای داده‌های مبتنی بر کوئری از React Query و hookهای مرتبط استفاده شود.
• برای ظاهر پروژه از رنگ‌های متغییر با تم روشن/تاریک استفاده شود.

مشارکت

اگر مایل به مشارکت در این پروژه هستید، خوشحال می‌شویم Pull Request یا پیشنهادهای بهبود را بررسی کنیم.

سپاس

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