Saganews - Next-Gen Newsroom System

Saganew is the next-generation newsroom system, taking full advantage of modern web technologies to improve editorial and journalists workflows.

Professional Work Experience

This was my first dive into big-scale applications. At first, the size and complexity of the app were intimidating, but I soon got the hang of it. Our team was determined to tackle challenges and find new solutions, making things easier for journalists and editors. We built a wide range of features and intigrated with other systems that allows modern newsrooms to operate more efficiently and effectively.

Technological Landscape

Our infrastructure revolved around a cloud-native, serverless architecture. But most of our energy went into frontend development due to the amount of data we're handling there and supporting many workflows. Consequently, a significant portion of our solutions needed extensive frontend work, requiring a lot of optimization owing to the sheer scale of the application.

Technology Stack

In our pursuit of excellence, we leveraged a diverse array of libraries and solutions sourced from online platforms. Some of the frequently used tools include:

Challenges & Solutions

• Atomic State Management
  My very first challenge was to convert most of the context-based state into atomic state. I used Jotai for this, along with Jotai Molecules. By combining both, I was able to solve state management issues that required scope-based solutions or single responsibility state. As a result, we were able to eliminate React context and significantly reduce unnecessary re-renders, greatly boosting the performance of the entire application. I've also written a blog about how to get started with Jotai and Jotai Molecule - check it out here (opens in a new tab).

• Automated workflow
  One of the most exciting features I worked on was creating an automated workflow system. This system allows users to set up custom workflows that can be triggered based on specific events or conditions. For example, when an instance (item to publish) is scheduled or published, the system can automatically notify relevant team members that, that instance is either waiting for an approval or has been published to different platforms. This feature has significantly improved efficiency and reduced manual work for journalists and editors.

• Story Layout Rebuild
  One of the most significant and impactful tasks I've undertaken was rebuilding the entire story layout. During this time, we introduced TypeScript to our application. While the process was challenging, it ultimately led to a more secure, less buggy, and responsive view of the story. The most challenging part was converting all the queries and mutations to TypeScript and changing the states from react context to jotai atoms without disrupting existing workflows. Fortunately, I managed to complete this task without breaking a single workflow throughout the entire migration process. Additionally, I made many improvements to existing workflows, streamlined processes, and removed unnecessary calculations, resulting in a faster and better user experience.

• Re-writing the Instance component
  The Instance component is the core of the application. This is the entity that gets published to different platforms and connects with other entities like stories, rundowns etc. Initially the component was built very quickly without much thought to scalability and performance. As the application grew, the component became a bottleneck, causing slow load times and poor user experience. I took on the challenge of re-writing the entire component from scratch, focusing on performance, scalability, and maintainability. I've re-introduced it as a standalone feature using a hook based approach, separating concerns and architecting in a way that it can be easily extended in the future without much hassle and fear of breaking existing functionality. The new Instance component is now faster, more reliable, and easier to maintain.

• Allowing dymanic states and integrating them in different workflows
  One of the most complex features I worked on was allowing dynamic states for different platforms of instances. This feature allows users to define custom states for different platforms, such as "Draft", "In Review", "Published", etc. The challenge was to integrate these dynamic states into existing workflows and ensure that they worked seamlessly with other features of the application. I had to make significant changes to the state management system and the workflow engine to accommodate this feature. After extensive testing and iteration, I was able to successfully implement this feature, which has greatly improved the flexibility and usability of the application.

  

• Feed Sources Configuration
  Another intersting feature I worked on was the Feed Sources Configuration. This feature allows users to configure different feed sources for their newsrooms, such as RSS feeds, email feeds etc. The interesting part was to connect to a micro service that stores these feed sources and use these sources to fetch news articles automatically into the newsroom system. This required working in multiple DynamoDB tables, Lambda functions, and integrating with the frontend. After completing this feature, users can now easily manage their feed sources and automatically fetch news articles into their newsroom system.

  

• Integrating React Router
  As the application grew, we faced challenges with navigation and routing. We were a single page application, managing navigation manually, which became increasingly complex and error-prone. The problem was not integrating a routing library but rather to integrate it into an existing large-scale application without breaking existing workflows. I, closely working with another senior developer, took on the challenge of integrating React Router into the application. Before we started the integration, we built an architecture that would allow us to gradually migrate different parts of the application to use React Router without disrupting existing functionality. We also made sure the router synced well with our state management system. After a lot of planning, testing, and iteration, we successfully integrated React Router into the application. This has greatly improved navigation and routing, making it easier for users to navigate through the application as well as sharing links to specific views.

• Printing Mechanism
  This feature allows users to print enitites like instances, notes and others that has rich text contents, giving them more confidence and privacy while sharing these information with others via email or physical copies. The challenge was to create a printing mechanism that could handle different content types and formats while ensuring that the printed output was visually aligned with our system design. It may seem like a simple task, but it required a lot of attention to detail and replicating many of the internal features like rich text content, media information and metadatas without being able to use existing components and their logics. I had to build a separate set of components and styles specifically for printing, ensuring that they were optimized for print media and had access to all the necessary data before rendering begins. We also had to give support for arabic and other rtl languages. It was interesting to rewrite many of the existing logics without being able to reuse existing code and react components.

• Tab Overhaul
  We initially used in-app tabs to enable users to work on multiple stories, but due to performance issues, there was a limit of a maximum of four tabs. I undertook a complete overhaul of the tabs section, which now allows users to open an infinite number of tabs while maintaining peak performance. This redesign includes drag-and-drop functionality, faster tab switching, and an overall improved user experience, providing a place to manage all open tabs.

• Other Noteworthy Tasks
  

  • Daily note taking feature (web & mobile)
  • TypeScript migrations
  • Performance optimizations across various modules
  • Reducing the load in MAM integration
  • Asset management
  • Moving business logics into custom hooks

Website (opens in a new tab)

© Shamim Fahad, 2025