Clipit - Restructure of the portal in a new architecture (PWA)

ABOUT THIS PROJECT

Our collaboration with Clipit started in 2016 when they needed a big data solution that would provide the needed storage capacity, performance considerations, and custom searching language that will offer all the needed options for their users. 

Since the beginning of our collaboration, Clipit knew that they have a real problem struggling with a poor quality code, which is very chaotic and difficult to handle, both in the backend and frontend.

After building the elastic search cluster for them, we started a new project - building a whole new architecture. They were looking for a more enhanced tool and a fresh perspective on the front-end development that would have allowed the creation of modern solutions,  and easy-to-use.  While in the backend they needed a more structured and organized solution. 

 

 

THE CHALLENGE

The main challenge here was to choose the right technology stack that will make this process easier and quicker but also will guarantee quality for our client. 

Angular was and still is one of the most impressive pieces of technology which makes it the perfect solution for our challenge since it offers a modern and sleek design combined with high-quality functionalities and an intuitive user experience. That’s how we started to slowly build the new clean, maintainable, and extendable architecture in Angular 10 with modules. 

For the backend we chose the simplicity of Restful Web API over other heavier architectures, we implemented it in C# framework 4.7.2. It is simple, lightweight, and scalable and we can easily expose specific API functionalities for external users. We implemented OAuth authentication which combines well with it.

 

 

The process

SPECIFICATION

  • Requirement gathering phase - meetings and workshops  
  • Proposal and acceptance of technology that will be used
  • Initial system architecture – diagrams and modules

DESIGN, DEVELOPMENT & TESTING

  • Backend
    • Security with OAuth
    • REST API Backend in C# framework 4.7.2
    • Integration with external APIs
    • SignalR
  •  Frontend
    • Angular NgRx
    • Material Design
    • Automated Tests

DEPLOYMENT

  • Continuous Integration / Continuous Deployment
  • TeamCity
THE RESULT

After restructuring the whole application, we built a fully responsive site. Besides its modern and elegant look with a bunch of new features that make life easier for the users, we also increased the portal performance and made it more maintainable.  We have a portal that sends calls to the API to read and write.

The front-end is divided into modules: 

  • Chart module
  • Message management module
  • Settings management module
  • Message display module

All these modules need crud (create, read, modify, delete) and some more complicated operations provided by the new API, such as wizard to create an analysis page (i.e. chart page). 

It works in such a way that when the user selects a few things that he wants to have on the chart page, a call is made to the API with the selected things, and based on that a chart page is created.

It can be about: what type of page is it, analyzing a specific thing, what type of media should be analyzed (social media, print media ...), do we need some specific sources, for example only Twitter messages, and according to which criteria is collected (for example only containing the word ‘angular’). 

A chart page is created with the selected charts showing some trends, for example, the sentiment of Twitter messages in the last quarter, together with the PR value and reach of those messages.

Clipit was always offering to its customers a strategic value of their media data, now it offers the same but in a more clean, flexible, structured, and modern way with responsive design and few new functionalities.