از پشت صفحهی کد تا تجربهی کاربری روان
توسعهی فرانتاند برای من فقط نوشتن کد نیست؛ تلاشیه برای اینکه یه ایده رو تبدیل کنم به چیزی که کاربر باهاش راحت باشه، سریع باشه، و درست کار کنه. تمرکز اصلیام روی Next.js، React و TypeScript با استایلدهی Tailwind CSSه، و بخش قابلتوجهی از کارهام حول اپلیکیشنهای فارسیزبان و راستچین (RTL) میچرخه؛ چیزی که خیلی وقتها در ابزارها و رفرنسهای آماده کمتر دیده میشه و نیاز به دقت بیشتری داره.
این روزها روی یه اپلیکیشن اجتماعی و رویدادمحور کار میکنم؛ چیزی در همون فضای اینستاگرام ولی با تمرکز روی رویدادها. طراحی رو توی Figma دنبال میکنم و برای رفرنس گرفتن از تجربهی کاربری اپهای محبوب هم استفاده میکنم، چون معتقدم بهترین یادگیری از دیدن چیزهاییه که واقعاً کار میکنن.
چند نمونه از کارهایی که اخیراً انجام دادم:
رفع باگ صفحهی دنبالکنندگان توی صفحهی Followers یه مشکل layout پیدا کردم؛ کانتینر اصلی بهجای اینکه محتوا رو زیر هم بچینه، همهچیز رو کنار هم میذاشت و هدر از صفحه بیرون میزد. مشکل از نبود flex-col روی کانتینر flex بود. یه اصلاح کوچیک، اما تأثیرش روی تجربهی کاربری زیاد بود.
پیادهسازی کامل صفحهی «رویدادهای ذخیرهشده» این یکی از فیچرهایی بود که از صفر تا صد ساختم؛ با همون ساختار پروژه که همیشه دنبالش میکنم (جداسازی _components, _types, (pages)):
هدر صفحه با دکمهی بازگشت
تبهای دستهبندی رویداد (همه، افتتاحیه، موسیقی زنده، تخفیفها، ورکشاپها)
کارت رویداد با بج دستهبندی، عنوان، تاریخ و ساعت، لوکیشن، تصویر و حتی کانتداون
کامپوننت لیست برای رندر همهی کارتها
تایپهای TypeScript مخصوص این بخش
بهبود ناوبری دکمهی برگشت که قبلاً فقط یه ظاهر بود، تبدیل شد به یه Link واقعی که کاربر رو درست به صفحهی اصلی میبره؛ یه تغییر ساده که تجربهی ناوبری رو منطقیتر کرد.
چرا این کار رو دوست دارم
هر چقدر بیشتر روی این پروژه کار میکنم، بیشتر میفهمم که فرانتاند خوب یعنی توجه به جزئیاتی که کاربر شاید هیچوقت متوجهشون نشه، اما اگه نباشن، حسش میکنه. همین باگهای کوچیک و فیچرهای بهظاهر سادهان که تفاوت بین یه اپ معمولی و یه اپ دلچسب رو میسازن.
این مسیر ادامه داره، و من همچنان دارم یاد میگیرم، میسازم و بهتر میکنم.