SD-Draw is a professional-grade infinite canvas web application built with the MERN stack, designed as a scalable foundation for creating whiteboard, diagramming, or Figma-like SaaS products.

It features a smooth, zoomable and pannable infinite workspace powered by a vector-based canvas engine, allowing users to draw, edit, and manage elements efficiently without performance loss.

The application includes a full suite of drawing tools such as freehand pencil, eraser, and geometric shapes (line, arrow, rectangle, circle), along with an advanced text system that seamlessly converts HTML input into editable vector elements.

A robust state management system using Zustand enables reliable undo/redo functionality with a complete history stack, while JWT-based authentication ensures that user data and canvases are securely stored and persisted via MongoDB. An in-memory fallback system is also implemented, allowing the app to function even when the database is unavailable.

The project is production-ready, with clear deployment strategies including Docker, Railway, Vercel, and AWS. It is ideal for developers or startups looking to save weeks of development time and build upon a solid, extensible canvas architecture.

✔ Infinite zoomable canvas
✔ Smooth pan and zoom-to-cursor
✔ Pencil, shapes, arrows, eraser
✔ Editable text elements
✔ Undo / Redo history system
✔ JWT authentication system
✔ MongoDB data persistence
✔ Export to PNG
✔ Modular and scalable codebase
✔ Easy to customize

- Node.js (v16 or higher)
- MongoDB (local or Atlas)
- Basic knowledge of JavaScript and React
- Modern web browser

Step 1: Setup the Backend
-------------------------
1. Open a terminal and navigate to the backend directory:
   cd backend

2. Install backend dependencies:
   npm install

3. Configure Environment Variables:
   - Create a file named ".env" inside the /backend directory.
   - Add the following variables:
     PORT=5000
     JWT_SECRET=your_super_secret_key
     MONGO_URI=mongodb://localhost:27017/sddraw
   - (Note: If you leave MONGO_URI blank or MongoDB is not running, the backend will gracefully fallback to an "in-memory" database for testing purposes, but data won't persist after a server restart).

4. Start the backend server:
   npm start
   (or use "nodemon server.js" for development)

Step 2: Setup the Frontend
--------------------------
1. Open a new terminal tab and navigate to the frontend directory:
   cd frontend

2. Install frontend dependencies:
   npm install

3. Start the Vite development server:
   npm run dev

Step 3: Launch the Application
------------------------------
1. Open your web browser and navigate to the URL provided by Vite (typically http://localhost:5173/ or http://localhost:5174/).
2. You will be greeted by the Login page. 
3. Click "Register here" to create your first account.
4. Enjoy infinite vector drawing!