اپلیکیشن یادداشتبرداری
اپلیکیشن وب یادداشتبرداری مینیمال و ریسپانسیو (RTL)
این پروژه یک اپلیکیشن وب یادداشت (Note-Taking) مینیمال و ریسپانسیو است که با React پیادهسازی شده و بهصورت کامل از زبان فارسی و راستبهچپ (RTL) پشتیبانی میکند.
اپلیکیشن کاملاً سمت کلاینت اجرا میشود و دادهها تنها در localStorage ذخیره میشوند؛ بنابراین وابستگی به سرور یا دیتابیس ندارد.
ساختار شامل سایدبار برای مدیریت دستهبندیها و افزودن یادداشت جدید، و بخش اصلی برای نمایش، جستجو، فیلتر و مرتبسازی یادداشتهاست. در ویوهای کوچک، سایدبار با مودال جایگزین شده تا تجربه کاربری موبایل بهینه باشد.
تکنولوژیها
React 18Vite 4Context APIuseReducerreact-iconsCSS VariablesESLint
ویژگیها
- یادداشتها: ایجاد با عنوان، توضیح و دسته؛ ویرایش inline با ذخیره/لغو؛ حذف با تأیید؛ علامت انجامشده/انجامنشده؛ ثبت خودکار createdAt و updatedAt
- دستهبندیها: ساخت و حذف؛ اتصال به یادداشت؛ مرتبسازی الفبایی (locale فارسی)؛ ذخیره پایدار در localStorage
- جستجو، فیلتر و مرتبسازی: جستجو در عنوان، توضیح و دسته (غیرحساس به حروف)؛ فیلتر بر اساس دسته (همراه با «بدون دسته»)؛ مرتبسازی: جدیدترین، قدیمیترین، انجامشدهها اول
- تم تاریک: سوییچ در هدر؛ ذخیره تم در localStorage؛ CSS Variables و data-theme
- فارسی و RTL: lang="fa" و dir="rtl"؛ رابط کاربری کاملاً فارسی؛ تاریخ شمسی با toLocaleDateString("fa-IR")
نقش من در پروژه
Frontend Developer (React)
مسئول طراحی معماری state، پیادهسازی کامل رابط کاربری، پشتیبانی RTL، پیادهسازی Dark Mode، طراحی ریسپانسیو و مدیریت ذخیرهسازی سمت کلاینت.
چالشها و تمرکز پروژه
پیادهسازی رابط کاربری کامل فارسی و RTL بدون وابستگی به بکاند، مدیریت state و persistence تنها با localStorage، جایگزینی سایدبار با مودال در صفحات کوچک برای UX ریسپانسیو، پشتیبانی از جستجو، فیلتر و مرتبسازی در مدل دادهٔ صرفاً کلاینت
تصمیمهای فنی
Context API + useReducer برای state سراسری
بهجای Redux استفاده شد تا در عین سادگی، ساختار state قابل پیشبینی و متمرکز باقی بماند.
ذخیرهسازی سمت کلاینت با localStorage
انتخاب localStorage باعث حذف وابستگی به بکاند و سبک ماندن پروژه شد و آن را به یک SPA مستقل تبدیل کرد.
تفکیک لایههای UI، مودال و state
جداسازی واضح بین کامپوننتهای UI، سیستم مودال، کنترلهای هدر (جستجو، فیلتر، مرتبسازی، تم) و state در NotesContext برای خوانایی و قابلیت نگهداری.
استراتژی ریسپانسیو
در صفحات کوچک، سایدبار به مودال تبدیل شده تا بدون شلوغ شدن صفحه، تجربه کاربری حفظ شود.
راهحلها و بهینهسازیها
- متمرکزسازی state در NotesContext با useReducer برای بروزرسانیهای قابل پیشبینی
- فرمت تاریخ شمسی با toLocaleDateString("fa-IR") و چیدمان کامل RTL
- تم تاریک با CSS Variables و data-theme و ذخیره در localStorage
- جستجو، فیلتر و مرتبسازی صرفاً روی دادهٔ کلاینت برای بازخورد فوری
ملاحظات مهندسی
- عدم استفاده از بکاند بهصورت آگاهانه برای سادگی انتخاب شد؛ دادهها محدود به یک دستگاه است و بین دستگاهها همگام نمیشوند.
- استفاده از مودال بهجای سایدبار ثابت در صفحات کوچک، مقداری کشفپذیری را فدای چیدمان تمیزتر موبایل کرده است.
نتیجه
این پروژه نشاندهنده توانایی من در طراحی یک SPA ساختیافته با مدیریت state تمیز، معماری مقیاسپذیر کامپوننتها و پیادهسازی کامل رابط کاربری فارسی و RTL بدون وابستگی به بکاند است.
