A modern frontend application for professional photobook design with Fabric.js canvas integration and local storage.

• Node.js 18+
• Git

git clone <repository-url>
cd frametale-studio
npm install

npm run dev

Frontend will run on: http://localhost:5173

• Framework: React 18 with Vite
• Canvas: Fabric.js for advanced design tools
• UI: Material-UI with custom glassmorphism effects
• State: React Context for project management
• Styling: Tailwind CSS + custom modern effects

• Templates: Browser localStorage for template management
• Projects: Local canvas data persistence
• Settings: User preferences and configurations

• ✅ Professional canvas with Fabric.js
• ✅ Advanced typography tools
• ✅ Shape library and image editing
• ✅ Layer management system
• ✅ Page navigation for photobooks
• ✅ Real-time preview and zoom controls
• ✅ Keyboard shortcuts and performance monitoring

• ✅ Canvas data persistence (localStorage)
• ✅ Template management system (local)
• ✅ Project and page management (local)
• ✅ Auto-save functionality (local)
• ✅ Export system (JSON, canvas data)

• ✅ Cut lines and print guides
• ✅ Rulers and grid system
• ✅ Performance optimization
• ✅ Responsive design
• ✅ Modern glassmorphism UI

frametale-studio/
├── src/                          # Frontend source
│   ├── components/               # React components
│   ├── pages/                    # Main pages
│   ├── hooks/                    # Custom React hooks
│   ├── contexts/                 # React contexts
│   ├── services/                 # API services
│   ├── styles/                   # CSS and styling
│   └── utils/                    # Utility functions
├── public/                       # Static assets
└── docs/                         # Documentation
│   │   │   ├── projects/         # Project management
│   │   │   ├── canvas/           # Canvas operations
│   │   │   ├── idml-parser/      # IDML processing
│   │   │   ├── auth/             # Authentication
│   │   │   └── file-storage/     # File management
│   │   ├── common/               # Shared interfaces
│   │   └── config/               # Configuration
│   └── storage/                  # File storage
└── docs/                         # Documentation

Backend (.env)

MONGODB_URI=mongodb://localhost:27017/frametale-studio
JWT_SECRET=your-secret-key
PORT=3001
UPLOAD_PATH=./storage
CORS_ORIGIN=http://localhost:5174

Frontend

VITE_API_URL=http://localhost:3001/api/v1

• Full-stack architecture setup
• Professional design studio interface
• Backend API with MongoDB integration
• Canvas data persistence
• Template management system
• IDML parser foundation
• Auto-save functionality
• Modern UI with glassmorphism effects

• Authentication system (prepared but not active)
• Advanced IDML processing
• Real-time collaboration
• Advanced export features

• User management and roles
• Cloud storage integration
• Advanced template marketplace
• Print-ready PDF generation
• Mobile responsive design

1. Start the development server (frontend on :5173)
2. Test local storage - Add shapes/text and see them save automatically
3. Canvas persistence - Refresh the page and see your work restored
4. Template management - Create and manage templates locally

{
  "version": "5.3.0",
  "objects": [...],
  "background": "#ffffff",
  "metadata": {
    "pageType": "cover",
    "dimensions": { "width": 816, "height": 1056, "unit": "pt" },
    "resolution": 300,
    "colorProfile": "CMYK"
  }
}

{
  "name": "Classic Photobook",
  "category": "photobook",
  "type": "cover",
  "dimensions": { "width": 816, "height": 1056, "unit": "pt" },
  "fabricCanvas": { ... },
  "placeholders": [ ... ]
}

npm run dev

npm run build && npm run preview

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

This project is proprietary software for FrameTale Studio.

🎨 FrameTale Studio - Professional photobook design made simple.