Custom email application
This brings us to what we have today. The client needed us to make a tool for creating and editing sites. The whole thing was to be based on an already existing API and be a part of a bigger application built with React.js and Redux.
The main functions of the editor were:
- Building sites from predefined blocks with simple drag&drop
- Editable text, graphics and other parameters
- Customised Froala editor
- Add new blocks feature
- A site inheriting the theme defined in the app’s settings
- Distinct page types, e.g. a static page or a blog post
We joined forces with the Curaytor team at an early stage of this project which gave us the opportunity to talk through the vision together, share our ideas and come up with our own solutions that we saw as potentially beneficial to the entire software. The first thing that came to our minds was to use readymade solutions, like jQuery plugins, and to adapt them to our client’s needs. However, after testing some of the available plugins and comparing them with what we actually needed, we decided that it would be much more convenient to write the editor from scratch. Thanks to that, we gained full control over the application’s looks and we didn’t have to compromise any bit of our vision. Our friends at Curaytor got exactly what they wanted – a tailor-made site editor which could be expanded or edited at will.
Our input and technology stack
The following technologies were used to accomplish our goals:
Along the way we’ve encountered and overcome a lot of challenges, the most significant being the ever-changing nature of this project which forced us to code the app in such a way that will allow to add new types of blocks or introduce changes to the already existing ones as fast and as effortlessly as possible.
However, there were many more, like:
Settings page gives the user the option to choose the main colors and fonts for the pages. We needed to make sure that the right components will inherit the right settings. We’ve created a component called `<ThemeProvider />` which downloads API settings and directs them into context. Apart from that, we created a High-Order Component called `withTheme` which is responsible for directing context as props to a component which is currently hooked up. If we want a given component to inherit the app’s theme, all we need to do is to export it with this function:
- export default withTheme(SomeComponent)
- custom plugins
Apart from the aforementioned technologies, we used WYSIWYG Froala editor. We needed to adjust the looks of the editor and write a couple of custom plugins which were needed to fully accomplish what our client has visualized. A good example might be a plugin which we used to add and manipulate text shadow.
Our partners wanted to have a system where it is possible to build sites using drag&drop to put certain sections/components in place straight from the sidebar. The system was called Content Creator and in order to achieve our goals, we needed to use the following libraries:
react-dnd – a drag’n’drop library for React which allows the user to move new sections/components from sidebar
react-sortable-hoc – allows to switch the order of given sections by simple movement of a mouse
react-contenteditable – allows to edit texts in elements, buttons etc. by simply clicking on a given element in HTML and entering the text
Working with Curaytor was one of the most enjoyable experiences ever and our story together is far from over.
Chop-Chop team did a great job bringing our design to life! We really appreciate smooth communication throughout the whole project and pixel-perfect result that we got at the end. We would truly recommend Chop-Chop to anyone who seeks professional web development service that is provided/delivered in a friendly way.