iflashlord / postcard-editor

Postcard Editor React

Postcard Editor React

An open-source postcard editor with React and Fabric uses the Canvas to manage a simple postcard editor.

Demo: https://postcard-editor.herokuapp.com/

• Bonus Features and Extended Features

  • Fabric.js is good to manage bonus and default text item
    • ✓ Thank the fantastic library
  • Undo, Redo
    • ✓ With buttons
    • ✓ Also Shortcut
    • Manage the change page problem
      • ✓ A temporary solution to reset after change the page
      • ◦ Good to add separated history
  • Zoom (in/out)
    • ✓ With buttons + -
    • ✓ Also with mouse wheel
    • ✓ Also Shortcut
  • Edit text
    • ✓ Onboard
    • ✓ Also in properties
  • Add text block
    • With button
      • ✓ Heading
      • ✓ Paragraph
    • ◦ Also Shortcut
  • Add Background Color
    • ✓ Add Random Color Button
  • Add Background Image
    • ✓ Add Random Image Button
  • Move text block
    • ✓ Rotate
    • ✓ Resize
  • Flip Side Items
    • ✓ Flip items horizontally
    • ✓ Flip items vertically
  • Send back and bring up items
    • ✓ Show for both background image and text
    • ✓ Send back
    • ✓ Bring up
  • Rotate
    • ✓ Shortcut
  • Zoom
    • ✓ Shortcut
    • ✓ Full-Screen option
    • ✓ Fit Screen option
  • Group/ Un Group Items
    • ✓ Group / ungroup items
    • ✓ Also, shortcut
    • ✓ Add delete support groups
    • ✓ Layer order / flip / resize / delete / duplicate
  • Add blank default page for back/front based on the result JSON
    • ✓ use image for front default instead
    • ✓ still use blank for the back
  • Delete text Block
    • ✓ With Drag out of the workspace
    • ✓ Also with the delete key
  • Copy and Paste (Duplicate)
    • ✓ With Button
    • ✓ Also Shortcut
  • Export Image
    • PNG
      • ✓ Export image separately one by one
      • ✓ BUG: need to deselect All Item before
  • Add built-in control for duplicate and delete actions on any group of items and images
    • ✓ Duplicate
    • ✓ Delete
  • Save/Load
    • ✓ Export Save (Json) File
    • ✓ Load Saved File to the selected page
  • Responsive
    • ◦ Small Screens
    • ◦ Mobile
  • PWA Settings
    • ✓ Manifest file
    • ✓ Icons
    • ✓ Settings
    • ✓ Register Worker to activate

• Technical

  • SASS
  • FontAwesome
  • Font/Color Picker
    • font-picker-react
      • google font API
    • react-color
  • Bootstrap
  • Fabric.js
    • Canvas and Editor Items
  • Redux
  • React