React Fabric App

Basic Canvas editor based on web technologies with dark mode support.
The website is deployed on Vercel.
Website: https://react-fabric-app.vercel.app

🔍 Table of Contents

• 📦 Installation
• 🚀 Performance optimization
• 🔧 Pipeline Setup
• 💻 Tech Stack

📦 Installation

1. Clone the repository

git clone https://github.com/Hasmik-Mejlumyan/react-fabric-app

2. Install the dependencies

yarn

*Note: Ensure you are using Node.js v22.14.0 for better and stable experience.

3. Run the project

yarn dev  

4. For checking and fixing code style run eslint commands accordingly

yarn lint # For checking

yarn lint:fix # For fixing

🚀 Performance optimization

Simple techniques were used for performance optimization such as

1. Lazy loading for bigger components (we don't have many, that's why I imported my global Canvas element 🙂)
2. Used Fabric.js library, instead of Canvas API with requestAnimationFrame
3. Used React Context API instead of prop drilling

🔧 Pipeline Setup

A basic template was used only for checking PRs, specifically lints and build check.
The deployment part was taken care of by Vercel.
PR Check consists of the following jobs.

1. lint - which check linters in a few steps
2. build - which checks if the app builds properly in a few steps

💻 Tech Stack