این پروژه با استفاده از کتابخانهی React پیادهسازی شده است.
در این پروژه، کاربر میتواند از طریق ابزارهای مختلف روی بوم (Canvas) تغییراتی اعمال کرده و اطلاعات مربوط به آن را در پنلهای کناری مشاهده کند. این سیستم بهصورت ماژولار طراحی شده و از کامپوننتهای مستقل استفاده میکند تا قابلیت توسعه و نگهداری آسانتری داشته باشد. پیادهسازی به گونهای انجام شده که از معماری component-based استفاده شود. برای هر بخش از رابط کاربری یک کامپوننت جداگانه تعریف شده است. ارتباط بین این کامپوننتها از طریق props و state مدیریت میشود.
Header
: .این بخش شامل عنوان نقاشی و دکمه های ایمپورت و اکسپورت برای دریافت و بارگزاری نقاشی داخل بوم است

Canvas
: .بوم یا فضای کاری اصلی که کاربر روی آن عملیات انجام میدهد

InfoPanel
: .نمایش اطلاعات مربوط به وضعیت فعلی بوم و تعداد آیتم های انتخابشده

ToolsPanel
: .شکل های قابل استفاده برای تعامل با بوم

هدر
:

می توان نام نقاشی داخل کادر نوشت. برای ایمپورت و اکسپورت نیز دکمه قرار داده شده است.
پنل ابزار
:

برای درج شکل از این بخش به صورت drag and drop شکل به بوم اضافه می شود. برای حذف شکل نیز کافی است 2 بار روی شکل مورد نظر کلیک شود.
پنل اطلاعات
:

نمونه خروجی
:

برای اجرای پروژه، مراحل زیر را انجام دهید:
git clone https://github.com/Mamadf/Web-HW2.git
cd Web-HW2
npm install #if it's not installed
npm start