وب
اوستریا بلونا
وبسایت رستوران با منوی دیجیتال و فرم رزرو میز؛ ساختهشده با Next.js 16 و TypeScript
calendar_today
تاریخ انجام۱۴۰۵
timer
مدت زمانحدود یک هفته
person
نقش منطراح و توسعهدهنده فولاستک
business
کارفرماپروژه شخصی
درباره پروژه
وبسایت یک رستوران ایتالیایی با فضای گرم و طراحی مجلهای، که از ابتدا طوری ساختمش که قابل واگذاری به یک مجموعهی واقعی باشد: تمام اطلاعات رستوران و منو در دو فایل داده جمع شده و عنوان صفحه، فوتر، نشانهگذاری schema.org و محدودیتهای فرم رزرو همه از همانجا خوانده میشوند. بخش فنی جذاب پروژه برای من، منطق رزرو بود: یک تابع اعتبارسنجی مشترک که هم مرورگر برای بازخورد لحظهای اجرایش میکند و هم سرور برای تصمیم نهایی — پس قواعدی مثل تعطیلی دوشنبهها یا سقف ظرفیت میز در یک جا نوشته میشوند و هیچوقت از هم جدا نمیافتند.
تصاویر پروژه
تکنولوژیهای استفاده شده
codeNext.js 16
codeReact 19
codeTypeScript
codeTailwind CSS v4
ویژگیهای کلیدی
check_circleصفحهی اصلی با معرفی غذاهای شاخص، داستان رستوران، ساعات کاری و موقعیت مکانی
check_circleمنوی کامل دیجیتال، گروهبندیشده بر اساس وعده، همراه با برچسبهای رژیمی (گیاهی، بدون گلوتن و…)
check_circleفرم رزرو میز با اعتبارسنجی زنده و سانسهای متفاوت برای هر روز هفته
check_circleمسیر API اختصاصی برای ثبت رزرو، همراه با فیلد honeypot برای مقابله با رباتها
check_circleتصاویر با import استاتیک؛ Next خودش ابعاد و پلیسهولدر محو را میسازد و چیدمان هنگام لود تکان نمیخورد
check_circleتصویرسازیهای خطی SVG که منحنیهایشان از روابط هندسی محاسبه میشوند، نه حدسی
check_circleقابلیت ریبرند کامل فقط با ویرایش دو فایل داده و یک بلوک رنگ در CSS
چالشها
extensionنوشتن منطق اعتبارسنجی به شکلی که دقیقاً یک نسخه داشته باشد و هم در مرورگر و هم در سرور اجرا شود
extensionروبرو شدن با محدودیت فایلسیستم فقطخواندنی در میزبانی serverless — ترجیح دادم API صادقانه persisted: false برگرداند تا اینکه وانمود کند رزرو ذخیره شده
extensionحذف کامل جابجایی چیدمان (layout shift) در صفحهای که هجده عکس با حجم بالا دارد