• Overview
• Installation/Setup
• UI Modules
• Theme
• To-Do's

See a live demo of this project (Chrome only!)

• Images can be dragged from the left hand gallery into the right hand canvas
• Images in the canvas can be re-arranged
• Uses HTML5 drag & drop API (please use Chrome for viewing)
• Built using my One-Nexus boilerplate (which in turn is built using my Synergy framework) (thanks to this task I found and fixed 2 bugs - here, and here)
• React is used for presentational components (using FSC's)
• Although React is used for presentational components, this is not a typical React SPA (no state/store)
• The UI can be configured via ui/themes/canva/theme.json (learn more)
• Most of the magic happens thorugh the EditorPane module

Given the limitations in both time and scope, the experience I ended up creating (as a POC) takes the pattern from the provided mockups and recurses it infinitely, so you would end up with something like:

This is achieved mostly through clever use of CSS and using JavaScript to add the appropriate classes when needed.

The prototype is a simple singe page formed up of three React components (<Header>, <EditorNav> and <EditorPane>):

const Index = () => (
    <main>
        <Header />
        <EditorNav />
        <EditorPane />
    </main>
);

export default Index;

View Source

• Built/tested using Node v6.11.4
• React and ReactDOM are provided as globals through webpack.config.babel.js

git clone https://github.com/esr360/canva-x.git

cd canva-x

npm install

npm start

http://localhost:3000/

UI modules are built using Synergy to allow them to be configurable and scalable

• Header
• Button
• EditorNav
• EditorPane

Any customizable/configurable aspects of the UI would in theory be controllable by ui/themes/canva/theme.json, allowing for cosmetic changes to be made without touching any source code:

{
    "theme": {
        "colors": {
            "brand": {
                "brand-1": "#01c4cf",
                "brand-2": "#7d29e8"
            }
        },
        "header": {
            "background": {
                "gradient": {
                    "direction": "135deg",
                    "colors": ["brand-1",  "brand-2"]
                }
            }
        },
        "button": {
            "modifier(primary)": {
                "background": "white",
                "color": ["#COLOR", "greyscale", "grey-5"],
                "hover": {
                    "background": "darken(white, 5%)"
                }
            },
            "modifier(tertiary)": {
                "background": "rgba(black, 0.4)",
                "color": "rgba(white, 0.8)",
                "hover": {
                    "background": "rgba(black, 0.6)",
                    "color": "white"
                }
            }
        }
    }
}

Note that the theme is set via app.json:

{
    "app": {
        "ui": {
            "theme": "canva"
        }
    }
}

You can also overwrite theme-level configuration by passing values here:

{
    "app": {
        "ui": {
            "theme": "canva",
            "modules": {
                "colors": {
                    "brand": {
                        "brand-1": "pink"
                    }
                }
            }
        }
    }
}

Now, regardless of your theme, the brand-1 color would always be pink.

• Make responsive
• Add animation effects
• Fix cross-browser issues
• Address scaling of individual images in canvas
• UI tweaks to match provided mockup (logo, color swatch etc.)