Fran's

OJS

Report

Highlights:

What’s Working Well

Build pipeline

It has an acceptable level of quality.

  1. Has tests
  2. Checks for code coverage
  3. Has SonarQube (needs config)
  4. Will have Snyk
  5. Checks on every push and merge

Localisation

The whole OJS app is localised, which will come in handy if we decide to expand into other markets, and also allows us to standardise our App Vocabulary / terms (they way we call things)

Challenges

The challenges are divided in the following sections

  • CODE related
  • WORKFLOW related
  • CULTURE related

Jump to next topic ➡️

CODE

No standard React project organization or workflows

Our current React codebase lacks consistent structure, impacting maintainability and velocity.

READ MORE ⬇️

CODE

What is happening?

  • No clear separation between business logic and presentational components (critical)

  • Components tend to grow very large and complex over time

  • Inconsistent patterns lead to fragile code that’s hard to maintain or scale

READ MORE ⬇️

CODE

  • No clear separation between business logic and presentational components (critical)

  • Components tend to grow very large and complex over time

  • Inconsistent patterns lead to fragile code that’s hard to maintain or scale

How does this affect us?

READ MORE ⬇️

CODE

  • Enforce separation between logical (container) and presentational components

  • Define clear responsibilities for each layer:

    • Presentational: purely UI, stateless, reusable

    • Logical: data fetching, state management, business rules

  • Introduce code standards and guidelines for component organization

  • Increase test coverage around business logic

How to fix?

READ MORE ⬇️

CODE

  • Fix complexity: Medium (5/10)

  • Time estimate: Medium-high (8/10)

  • Why?

    • Though technically straightforward, it requires tests and coordination on standards

    • Needs team agreement on component roles and responsibilities

    • Incremental refactoring to avoid large disruptions

Effort & Complexity

READ MORE ⬇️

CODE

Standardizing React architecture is essential. It will significantly reduce bugs, accelerate development, and elevate product quality. Without it, we risk maintaining fragile, error-prone code that slows us down.

Summary

Jump to next topic ➡️

CODE

No Onboarding Documentation

Lack of clear onboarding docs slows ramp-up and creates knowledge gaps.

READ MORE ⬇️

CODE

What's happening?

  • No centralized documentation for setup and common tasks

  • New hires and existing devs rely on tribal knowledge or direct syncs

  • Key info missing: enabling Developer Tools, clearing cache, initializing app, plugin launcher behavior

READ MORE ⬇️

CODE

How to fix?

  • Maintain a clear README.md plus other Markdown docs for key topics

  • Cover setup, tools, cache, app init, and common issues

  • Use Claude Code to keep docs accurate and updated automatically

  • Encourage team contributions to keep docs fresh

READ MORE ⬇️

CODE

Effort & Complexity

  • Fix complexity: Low (2/10)

  • Time estimate: Low (2/10)

  • Why?

    • Writing docs is straightforward

    • Requires discipline to keep it updated

READ MORE ⬇️

CODE

Summary

Clear onboarding docs speed up new developer integration, reduce errors, and free up senior engineers from repeated explanations.
It’s a small investment with a big return on productivity.

Jump to next topic ➡️

CODE

CSS-in-JS: Styling Maintenance Challenges

Current styling approach complicates consistency and maintainability.

READ MORE ⬇️

CODE

What's happening?

  • CSS-in-JS is brittle, hard to maintain, and restricts CSS overrides

  • It leads to messy, inconsistent styles and design drift

  • Our code heavily overrides FluentUI, which is built for Microsoft’s look, not Definely’s

  • These overrides break FluentUI’s design, causing UI glitches and maintenance pain

READ MORE ⬇️

CODE

How does this affect us?

  • UI consistency suffers, confusing users and undermining brand identity

  • Styling bugs become frequent and harder to fix

  • Development slows as more time is spent debugging UI issues

  • Increases technical debt and risks longer-term instability

READ MORE ⬇️

CODE

  • Build an internal UI component library with reusable, standardized elements

  • Use TailwindCSS plus a custom atomic CSS layer for consistency and flexibility

  • Follow atomic design principles to organize and scale styles cleanly

  • Integrate seamlessly with existing business logic without heavy overrides

How to fix?

READ MORE ⬇️

deck

By Franco Laiuppa

Made with Slides.com

deck

  • 2

More from Franco Laiuppa