CrawlQ SaaS Platform

Overview

What was built and why it matters.

Co-developed at Quantamix Solutions using React, Redux, Node.js, Python, REST APIs, Jest, and Playwright.

Turn multi-step research inputs and AI-assisted outputs into a coherent product experience where users could configure audiences, review generated research, build personas, and create personalised content without losing context during asynchronous operations or partial failures.

Engineering approach

• Developed reusable React components and dashboards for audience configuration, research review, persona development, and generated-content workflows.
• Used Redux to manage shared domain state and keep loading, success, empty, and error states predictable across related screens.
• Integrated asynchronous REST operations through a consistent frontend service layer so user actions and backend responses remained easier to reason about.
• Built and integrated Node.js and Python services for structured research inputs, AI-assisted processing, metadata classification, and customer-facing product functionality.
• Expanded Jest coverage and introduced Playwright end-to-end tests around critical customer journeys and cross-screen workflows.

Challenge

The system problem.

The product combined structured customer inputs, asynchronous AI-assisted processing, metadata classification, and generated outputs across several connected stages. The interface needed to preserve user context and communicate progress or failure clearly while backend services evolved.

Constraints

Known boundaries and deliberately unclaimed details.

• Research and content-generation workflows could span multiple asynchronous requests, so the UI needed stable state transitions and clear recovery behaviour for partial failures.
• Generated outputs and metadata structures evolved with the product, requiring reusable components that could accommodate changing schemas without duplicating presentation logic.
• Automated tests needed deterministic boundaries around variable or external AI-assisted behaviour to remain trustworthy in continuous delivery.
• Critical customer journeys crossed multiple screens and services, making browser-level end-to-end coverage necessary in addition to isolated unit tests.

Role and ownership

Individual contribution.

• Worked as a Full-Stack Engineer across React interfaces, Redux state, REST API integration, Node.js services, and Python-backed processing.
• Owned reusable UI implementation for audience, research, persona, and generated-content workflows.
• Implemented shared asynchronous state patterns and error handling for cross-component product interactions.
• Expanded Jest tests and introduced Playwright end-to-end coverage for high-value customer journeys.
• Participated in debugging and iterative delivery across frontend and backend boundaries.

Contribution summary

• Co-developed the SaaS product across customer-facing interfaces, shared application state, REST integration, and backend services.
• Built reusable dashboard components for repeated research, persona, and content-generation workflows.
• Implemented predictable Redux patterns for asynchronous operations and cross-component product state.
• Expanded automated test coverage from 55% to 88% and added browser-level validation for critical journeys.
• Collaborated across product and engineering concerns to translate evolving workflow requirements into maintainable features.

System architecture

A profile-backed view, not an invented topology.

• A React frontend is organised around audience, research, persona, and content-generation domains, with reusable components shared across repeated workflow patterns.
• Redux stores shared domain state and request status so related screens observe consistent loading, success, failure, and reset behaviour.
• A frontend API layer communicates with REST endpoints, normalises errors, and keeps network concerns separate from presentational components.
• Node.js services coordinate customer-facing workflows and persistence, while Python services support research processing, classification, and AI-assisted functionality.
• Jest covers component and service behaviour; Playwright validates integrated browser journeys across the most important user workflows.

Key engineering decisions

Choices supported by the supplied work.

• Use reusable components for repeated configuration, review, and generated-output patterns rather than building each workflow screen independently.
• Centralise cross-screen domain state in Redux while keeping transient presentation state local to components.
• Represent asynchronous work with explicit loading, success, empty, and error states so users are never left guessing about request status.
• Separate API calls from UI components to improve testability and reduce coupling to backend response details.
• Complement Jest coverage with Playwright because several high-risk failures only appear when routing, state, APIs, and rendering interact in the browser.

Performance and reliability

What changed measurably.

• Increased automated test coverage from 55% to 88%.
• Introduced Playwright end-to-end coverage for critical customer journeys.
• Improved consistency across multi-step workflows through shared Redux patterns and reusable UI components.
• Made asynchronous failures easier to understand through explicit request and error states.

Technologies

The verified stack and focus areas.

Outcome

The result without inflated claims.

A customer-facing SaaS platform supporting audience research, persona development, and personalised content generation, with reusable product interfaces, predictable state management, integrated backend services, and materially stronger automated coverage.

Lessons and future improvements

What the evidence suggests—and what still needs verified content.

Lessons

• State management is most valuable when it makes multi-step user journeys and failure recovery predictable, not when every piece of component state is made global.
• Combining Jest with Playwright covers different failure surfaces: local behaviour, service integration, routing, shared state, and full browser journeys.
• Reusable workflow components reduce delivery cost only when their data contracts and error states are designed as carefully as their visual appearance.

Future improvements

• Add API contract tests and deterministic fixtures for AI-assisted services so frontend and backend changes can be validated independently.
• Introduce durable job status, resumable workflows, and user-visible progress for long-running research and content-generation operations.
• Expand accessibility coverage, keyboard navigation, and automated visual regression checks across high-use dashboards and forms.
• Add product telemetry around workflow completion, failure recovery, and abandonment to identify friction beyond technical error rates.
• Formalise reusable interface patterns into a documented component library with consistent states, validation, and responsive behaviour.