Curaytor Mailer

Custom email application

– React.js
– Redux
– ES6
– Mocha
– Enzyme

Meet Curaytor Mailer

They make the best business better

Curaytor is a digital marketing company from Boston, MA. It’s one of the 500 Fastest Growing Companies in the United States, according to Inc. Magazine. So how did it happen that such a huge business decided to work with us? In order to answer this question we will need to take a step back and look at some of our previous projects.

Our most important cooperation to date was the Curaytor Mailer project – an initially simple email campaign creator which later proved to be so much more than that. The still-evolving nature of the application turned out to be a demanding yet rewarding and gripping challenge.

An initially simple email campaign creator later proved to be so much more than that.

Project overview

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:

– React.js

– Redux

– ES6

– Mocha

– Enzyme

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.

custom-plugin

  • drag&drop

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

The Conclusion

Working with Curaytor was one of the most enjoyable experiences ever and our story together is far from over. The project is constantly growing and getting better and better. For example, not so long ago, after weeks of testing, we undertook the task of implementing a traditional PHP backend which proved greatly beneficial to the overall speed of the site. There are many plans for the app’s future and we’re really excited to feel like and actually be a part of the team behind such an undertaking.

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.

– Jimmy Mackin, Co-Fouder at Curaytor

Want your project to be showcased here?

Start with a free quote and get 5% discount!

Get a free quote