In 2016, our client Clipit recognized the opportunity to support their growth aspirations and reached out to us to collaborate on enhancing their software infrastructure. Together, we identified areas for improvement, spanning both backend and frontend development.
Our collaboration started with the successful implementation of an elastic search cluster, which paved the way for a new project focused on developing a more robust architecture. Seeking a fresh perspective and advanced tools, they entrusted us to guide them toward modern, user-friendly solutions in frontend development, while also aiming for a more structured and organized backend system.
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.
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
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 always provided strategic value to its customers through media data, but now it delivers the same value in a cleaner, more flexible, structured, and modern manner. With responsive design and additional functionalities, the user experience is greatly enhanced.