در این ماژول، از شما انتظار می‌رود که پروژه فرانت‌اند را با دقت بالا و همراه با پیاده‌سازی طراحی خواسته‌شده و عملکردهای JavaScript پیشرفته به‌خوبی انجام دهید. تمرکز اصلی این ماژول بر روی پیاده‌سازی دقیق طراحی است و توجه به جزئیات در فرآیند پیاده‌سازی طراحی اهمیت زیادی دارد.
در این ماژول، شما باید توانایی خود را در ایجاد یک تجربه کاربری بی‌نقص به نمایش بگذارید. این شامل پیاده سازی دقیق طراحی ارایه شده، و پیاده‌سازی عملکردهای پیچیده با JavaScript است. شما باید قادر باشید تا تمامی ویژگی‌های درخواستی را با بالاترین کیفیت پیاده‌سازی کنید و تجربه‌ای جذاب و روان برای کاربر ایجاد نمایید.
پروژه‌های جهانی
سال ۲۰۲۴
در این پروژه از رقابت‌کنندگان خواسته شده بود که رابط کاربری (UI) را همراه با افکت‌ها و هاورهایی که در قالب فایل‌های ویدیویی مختلف به آن‌ها توضیح داده شده بود، و همچنین قابلیت‌های خاص در بخش‌های مختلف پیاده‌سازی کنند. هدف این پروژه، طراحی یک رابط کاربری جذاب و تعامل‌پذیر است که شامل افکت‌های بصری و تعاملات پویا با کاربر باشد.
رقابت‌کنندگان باید توانایی خود را در پیاده‌سازی دقیق طراحی‌ها، اعمال افکت‌ها و ترنزیشن‌های روان و تعاملات هاور (hover) جالب به نمایش بگذارند. این پروژه شامل پیاده‌سازی ویژگی‌های خاص مانند پاسخگویی مناسب، ایجاد و رعایت موارد دسترس پذیری برای افراد خاص، افکت‌های ویژه برای دکمه‌ها و لینک‌ها و ایجاد تجربه کاربری بدون نقص است.
فریم‌ورک‌های مجاز
JavaScript
- ReactJS
- VueJS
- Next.js
- Gatsby
- Vite
- Angular
CSS
- Tailwind CSS
- Bootstrap
چالش‌های این ماژول
- دقت به جزئیات طراحی: مهم‌ترین چالش شما در این ماژول، پیاده‌سازی دقیق رابط کاربری (UI) مطابق با اسکرین‌شات‌های داده‌شده است. شما باید طراحی را با دقت بسیار بالا و به‌طور کامل مشابه با نمونه‌های ارائه‌شده انجام دهید.
- دسترس‌پذیری (Accessibility): شما باید اطمینان حاصل کنید که پیاده سازی شما به گونه‌ای توسعه یافته که تمامی کاربران، از جمله افراد دارای محدودیت‌های خاص، بتوانند از آن به راحتی استفاده کنند. این چالش نیازمند توجه به قابلیت دسترسی و رعایت اصولی است که استفاده از وب را برای همه آسان‌تر کند.
- استفاده محدود از JavaScript: در صورتی که از شما خواسته شود تا عملکردهای جزئی (Functionality) را پیاده‌سازی کنید، می‌توانید در صورت مجاز بودن، از جاوااسکریپت برای این منظور استفاده کنید. البته باید دقت کنید که استفاده از جاوااسکریپت محدود به موارد خاص باشد و از آن به طور معقول استفاده کنید.
نرم‌افزارهای موجود بر روی سیستم مسابقه
- Visual Studio Code
- PHPStorm
- MySQL Workbench
- Composer
- Node.js (with npm)
- PHPmyAdmin
- FileZilla Client
- Firefox Developer Edition
- WinSCP
- Eclipse PHP incl
- Sublime Text
- PuTTY utilities
- Gimp
- PHPUnit
- Zeal Doc
- Postman
- DevDocs
- Vue-cli
- Git
نرم‌افزارهای موجود بر روی سرور مسابقه
- Git
- PHPUnit
- Node.js with npm
- Composer
- Vue Cli
افزونه‌های Visual Studio Code
- Prettier – Code Formatter
- PHP Intelephense
- Laravel Blade Snippets
- Laravel Extra Intellisense
- Vue – Official
- ES7 + React/Redux/React-Native snippets
- Angular Language Service
افزونه‌های مرورگر (Firefox و Chrome)
- aXe by Deque
- Angular DevTools
- React Developer Tools
- Vue.js devtools