0 / 20
25:00
Guard the fire of focus, for it transforms chaos into clarity.

CANVAS

An internal tool designed to manage LoveThatDesign content, including researching products and brands, organizing articles, scheduling, and publishing content.

Published: 01:30 am · 10 Jul 2024

CMS
CDN
Content Optimization
Automation
Data Parity

Banner
Canvas designed, developed and later assisted by Riaz Ahamed

Abstract

An inhouse product to do research, collect information, access permitions, manage copy rights for articals, projects, products and brands, once the information are sufficient then content team can make assessments, review and schedule it for publish (for public/private)

Project information

Maintainer: 28LightBulbs Industry: Research, Content Management Category: Internal - Content Management System My Contribution Period: Sep 2018 - Jul 2024 Current Status: Live Location: Dubai Silicon Oasis, Dubai, UAE

Contribution

Position: Frontend Development Type: Secondment (Internal) (Note: Responsible for the design, development, and establishment of the dedicated project team.)


Services offered

  • Design: Design and prototype the entire system to ensure it runs smoothly for a lifetime with no worries.
  • Reusable Components: We have developed numerous content management components, with added support for dynamic filtering options.
  • Optimization: Our components are implemented with lazy-load functionality to maximize performance.
  • Data Parity: Manage data between miltiple domain using access keys.

The Challenge: Endless pages

  • The System: Despite the use of reusable components and lazy loading, the possibility of creating copies (articles, brands, projects, products, communities, etc.) leads to an endless proliferation of pages and subpages. The system must be well-defined to efficiently handle data and loading processes.
  • Seamless Navigation: The system should enable quick access to records and allow for filling or updating information with minimal clicks to avoid user fatigue and improve efficiency.
  • Data Parity: Since the platform manages data across multiple domains and databases, all datasets must be synchronized with each other to ensure seamless data consistency.
  • Data Formats: The system should support the ability to handle a wide range of file types, extract data from them, and convert it into appropriate formats as needed.
  • History: Every information creation and update should be logged with precise timestamps, and admins should have the ability to revert changes when necessary.
  • Role-Based Access: The system should allow assigning projects or tasks to specific teams or members to enhance trust, accountability, and integrity within the workflow.

Solutions implemented

Frontend Solution:

  • Design System: Constructed an ultra-sleek, single-page application (SPA) with performant components to optimize data loading and implemented lazy loading for modules to enhance user experience.
  • Inter-Component Communication: Established seamless communication between components at all levels using a centralized state management system, ensuring efficient data sharing across the application.
  • Data Integrity: Developed a robust data merging mechanism to eliminate duplicates and ensure consistency, with workflows designed to maintain data accuracy and integrity.
  • Real-Time Collaboration: Enabled real-time collaboration, allowing multiple users to work simultaneously on the same module or page, with live updates to reflect interactions and contributions instantly.
  • Contextual Commenting System: Implemented a feature for leaving contextual comments on any part of the module, facilitating asynchronous feedback and discussions.
  • Role-Based Access Control: Designed a system where team managers can assign specific sections or articles to team members, restricting access and visibility based on user roles.
  • Content Collection: Developed a web scraping tool as a browser extension, enabling the research team to efficiently collect information from authorized sources.

The measurable impact

  • Improved performance by 2x of research team over data collection
  • Necessary information got prioritized and a standard data structure was established for every module to avoid manual data reorganization
  • Content value increased
  • New opportunity sourcing increased and increase in rate of lead conversion

Technologies used


angular angular
rxjs rxjs
typescript typescript
javascript javascript
html5 html5
css css
sass sass
tailwind tailwind
syncfusion syncfusion
webpack webpack
nodejs nodejs
php php
mysql mysql
jest jest
github github
webstorm webstorm
neovim neovim
figma figma

Competitors

1. Programa 2. Gather