Problems

At the beginning of the project, the client had a traditional content management system (CMS) where page editing took place in a form of administrative panel where each field corresponded to a block on page. For users, this approach was completely unintuitive and made it difficult to manage the site. In addition, for more complex site elements (tariff tables, forms, etc.), client has been forced to use services of previous CMS vendor. This led to the fact that changes to almost any section of the site took a very long time, thus were unnecessarily expensive. Therefore, the client decided to develop their own CMS with intuitive WYSIWYG content management, which could easily be used by non-technical personnel.

Solution

We’ve developed a mechanism for creating and formatting HTML pages content using customizable drag-and-drop visual components (widgets) used as pages building blocks. In cooperation with the client, a list of required components has been created, such as: HTML form designer, HTML table and tariff table designer, map-enabled component, image slider, parallax-enabled component, image gallery and other visual elements and their combinations. In the process of using the system, the list of components is supplemented all the time, thus expanding capabilities of the site editors.

In addition to the content creation mechanism, we’ve developed a CMS admin dashboard with the following features:

  • Page management: editing, metadata, publication;
  • Language management: language contexts, language constants, page translations;
  • User and their permission management;
  • File management: folder structure, uploading, deleting, metadata;
  • Menu management: structure, nesting levels.

Technical description

The system architecture consists of three parts:

  • The server side is written in .NET. It’s responsible for displaying pages, routing, security, form processing, e-mail sending, other system integrations, administration APIs, etc.
  • The Page Designer is an AngularJS application that allows users to create pages in a WYSIWYG manner using customizable drag-and-drop widgets.
  • The administration dashboard is the back office of the site, written in AngularJS. It allows client administrators to manage and configure the site.

As a base technology for this project a standard version of .NET Framework has been choosen, because at that time .NET Core still were in beta, and project reliability and stability were more important than cross-platform capabilities and other .NET Core features.