Only those that fall within the eligibility guidelines laid out in our Legal Terms & Conditions for Mission: Open Architect are permitted to take part in this hackathon.

Use Ext JS to the best of your ability to produce a JavaScript WYSIWYG Editor. 

The goal is to inspire the community to design an open source WYSIWYG editor that allows you to edit your application views. 

Solve for X:

As a web application developer, I want to build a view for my X framework. I want to be able to drag components and drop them in my WYSIWYG editor, which is a view of my application. I would really like to resize the components, change the styles, theming, and change other component properties. 

• Aim to build a component palette where you can drag components to your WYSIWYG editor.
• Aim to build a WYSIWYG editor.
• Build a component property editor

• Application code is written with JavaScript
• Produce a single page web application that runs in one of the latest browsers
• Architecture uses node & npm
• Provide good coding practices, like modular design
• Use Ext JS 7.2 components in the application
• React with ExtReact
• Angular with ExtAngular
• VueJS with ExtWebComponents
• Or any other framework with ExtWebComponents

Overall

• Use the doxi JSON, Ext JS components list provided in our blog for building a component pallet.
• Aim to provide a preview of the component.

Options

• Provide a window/panel with a list of draggable components from the Ext JS component library
• Categorize by component type
• Provide the ability to add libraries to component pallet
• Provide a component search query filter
• Provide for a library of components list and list of all properties and configs for a given component. 

Overall

• Provide a WYSIWYG editor in which you can drag in components
• Provide a way to resize and change layouts
• Provide a way to select a component, and edit that component's properties in a component property editor
• Ensure that your editor works well with framework X views

Options

• Allow for the selection of a starter view package based on a template
• Allow for the selection of an existing view or view package (no metadata!!!)
• Provide a center window/panel with a visual representation of the view being designed, along with an additional tab to show the underlying JavaScript code for the view
• Multiple sizes/device types
• Allow for multiple views? (tab interface)
• Provide theme-related UI

Overall

• Provide a way to select a component and edit its properties

Options

• Provide a WYSIWYG inspector (the hierarchy of the objects in the application)
• Optionally, the data type of each property should be displayed and/or honored. 
• Provide for contextual documentation for a component, property, event or method
• Provide for a list of available events for each added component.  For a given event, if needed, provide for the name of the function that will be called.  This function would be added to the ViewController and wired up to the component in the View
• Provide for the ability to ‘data bind’ a given property

The goal is to provide good application design practices for the framework of choice. For example, Ext JS developers will receive bonus points for using Ext JS MVVC (although not a requirement).

The goal is to provide good architecture to implement the functionality that works well with the application. 

More information on what we will look for with each framework can be found below:

• For Ext JS javascript consider using MVVC
• For React consider using Redux
• For Web Component frameworks, using custom elements and X framework libraries to help with code architecture. 
• Is the code readable like a story, does the context make sense?
• Can you easily debug the project with Visual Studio Code

• Present your application through a GitHub repo. 

For a complete list of submission requirements, please refer to the Submission Requirements section found in our Legal Terms & Conditions for Mission: Open Architect.