MB
سایت فروش قهوه CoffeeStack با Next.js
CoffeeStack یک پروژه تمرینی-واقعی برای طراحی فروشگاه آنلاین قهوه است که با استفاده از Next.js (نسخه 15) و App Router توسعه یافته و شامل امکانات پیشرفته‌ای همچون مدیریت خرید، احراز هویت JWT، پنل مدیریت، سطح‌بندی کاربران و نقشه مکان‌یابی می‌باشد.
گالری تصاویر پروژه (8 اسلاید)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
تکنولوژی‌های استفاده‌شده
Next.js
App Router
CSS Modules
JWT
MongoDB
Mongoose
Leaflet
React Leaflet
AOS.js
Recharts
SweetAlert
React Select
Swiper
توضیحات فنی پروژه
این پروژه با هدف تمرین معماری فول‌استک در قالب یک سایت فروش قهوه طراحی شده است. CoffeeStack تنها یک پروژه فروشگاهی ساده نیست، بلکه شامل چالش‌های واقعی و امکانات پیشرفته‌ای است که آن را به نمونه‌ای کاربردی برای یادگیری و پیاده‌سازی ساختارهای حرفه‌ای تبدیل کرده است. این وب‌سایت با استفاده از **Next.js نسخه 15** و معماری **App Router** توسعه یافته و فرانت‌اند آن از **CSS Modules** برای استایل‌دهی کامپوننت‌محور بهره می‌برد. احراز هویت در این پروژه بر پایه **JWT** و با استفاده از کتابخانه‌های jsonwebtoken و bcryptjs پیاده‌سازی شده که امنیت را تضمین می‌کند. از جمله امکانات این پروژه می‌توان به موارد زیر اشاره کرد: - سیستم مدیریت سبد خرید - علاقه‌مندی‌ها و لیست محصولات منتخب کاربر - **پنل مدیریت** برای افزودن، ویرایش و حذف محصولات - سطح‌بندی بین **ادمین** و **کاربر عادی** - اتصال به **نقشه Leaflet** جهت نمایش فروشگاه‌ها و نمایندگی‌ها - استفاده از **Recharts** برای نمایش داده‌های آماری در داشبورد مدیریت - استفاده از **SweetAlert** برای هشدارهای زیبا و تعاملی - پیاده‌سازی انیمیشن با **AOS.js** - استفاده از **React Select** و **Swiper** برای تجربه کاربری بهتر در بخش فیلترها و نمایش اسلایدی محصولات سمت بک‌اند با استفاده از **MongoDB** (از طریق mongoose) به صورت کاملاً دینامیک پیاده‌سازی شده است و تمامی درخواست‌ها از طریق APIهای Server Actions یا Route Handlers مدیریت می‌شوند. این پروژه یکی از تمرین‌های جامع برای تسلط به ساخت اپلیکیشن‌های واقعی با Next.js محسوب می‌شود.