توسعه‌دهنده فرانت‌اند React/Tailwind/Redux

شرح وظایف توسعه‌دهنده فرانت‌اند این سند شامل شرح کامل و دقیق وظایف توسعه‌دهنده فرانت‌اند برای تکمیل و بهبود وب‌سایت است. تمامی بخش‌ها باید مطابق طراحی، الزامات فنی، و استانداردهای ذکر شده پیاده‌سازی شوند و هیچ موردی نباید ناقص یا مبهم باقی بماند. 1. ایجاد و پیاده‌سازی صفحه گالری شخص با نمایش لیست تصاویر و ویدئوهای کاربر، همراه با قابلیت اسکرول بی‌نهایت و بارگذاری تنبل (Lazy Loading). 2. افزودن قابلیت ویرایش محتوای تولید شده (تغییر نام، توضیحات و تگ‌ها) با ذخیره‌سازی فوری (Real-time Update). 3. افزودن صفحه و بخش «آپدیت‌ها» برای نمایش تغییرات نسخه‌های جدید سایت و اطلاعیه‌ها، با دریافت اطلاعات از API بک‌اند. 4. پیاده‌سازی حالت دارک و لایت با ذخیره وضعیت انتخاب‌شده در LocalStorage و همگام‌سازی این وضعیت پس از ورود کاربر. 5. افزودن دکمه «کمک» که با کلیک، پنجره راهنما یا FAQ را باز کند. اتصال بکگراند صفحه اصلی به بک‌اند و دریافت آدرس تصویر به‌صورت داینامیک از API. 6. اتصال تمامی کامپوننت‌های صفحه به بک‌اند جهت نمایش داده‌های زنده. اتصال دکمه منو به سیستم ناوبری صفحات به‌صورت کامل و بدون خطا. 7. اصلاح استایل فوتر طبق فایل Figma و حذف خط اضافی زیر فوتر در تمام رزولوشن‌ها. افزودن شرط نمایش دکمه «ورود/لاگین» در صورت لاگین نبودن کاربر. 8. تکمیل و اصلاح آیکون‌های منو در حالت موبایل مطابق طراحی. اتصال صفحه به بک‌اند برای دریافت و نمایش مقالات و اخبار. 9. پیاده‌سازی (Lazy Loading) و صفحه‌بندی (Pagination) برای مقالات. جایگزینی آیکون سایت با نسخه صحیح و بهینه. 10. افزودن تگ‌های سئو (SEO Tags) در هدر سایت. 11. اتصال بخش پیام‌ها در داشبورد به بک‌اند (dashboard/messages). 12. عملکرد صحیح دکمه خروج در داشبورد (هدایت به صفحه لاگین پس از Logout). 13. افزودن امکان ورود با ایمیل و رمز عبور در کنار ورود با شماره و کد SMS. 14. افزودن بخش «Runaway» با تمامی موارد موجود در اندپوینت‌های بک‌اند. 15. پنل مدیریت بید به صورت کامل دیزاین و پیاده سازی شود مهارت های مورد نیاز • تسلط کامل بر React.js و ساختار کامپوننت‌های تابعی (Functional Components). • تجربه کار با Tailwind CSS برای استایل‌دهی سریع و بهینه. • آشنایی کامل با Redux Toolkit و پیاده‌سازی مدیریت حالت (State Management). • تجربه کار با RTK Query برای مدیریت درخواست‌های API و داده‌های کش‌شده. • رعایت اصول کدنویسی تمیز (Clean Code) و مستندسازی کامل کد. • رعایت ساختار پوشه‌بندی ماژولار و استاندارد در پروژه. • نوشتن کد واکنش‌گرا (Responsive) برای نمایش صحیح در همه دستگاه‌ها. • بهینه‌سازی عملکرد کامپوننت‌ها و جلوگیری از رندر غیرضروری. • مدیریت کامل خطاها در سطح UI و نمایش پیام مناسب به کاربر. • همکاری نزدیک با تیم بک‌اند برای هماهنگی APIها و فرمت داده‌ها. • اجرای تست دستی (Manual Testing) و در صورت امکان تست خودکار (Automated Testing) قبل از تحویل. • پوشش تمامی حالت‌های خطا (Error Handling) برای سناریوهای بدون اینترنت، API Down یا داده ناقص. • رعایت کامل طراحی و ماکت‌ها (Pixel Perfect) بر اساس فایل‌های Figma. شرط همکاری 🔹 توجه: تنها در صورتی درخواست همکاری ارسال کنید که: • توانایی کار گروهی و تعامل مؤثر با اعضای تیم را داشته باشید. • با دریافت بازخوردهای مکرر و اعمال تغییرات متعدد در کد یا طراحی، مشکلی نداشته باشید. • آماده باشید تا تا زمان تأیید نهایی، هر بخشی را بر اساس نیاز پروژه اصلاح یا بازطراحی کنید. در غیر این صورت، لطفاً از ارسال درخواست همکاری خودداری کنید.