Getting Started

First, run the development server:

yarn install
yarn dev

Open http://localhost:3000 with your browser to see the result.

---

React , Next, zustand, @dnd-kit

---

Note

I did not have much time and was busy with life , I could only spare less than 8 hours for this.

---

📝 متن سوال مصاحبه - پروژه Trello Clone
عنوان پروژه: ساخت Trello Clone در ۱ روز
شرح پروژه:
شما باید یک نسخه ساده از Trello را در مدت ۱ روز پیاده‌سازی کنید. این پروژه برای ارزیابی مهارت‌های React شما طراحی شده است.


🎯 مرجع پروژه:
Demo زنده:
لینک مرجع : https://deluxe-llama-c34f7a.netlify.app
تمام ویژگی‌های موجود در این demo باید پیاده‌سازی شود
عملکرد کامل - همه چیز باید کار کند
UI/UX مشابه - طراحی مشابه با مرجع
ویژگی‌های مرجع:

- Board Management: نمایش یک برد ثابت به همراه امکان ویرایش عنوان آن  
- List Management: ایجاد، حذف، ویرایش عنوان و جابه‌جایی لیست‌ها با drag & drop  
- Card Management: ایجاد کارت، ویرایش عنوان و جابه‌جایی کارت‌ها بین لیست‌ها با drag & drop  
- Comments Modal: مدیریت کامنت‌های هر کارت (افزودن و مشاهده در modal اختصاصی)  
- Responsive Design: چیدمان واکنش‌گرا مناسب دسکتاپ (پشتیبانی پایه از موبایل)







⚙️ الزامات فنی:
تکنولوژی‌ها:
Next.js (الزامی)
TypeScript (الزامی)
SCSS (الزامی - فقط SCSS)
State Management (انتخاب آزاد - useState، useContext، Zustand، Redux یا هر روش دیگری که مناسب می‌دانید)
Drag & Drop (react-beautiful-dnd یا @dnd-kit)
Data Persistence (localStorage یا IndexedDB)
مدیریت داده‌ها:
تمام داده‌ها در سمت کلاینت مدیریت می‌شوند
نیازی به Backend نیست - همه چیز در localStorage یا state محلی
Data Persistence با localStorage برای ذخیره داده‌ها
State Management محلی برای مدیریت وضعیت اپلیکیشن
انتخاب روش state management بر عهده شماست - ممکن است نیازی به کتابخانه خارجی نباشد


🏗️ الزامات معماری و کد:
ساختار پروژه Next.js:
ساختار فولدر منطقی و قابل فهم
App Router
جداسازی concerns - UI از Logic جدا باشد
کامپوننت‌های قابل استفاده مجدد
Custom Hooks برای منطق پیچیده
سرویس‌ها و utilities جداگانه
API Routes برای مدیریت داده‌ها (اختیاری)
اصول SOLID:
Single Responsibility: هر کامپوننت یک مسئولیت
Open/Closed: قابل توسعه، بسته برای تغییر
Liskov Substitution: کامپوننت‌ها قابل جایگزینی
Interface Segregation: اینترفیس های کوچک و متمرکز
Dependency Inversion: وابستگی به abstractions
کیفیت کد:
کد تمیز و قابل خواندن
نام‌گذاری واضح و معنادار
کامنت‌های مناسب در جاهای پیچیده
TypeScript برای type safety (الزامی)
Error Handling مناسب


الزامات اصلی (Core Requirements):
1. مدیریت Board:
   - ✅ یک برد ثابت (Demo Board) از پیش مقداردهی شده
   - ✅ امکان ویرایش عنوان برد  
   - ✅ طراحی مطابق پیاده‌سازی فعلی

2. مدیریت List:
   - ✅ ایجاد و حذف لیست داخل برد
   - ✅ ویرایش عنوان لیست
   - ✅ Drag & Drop افقی برای جابه‌جایی لیست‌ها

3. مدیریت Card:
   - ✅ ایجاد کارت در لیست‌ها
   - ✅ ویرایش عنوان
   - ✅ Drag & Drop عمودی/میان‌لیست برای جابه‌جایی کارت‌ها
   - ✅ Modal کامنت جداگانه برای مشاهده/افزودن نظر


4. ویژگی‌های تکمیلی:
   - ✅ مدیریت کامنت برای هر کارت از طریق Modal اختصاصی
   - ✅ پشتیبانی از Drag & Drop کامل (لیست‌ها و کارت‌ها)
   - ✅ داده‌ها کاملاً سمت کلاینت مدیریت می‌شوند



🎨 الزامات UI/UX:
طراحی:
Responsive Design: باید روی موبایل و دسکتاپ کار کند
Drag & Drop: باید بصری و روان باشد
Modal: برای ویرایش جزئیات Card
Inline Editing: برای ویرایش سریع عنوان‌ها
طراحی مشابه مرجع - UI/UX مشابه با demo
استایل:
فقط SCSS - استفاده از SCSS برای تمام استایل‌ها
SCSS Variables برای رنگ‌ها، فونت‌ها و اندازه‌ها
SCSS Mixins برای کدهای تکراری
SCSS Nesting برای ساختار منطقی
SCSS Partials برای سازماندهی فایل‌ها
Responsive Design با SCSS media queries
رنگ‌بندی و layout مشابه مرجع


🎯 نکات مهم:
تمرکز کنید روی:
عملکرد اصلی - نه جزئیات غیرضروری
کد تمیز - نه کد پیچیده
تجربه کاربری - نه انیمیشن‌های پیچیده
مدیریت داده‌های محلی - نه اتصال به سرور
معماری خوب - نه کد spaghetti
Type Safety - استفاده صحیح از TypeScript
Clean Code - کد قابل خواندن و نگهداری
عملکرد مشابه مرجع - همه چیز باید کار کند
Next.js Best Practices - استفاده صحیح از Next.js
SCSS Best Practices - استفاده صحیح از SCSS
AI-powered tools-مجاز به استفاده از ابزارهای هوش مصنوعی برای تسریع در فرآیند توسعه و بهبود کیفیت کد
نگران نباشید:
❌ انیمیشن‌های پیچیده
❌ اتصال به Backend یا API


معیارهای ارزیابی:
ساختار پروژه:
سازماندهی فولدرها منطقی و قابل فهم
جداسازی concerns مناسب
قابلیت نگهداری کد
Next.js Best Practices
کیفیت کد:
خوانایی و وضوح کد
نام‌گذاری مناسب متغیرها و توابع
DRY Principle - عدم تکرار کد
SOLID Principles در طراحی
TypeScript برای type safety
Clean Code - کد تمیز و قابل نگهداری
معماری:
Custom Hooks برای منطق پیچیده
Separation of Concerns مناسب
TypeScript برای type safety (الزامی)
Error Handling مناسب
عملکرد:
تمام ویژگی‌ها کار می‌کنند
عملکرد مشابه مرجع
UI/UX مشابه مرجع
Responsive Design
SCSS:
استفاده صحیح از SCSS features
Variables برای مقادیر تکراری
Mixins برای کدهای تکراری
Nesting منطقی و تمیز
Partials برای سازماندهی
Responsive Design با media queries


تحویل پروژه:
فایل‌های مورد نیاز:	
کد منبع کامل
README.md
نحوه تحویل:
Push کد به GitHub repository شخصی
README.md توضیحات تکنولوژی هاییکه استفاده شده 
Demo زنده برای تست عملکرد (اختیاری)
Commit messages واضح و معنادار


🎯 نکته نهایی:

این پروژه معیار اصلی ما برای تصمیم‌گیری در مورد همکاری با شماست. ما به دنبال کد کامل و بی‌نقص نیستیم، بلکه می‌خواهیم ببینیم چطور مسائل را حل می‌کنید، کد می‌نویسید و فکر می‌کنید. کیفیت این پروژه تعیین‌کننده این است که آیا می‌توانیم با هم کار کنیم یا خیر.

همه چیز در سمت کلاینت - نیازی به Backend نیست! 🎉

کیفیت کد و معماری مهم‌تر از سرعت پیاده‌سازی است! 🏗️

TypeScript برای type safety الزامی است! 🔒

Clean Code برای خوانایی و نگهداری الزامی است! 🧹

Next.js برای performance و developer experience الزامی است! ⚡

SCSS برای styling الزامی است! 🎨

عملکرد مشابه مرجع - همه چیز باید کار کند! 🎯

موفق باشید! 🚀