فود دلیوری — پلتفرم مدرن سفارش آنلاین غذا

نگاه کلی

فود دلیوری (BotoFood) یک پلتفرم مدرن سفارش آنلاین غذاست — ویترینی سریع و اپ‌مانند که کاربر در آن منو را می‌بیند، بر اساس دسته و آشپزی فیلتر می‌کند، جزئیات هر غذا را باز می‌کند و در چند کلیک سفارشش را ثبت می‌کند. ایده‌اش شبیه سرویس‌هایی مثل Uber Eats است؛ تمرکز روی سرعت، سادگی و حس خوب سفارش دادن، نه یک مارکت‌پلیس شلوغ و سنگین.

پروژه به‌صورت زنده روی https://food-gamma-sage.vercel.app/ منتشر شده و سورس آن در https://github.com/ArashDevArt/food در دسترس است.

کارفرما و چالش

خواسته‌ی پروژه روشن بود: یک فرانت‌اند فود دلیوری بسازیم که حس یک محصول واقعی را بدهد، نه یک قالب آماده. رابط کاربری باید یک منوی واقعی (بیش از ۱۵ غذا از آشپزی‌های بریتانیایی، چینی، خاورمیانه، مالزیایی و …) را با قیمت و تخفیف هر آیتم و یک سبد خرید پایدار مدیریت می‌کرد — و در عین حال به‌عنوان یک سایت استاتیک Next.js روی ورسل، فوق‌العاده سریع می‌ماند.

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

اهداف

• کشف سریع غذا از طریق «منو» و «دسته‌بندی‌ها»
• نمایش هر غذا با جزئیات کامل: قیمت، تخفیف، نوع آشپزی، مواد اولیه و دستور مرحله‌به‌مرحله
• سبد خرید بدون اصطکاک: افزودن، حذف، کم/زیاد کردن تعداد و مشاهده‌ی جمع کل در لحظه
• تجربه‌ی سریع و موبایل‌اول — خروجی استاتیک، بدون لودینگ‌های آزاردهنده
• کد تمیز و قابل نگهداری با Next.js و TypeScript، آماده‌ی دیپلوی روی ورسل

راه‌حل

اپ را با Next.js (Pages Router) و خروجی استاتیک (nextExport: true) ساختم؛ همه‌ی صفحات منو و جزئیات غذا در زمان بیلد پیش‌رندر می‌شوند و لود آنی دارند. ساختار UI حول سه ستون شکل گرفت: خانه (هیرو + چرا ما + راهنمای سفارش)، منو (گرید قابل فیلتر) و دسته‌بندی‌ها (مرور بر اساس آشپزی). برای سبد خرید هم یک Context سبک در React ساختم تا بج سبد، صفحه‌ی کارت و جمع کل بدون prop drilling و بدون استور خارجی، همیشه همگام بمانند.

استایل‌ها با CSS Modules به‌صورت اسکوپ‌شده برای هر کامپوننت نوشته شد؛ بدون هزینه‌ی ران‌تایم CSS-in-JS و با پالت بنفش/نارنجی که اجازه می‌دهد عکس غذاها قهرمان صفحه بمانند.

امکانات کلیدی

• منوی کامل با ۱۵+ غذا: بیف ولینگتون، اردک پکن، شکشوکا، لاکسا، رامن، بریانی، تاکو و …
• جزئیات هر غذا: معرفی، نوع آشپزی و نوع رسپی، سختی، زمان آماده‌سازی و پخت، تعداد نفرات، مواد اولیه و دستور گام‌به‌گام
• نمایش قیمت با بج تخفیف و محاسبه‌ی قیمت نهایی
• فیلتر دسته و آشپزی (/categories و فیلتر query روی /menu)
• سبد خرید سراسری با Context API: افزودن، کم/زیاد کردن تعداد، حذف آیتم و مشاهده‌ی جمع
• خلاصه‌ی تسویه با تعداد آیتم‌ها و مبلغ کل
• لایه‌ی ریسپانسیو با هدر چسبان، گرید کارت‌ها و ناوبری دسترس‌پذیر
• خروجی استاتیک برای ورسل — بدون هزینه‌ی سرور و تحویل آنی از CDN

طراحی

زبان بصری گرم و صمیمی انتخاب شد: کارت‌های سفید روی پس‌زمینه‌ی ملایم، گوشه‌های گرد، فضای خالی زیاد و رنگ بنفش برای اکشن‌ها. هیروی صفحه‌ی اصلی با تیتر درشت «BotoFood — Food Delivery and Takeout!» و تصویر شناور غذا، کاربر را مستقیم به «مشاهده همه» دعوت می‌کند. بلوک‌های «چرا ما؟» (سریع، بهترین رستوران‌ها، انتخاب شما، ۲۴/۷) با آیکون‌های ساده‌ی دو رنگ طراحی شد تا تمرکز روی عکس غذاها بماند. در موبایل، گرید به‌صورت مرتب جمع می‌شود و سبد خرید همیشه در دسترس می‌ماند.

توسعه

استک: Next.js (Pages Router) + TypeScript + React + CSS Modules. داده‌ها به‌صورت یک دیتاست تایپ‌شده‌ی لوکال (JSON منو) در زمان بیلد مصرف می‌شود؛ بدون API خارجی و بدون ناهماهنگی hydration. وضعیت سبد با یک CartContext تایپ‌شده و به‌سبک reducer مدیریت می‌شود و بین تغییر مسیرها در حافظه باقی می‌ماند. تصاویر از /public/images با lazy loading بومی سرو می‌شوند. خروجی بیلد یک export کاملاً استاتیک (_next/static + HTML) است که روی Vercel دیپلوی شده.

تصمیم‌های کلیدی فنی:

• Pages Router با getStaticProps و getStaticPaths برای منو و مسیرهای [id] — سئو-فرندلی و سریع
• CSS Modules (*.module.css) برای استایل اسکوپ‌شده — بدون ران‌تایم Tailwind و بدون نشت گلوبال
• اینترفیس‌های TypeScript برای Food و CartItem و Category — پراپ‌های سخت‌گیرانه در Card و Layout و Banner و Cart
• ترجیح Context API به Redux/Zustand — باندل سبک برای یک دامنه‌ی ساده‌ی سبد خرید
• ساختار دارایی آماده‌ی next/image و بریک‌پوینت‌های ریسپانسیو بدون وابستگی به فریم‌ورک اضافی

نتیجه

خروجی، یک فرانت‌اند آماده‌ی پروداکشن برای سفارش غذاست که مثل یک اپ واقعی رفتار می‌کند: کاربر می‌تواند بچرخد، فیلتر کند، رسپی را بخواند و سبدش را مدیریت کند بدون اینکه حس «سایت استاتیک» را بگیرد. این پروژه اصول فروشگاه اینترنتی — کاتالوگ، جزئیات، سبد، تسویه — را در یک کدبیس تمیز Next.js نشان می‌دهد که به‌راحتی می‌شود با API واقعی، احراز هویت یا درگاه پرداخت گسترشش داد. یک نمونه‌کار قوی برای هر رستوران، کلاد کیچن یا MVP مارکت‌پلیس غذا.