A full-stack application for creating custom canvas designs with shapes, text, and images, and exporting them as optimized PDF files.

• Canvas Initialization: Create canvases with custom dimensions
• Shape Drawing: Add rectangles and circles with customizable colors and strokes
• Text Support: Add text with various fonts, sizes, and colors
• Image Upload: Upload and position images on the canvas
• Live Preview: Real-time preview of your canvas
• PDF Export: Export your design as a high-quality, optimized PDF
• Size Optimization: Automatic compression and optimization for smaller PDF files

• Node.js with Express.js
• canvas - HTML5 Canvas API for Node.js
• pdfkit - PDF generation
• sharp - Image optimization
• multer - File upload handling

• React with Vite
• Axios - HTTP client
• CSS3 - Modern styling with gradients and animations

rocketium/
├── backend/
│   ├── controllers/
│   │   └── canvasController.js    # Canvas manipulation logic
│   ├── middleware/
│   │   └── upload.js              # File upload configuration
│   ├── routes/
│   │   └── canvas.js              # API routes
│   ├── uploads/                   # Uploaded images storage
│   ├── server.js                  # Express server
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── App.jsx               # Main React component
│   │   ├── App.css               # Styling
│   │   ├── main.jsx              # Entry point
│   │   └── index.css             # Global styles
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
├── vercel.json                    # Vercel deployment config
└── README.md

• Node.js (v16 or higher)
• npm or yarn

1. Clone the repository

git clone <your-repo-url>
cd rocketium

2. Install Backend Dependencies

cd backend
npm install

3. Install Frontend Dependencies

cd ../frontend
npm install

1. Start the Backend Server

cd backend
npm start
# Or for development with auto-reload:
npm run dev

Backend will run on http://localhost:5000

2. Start the Frontend Development Server

cd frontend
npm run dev

Frontend will run on http://localhost:3000

3. Open your browser and navigate to http://localhost:3000

POST /api/canvas/initialize
Content-Type: application/json

{
  "width": 800,
  "height": 600
}

POST /api/canvas/add-rectangle
Content-Type: application/json

{
  "sessionId": "string",
  "x": 50,
  "y": 50,
  "width": 200,
  "height": 100,
  "fillColor": "#3498db",
  "strokeColor": "#2c3e50",
  "strokeWidth": 2
}

POST /api/canvas/add-circle
Content-Type: application/json

{
  "sessionId": "string",
  "x": 400,
  "y": 300,
  "radius": 80,
  "fillColor": "#e74c3c",
  "strokeColor": "#c0392b",
  "strokeWidth": 2
}

POST /api/canvas/add-text
Content-Type: application/json

{
  "sessionId": "string",
  "text": "Hello Canvas!",
  "x": 300,
  "y": 500,
  "fontSize": 32,
  "fontFamily": "Arial",
  "color": "#2c3e50"
}

POST /api/canvas/add-image
Content-Type: multipart/form-data

{
  "sessionId": "string",
  "image": <file>,
  "x": 550,
  "y": 50,
  "width": 200,
  "height": 150
}

POST /api/canvas/preview
Content-Type: application/json

{
  "sessionId": "string"
}

POST /api/canvas/export-pdf
Content-Type: application/json

{
  "sessionId": "string",
  "optimize": true
}

1. Initialize Canvas: Set your desired canvas dimensions and click "Initialize Canvas"
2. Add Elements: Use the form controls to add rectangles, circles, text, or images
3. Preview: See your design update in real-time in the preview panel
4. Export: Click "Export as PDF" to download your design as an optimized PDF file

Create a .env file in the backend directory:

PORT=5000
NODE_ENV=development

Create a .env file in the frontend directory:

VITE_API_URL=http://localhost:5000/api

1. Install Vercel CLI

npm install -g vercel

2. Deploy

vercel

3. Set Environment Variables in Vercel Dashboard if needed

cd backend
git init
git add .
git commit -m "Initial commit"
# Follow your hosting provider's deployment instructions

cd frontend
npm run build
# Deploy the 'dist' folder to your hosting provider

The application implements several optimization techniques:

• Image Compression: Uses Sharp library to compress images before adding to PDF
• PDF Compression: Enables built-in PDF compression in PDFKit
• Progressive Rendering: Optimizes PNG images for web delivery
• Quality Control: Balances quality and file size (80% quality, compression level 9)

• In-memory session storage for development
• Each canvas instance gets a unique session ID
• Session data includes canvas context, dimensions, and element history

On Windows, you may need to install build tools:

npm install --global windows-build-tools

Change the port in backend/server.js or set PORT environment variable

Ensure CORS is properly configured in backend/server.js

This project is created for educational purposes.

Built as an assignment project demonstrating full-stack development skills.

• Canvas API - Node Canvas Library
• PDFKit - PDF generation
• Sharp - Image processing
• React & Vite - Frontend framework and build tool