🎨 Artfy React Drawing App (MUI + Fabric.js)

A modern frontend-only web application for creating drawings and designs built with React, Material UI (MUI), and Fabric.js.
It allows users to draw geometric shapes, add and style text, customize backgrounds and borders, control transparency, and export the final design as an image — all within a sleek, responsive UI.

---

⚠️ Notice

The source code in this repository has been partially removed from the live demo version for commercial purposes. If you are a recruiter, hiring manager, or interested party who wishes to review the full source code, please feel free to contact me directly via:

WhatsApp: [+201146264618]

Email: [hossammostafaofficiall@gmail.com]

Access to the complete version will be provided upon request.

---

🚀 Features

• ✏️ Draw geometric shapes (rectangles, circles, triangles, lines, and more)
• 🖋️ Add text with customizable font, size, alignment, and color
• 🎨 Background control: change canvas background color easily
• 🔲 Border customization: adjust stroke color and width for any object
• 🌫️ Element transparency: control the opacity of individual objects
• 💾 Export design as image (PNG) directly to your device
• 🧹 Reset or clear the entire canvas with one click
• ⚙️ Modern UI/UX powered by Material UI
• 📱 Responsive design that adapts to all screen sizes

---

🧩 Tech Stack

Category	Technology
⚛️ UI Library	React.js
🧱 UI Framework	Material UI (MUI) + [Emotion](https://emotion.sh/ docs/introduction)
🖼️ Canvas Engine	Fabric.js
🔄 State Management	Redux Toolkit
🚦 Routing	React Router DOM
⚡ Build Tool	Vite
🧠 Language	TypeScript

---

📂 Project Structure

src/ ├── components/ │ ├── CanvasCreator.tsx # Main canvas component (create and manage drawing area) │ ├── PropertiesBar.tsx # Controls for element properties (color, opacity, borders, etc.) │ ├── BottomBar.tsx # Bottom controls (save, reset, delete) │ └── Toolbar.tsx # Shape and text creation buttons │ ├── context/ │ └── CanvasContext.tsx # Context API for sharing canvasRef and containerRef │ ├── utils/ │ ├── backgroundUtils.ts # Utility functions for background and opacity changes │ └── borderUtils.ts # Utility functions for border management │ ├── pages/ │ ├── Home.tsx # Landing page │ └── Design.tsx # Main drawing editor page │ ├── store/ │ └── index.ts # Redux Toolkit store configuration │ └── main.tsx # Application entry point

---

🧠 How It Works

1. When the editor page loads, a Fabric.Canvas instance is created inside CanvasCreator.
2. Users can:
   • Add shapes or text via the Toolbar.
   • Edit selected object properties (color, border, opacity, font, etc.) using PropertiesBar.
   • Change background or reset the entire canvas.
3. When done, the user can click "Save Design" to download the current canvas as an image (.png format).

---

⚙️ Installation & Setup

# 1️⃣ Clone the repository
git clone https://github.com/yourusername/react-drawing-app.git

# 2️⃣ Navigate to the project folder
cd react-drawing-app

# 3️⃣ Install dependencies
npm install

# 4️⃣ Start the development server
npm run dev
Once started, open your browser and visit:
👉 http://localhost:5173

----

🧠 Skills Covered

Building interactive canvas applications using Fabric.js

Managing global state with Redux Toolkit

Creating custom UI components with Material UI + Emotion

Using Refs and Context API for canvas management

Structuring scalable React applications

Exporting canvas drawings to downloadable PNG images

Working with TypeScript for type-safe development

----

🤝 Contributing

Contributions are always welcome!
If you’d like to report a bug or suggest a feature, feel free to open an Issue or submit a Pull Request.

----

👨‍💻 Developer

Hossam Mostafa
Frontend Developer | React.js & UI Specialist & Next.js
🔗 LinkedIn
🌐 Portfolio